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
accessibilityLabel string - Accessibility label for screen readers
testID string - Test ID for testing purposes

Variants

Sizes

Three size options for different contexts.

<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />

States

Checked and unchecked states with smooth animation.

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.

Accessibility

  • Role: Pressable is rendered with role="switch" so iOS VoiceOver and Android TalkBack announce it as a switch.
  • Screen Reader: accessibilityState mirrors both disabled and checked so assistive tech reads out "on", "off", or "disabled" automatically.
  • Label: Pass accessibilityLabel so screen-reader users know what the switch controls. Required when no visible label is rendered alongside.
  • Tap Target: hitSlop={14} meets Apple HIG (44pt) at all sizes
  • 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)