Form Elements
Toggle
Toggle component allows users to switch between two states typically representing on/off, enabled/disabled, or active/inactive settings. Toggles provide a quick and intuitive way to modify system or feature preferences with a single action.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- Minimum 24x44px touch target (WCAG 2.5.5)
- 2px focus ring with 2px offset for keyboard navigation (WCAG 2.4.7)
- Color contrast ratios meet 3:1 for UI components (WCAG 1.4.11)
- Does not rely on color alone for state indication (visual thumb position)
- Semantic button element with role="switch"
- aria-checked attribute properly indicates state
- Proper label associations
- Clear visual state indication (thumb position)
When to use this component
✓Do's
- •Use a Switch for immediate on/off actions.
- •Use a Switch when changes take effect instantly.
- •Use a Switch for binary settings, such as Dark Mode or Notifications.
- •Use the Large (48 × 28) size for primary settings, as it is the default size in the design system.
✕Don'ts
- •For settings that require users to save their changes, use a Checkbox instead.
- •For selecting multiple options, use a Checkbox Group.
- •For choosing one option from a set, use Radio Buttons.
Do's and Don'ts
✓ Do's
Dark mode
Use switches for settings that take effect immediately without a save button.
✗ Don'ts
Enable notifications
Don't use switches in forms that require submission, use Checkbox instead.