Skip to main content

Switch

Switches toggle the state of a single item on or off. Follows the Material Design 3 Switch specification.

Usage​

import { Switch } from '@onlynative/components/switch'

<Switch value={isOn} onValueChange={setIsOn} />

With Icons​

By default, the selected state shows a check icon on the thumb. You can customize both selected and unselected icons.

<Switch value={isOn} onValueChange={setIsOn} selectedIcon="check" />
<Switch
  value={isOn}
  onValueChange={setIsOn}
  selectedIcon="bell"
  unselectedIcon="bell-off"
/>

When unselectedIcon is provided, the thumb renders at the larger selected size in both states.

Disabled​

<Switch value={false} disabled />
<Switch value disabled />

Props​

No props found for Switch.