Atom

Switch

Toggle control for binary on/off states, commonly used for settings and preferences.

Overview

The Switch component is a toggle control for binary on/off states. Unlike checkboxes, switches are typically used for settings that take effect immediately without requiring form submission.

Props

Prop Type Default Description
checked boolean false Whether the switch is checked (on)
onCheckedChange (checked: boolean) => void - Callback fired when the switch state changes
size 'sm' | 'md' | 'lg' 'md' Size variant of the switch
disabled boolean false Whether the switch is disabled

Variants

Sizes

Three size options for different contexts.

Small
Medium
Large
 
<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />

States

Checked and unchecked states with smooth animation.

Off
On
Disabled (On)

Examples

With Label

Typical usage with an associated label.

<label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
  <Switch checked={enabled} onCheckedChange={setEnabled} />
  <span>Enable feature</span>
</label>

Settings List

Common pattern for settings interfaces.

Push notificationsReceive push notifications on your device
Marketing emailsReceive updates about new features

Accessibility

  • Role: Uses the "switch" ARIA role for proper semantics.
  • Keyboard Support: Space key toggles state, Tab navigates.
  • Screen Reader: Announces checked/unchecked state and role.
  • Focus Management: Visible focus ring on keyboard navigation.
  • WCAG Compliance: Meets AA standards.

Best Practices

  • Use Switch for settings that take effect immediately
  • Use Checkbox instead when changes require form submission
  • Always provide a visible label next to the switch
  • Don't use switches for actions (use Button instead)
  • Don't use switches for multi-select scenarios (use Checkbox group)