Components
Switch
A control that toggles between checked and not checked. Use it for settings that apply immediately — no submit step.
Preview
Rendered with live Cognition tokens — the track flips to the brand token when on and the thumb stays on the surface token, no dark: classes.
States
<Switch /><Switch defaultChecked /><Switch disabled defaultChecked />API
Prop
Type
Default
Description
checked
boolean
undefined
Controlled state. Pair with onCheckedChange.
defaultChecked
boolean
false
Initial state when uncontrolled.
onCheckedChange
(checked) => void
undefined
Fires when the switch is toggled.
disabled
boolean
false
Dims to 50% and blocks interaction.
Don't and Do
Don't
Don't use a Switch where the change only takes effect after a Save — that's a Checkbox. A Switch implies an immediate effect.
Do
<label className="flex items-center gap-2">
<Switch checked={wifi} onCheckedChange={setWifi} /> Wi-Fi
</label>import { Switch } from "@/components/ui/switch";
export function AirplaneMode() {
return (
<label className="flex items-center gap-2 text-sm">
<Switch /> Airplane Mode
</label>
);
}Built on Radix Switch — keyboard toggle and ARIA come for free. Use checked / onCheckedChange for controlled state.