Switch

An animated on/off toggle. The platform visual style (iOS thumb, Android track) is preserved through React Native’s underlying Switch. Use for preferences that take effect immediately — no confirmation or save button needed.

When to use: Settings toggles where the change happens the moment the user flips it (notifications on/off, dark mode, feature flags).

When not to use: Multi-select options — use Checkbox. Mutually exclusive single-select — use Radio. If the action requires a save button, consider Checkbox instead.

Import

import { Switch } from '@/components';

Usage

<Switch
  value={notifications}
  onValueChange={setNotifications}
  accessibilityLabel="Enable push notifications"
/>

Props

Prop	Type	Default	Description
value	boolean	—	Current state (required)
onValueChange	(value: boolean) => void	—	Change handler (required)
accessibilityLabel	string	—	Screen reader description (required)
isDisabled	boolean	false	Prevents interaction
testID	string	—	For testing

In a row layout

<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
  <Text variant="label">Push notifications</Text>
  <Switch
    value={push}
    onValueChange={setPush}
    accessibilityLabel="Toggle push notifications"
  />
</View>

For labeled switch rows, prefer SettingsRow with rightAccessory="switch" or the ToggleRow molecule.

Accessibility

• Role: switch
• State: on / off
• accessibilityLabel is required — without it screen readers have no way to announce what the switch controls

Related

• ToggleRow — Switch with a built-in label and description
• SettingsRow — Switch inside a settings list row with icon support
• Checkbox — multi-select boolean (doesn’t require immediate effect)