Switch

Toggle switch component for boolean values.

Switch

Switch is a form component for toggling between on/off states.

Import

import { Switch } from 'radix-native-ui';

Usage

import { Switch } from 'radix-native-ui';

<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
/>

Props

Haptic Feedback

Switches provide haptic feedback by default when toggled. You can disable this with the hapticFeedback prop:

<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
  hapticFeedback={false}
/>

Examples

Basic Switch

<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
/>

With Label

<Flex direction="row" justify="between" align="center">
  <Text>Enable notifications</Text>
  <Switch
    checked={notifications}
    onCheckedChange={setNotifications}
  />
</Flex>

Sizes

<Flex direction="column" gap={3}>
  <Flex direction="row" justify="between" align="center">
    <Text>Small</Text>
    <Switch size="1" />
  </Flex>
  <Flex direction="row" justify="between" align="center">
    <Text>Medium</Text>
    <Switch size="2" />
  </Flex>
  <Flex direction="row" justify="between" align="center">
    <Text>Large</Text>
    <Switch size="3" />
  </Flex>
</Flex>

Variants

<Flex direction="column" gap={3}>
  <Switch variant="solid" defaultChecked />
  <Switch variant="soft" defaultChecked />
  <Switch variant="surface" defaultChecked />
</Flex>

With Label

<Switch size="2" label="Enable notifications" defaultChecked />

With Color

<Switch
  color="green"
  checked={enabled}
  onCheckedChange={setEnabled}
/>

Disabled

<Switch disabled />

Settings Panel

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={3}>Settings</Heading>
    <Flex direction="row" justify="between" align="center">
      <Text>Push notifications</Text>
      <Switch checked={push} onCheckedChange={setPush} />
    </Flex>
    <Flex direction="row" justify="between" align="center">
      <Text>Email notifications</Text>
      <Switch checked={email} onCheckedChange={setEmail} />
    </Flex>
    <Flex direction="row" justify="between" align="center">
      <Text>Dark mode</Text>
      <Switch checked={dark} onCheckedChange={setDark} />
    </Flex>
  </Flex>
</Card>

Related

• Checkbox - Checkbox component
• Button - Button component