Switch
On or off, right now — a setting that applies the moment it flips (Radix Switch).
Preview
Default
Settings
Check-ins, changes, messages
New places, once in a while
Easy on the eyes after dark
Disabled
Usage
import { Switch, Label } from "zostel-ui";
<div className="flex items-center justify-between">
<Label id="updates-label" htmlFor="updates">Trip updates</Label>
<Switch id="updates" aria-labelledby="updates-label" defaultChecked onCheckedChange={setUpdates} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked / defaultChecked | boolean | — | Controlled / uncontrolled state. |
onCheckedChange | (checked: boolean) => void | — | Called when it flips. |
disabled | boolean | false | Greys it out. On a touch screen its target is 44 × 44 (an invisible band, so it keeps its look). |
id · aria-label · aria-labelledby | string | — | Its name, required: an id that a <Label htmlFor> points at, aria-labelledby (the id of the words beside it) or aria-label. A <label> alone names it in browsers, but axe doesn’t count a label for these button-based controls: pair htmlFor (a click on the words reaches it) with aria-labelledby, as the preview does. In a form, FormControl does both with FormLabel. In development, one that renders with no name warns in the console. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
checked / defaultCheckedbooleanControlled / uncontrolled state.
onCheckedChange(checked: boolean) => voidCalled when it flips.
disabledbooleanfalseGreys it out. On a touch screen its target is 44 × 44 (an invisible band, so it keeps its look).
id · aria-label · aria-labelledbystringIts name, required: an id that a <Label htmlFor> points at, aria-labelledby (the id of the words beside it) or aria-label. A <label> alone names it in browsers, but axe doesn’t count a label for these button-based controls: pair htmlFor (a click on the words reaches it) with aria-labelledby, as the preview does. In a form, FormControl does both with FormLabel. In development, one that renders with no name warns in the console.
classNamestringMore classes, merged with the component’s own (tailwind-merge).