Switch

Import

import { Switch } from '@tac-ui/native';

Playground

Interactively configure the Switch props below.

<Switch label="Enable notifications" />

Default

Uncontrolled switch. The component manages its own toggle state; use defaultChecked to set the initial value.

<Switch />
<Switch defaultChecked />

With Label

Providing a label prop wraps the switch in a row container with the label on the left, suited for settings lists.

<Switch label="Notifications" />
<Switch label="Dark Mode" defaultChecked />

Disabled

Disabled switches are non-interactive and visually dimmed regardless of their current state.

<Switch disabled />
<Switch defaultChecked disabled />

Disabled with Label

Labeled switches can also be disabled, shown at reduced opacity to indicate a non-interactive state.

<Switch label="Disabled Off" disabled />
<Switch label="Disabled On" defaultChecked disabled />

Controlled

Pass checked and onChange to fully control the switch state from a parent. The onChange callback receives the new boolean value directly.

const [checked, setChecked] = React.useState(false);

<Switch
  checked={checked}
  onChange={(val) => setChecked(val)}
/>

All States

Overview of switch states: off, on, disabled off, and disabled on.

<Switch label="Off" />
<Switch label="On" defaultChecked />
<Switch label="Disabled Off" disabled />
<Switch label="Disabled On" defaultChecked disabled />

API Reference