Switch
Themed toggle.
Installation
npx axiom add switchpnpm dlx axiom add switchyarn dlx axiom add switchbun x axiom add switchUsage
import { Switch } from "@/components/ui/switch";
<Switch value={enabled} onValueChange={setEnabled} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | boolean | — | Whether the switch is on. Use with onValueChange for a controlled switch. |
defaultValue | boolean | false | Initial value when the switch manages its own state. |
onValueChange | (value: boolean) => void | — | Called with the new value when the user flips the switch. |
disabled | boolean | false | Blocks changes and dims the switch with the disabled tokens. |
haptic | HapticKind | false | 'light' | Haptic played when the user flips the switch. false turns it off. |
size | 'sm' | 'md' | 'md' | md matches the iOS system switch (51×31pt), sm is 40×24pt for dense rows. The touch area stays 44pt. |
accessibilityLabel | string | — | What the switch controls. Not needed when the switch sits in an OptionItem, which labels it. |
style | StyleProp<ViewStyle> | — | Extra styles for the track. |
Track and thumb colors come from switch.default.{default,checked,disabled}.{track,thumb} in the component tokens. The on/off logic and the thumb animation live in use-switch.ts, shared by every styling variant.
Haptics
The switch plays a light haptic when the user flips it, like the iOS system switch. A change of value made in code plays nothing. Pass haptic={false} to turn it off, or another kind to change it. Nothing plays until your app connects a haptics library: see Haptics.
Use cases
Settings that apply immediately
A switch means the change takes effect right away, with no Save button. Label the row, not the switch.
<OptionItem
label="Read receipts"
trailing={
<Switch
value={settings.readReceipts}
onValueChange={(v) => update({ readReceipts: v })}
/>
}
/>Revealing dependent options
Turning the switch on shows the options that only make sense when the feature is on.
<Switch
value={scheduled}
onValueChange={setScheduled}
accessibilityLabel="Scheduled downtime"
/>;
{
scheduled && (
<>
<OptionItem
label="From"
trailing={<TimeValue value={from} />}
onPress={pickFrom}
/>
<OptionItem
label="To"
trailing={<TimeValue value={to} />}
onPress={pickTo}
/>
</>
);
}Pending server change
While the request runs, keep the new position and disable the switch. Revert it if the request fails.
const [enabled, setEnabled] = useState(user.twoFactor);
const mutation = useMutation({
mutationFn: setTwoFactor,
onError: () => setEnabled((v) => !v),
});
<Switch
value={enabled}
disabled={mutation.isPending}
onValueChange={(v) => {
setEnabled(v);
mutation.mutate(v);
}}
/>;Related
- Checkbox
- OptionItem, for a switch inside a settings row