Switch

import { Switch } from "@knitui/components";

Usage

import { Switch } from "@knitui/components";

<Switch label="Push notifications" onChange={setEnabled} />;

Uncontrolled by default; pass checked + onChange to control it. As with the other inputs, description and error are wired to the control for you.

onLabel / offLabel render inside the track, and thumbIcon puts a glyph on the thumb itself — useful when colour alone shouldn't carry the state:

<Switch label="Dark mode" onLabel="ON" offLabel="OFF" />

A switch implies its change takes effect immediately. If the value needs a Save button to matter, a checkbox is the more honest control.

When to use something else

• A value that only applies once a form is submitted → Checkbox
• One of several mutually exclusive options → Radio or SegmentedControl

Examples

Props

Style slots

Every part of Switch can be styled through the styles prop. Explicit props on the component always win over slot styles.

Plus 495 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.

Accessibility

On the web the control carries role="switch" with aria-checked — announced as "switch, on/off" rather than "checkbox, checked", which is the distinction users of screen readers rely on to know the change is immediate.

Focus and key handling come from the shared useKeyboardActions hook, as the track is a styled Box rather than a native input.

• Name it. Use label, or aria-label / aria-labelledby when the label is rendered elsewhere.
• description and error are referenced via aria-describedby.
• disabled sets aria-disabled and removes the switch from the tab order.
• onLabel / offLabel are decoration inside the track — they are not a substitute for a name, since they describe the states, not the setting.