ComponentsForms
Switch
An on/off toggle for settings that apply right away.
Theme
Motion
An on/off toggle for settings that apply right away.
<Switch id="notify" defaultChecked />
<Label htmlFor="notify">Email notifications</Label>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Switch, Label } from "junco";
<Switch id="notify" checked={on} onCheckedChange={setOn} />
<Label htmlFor="notify">Email notifications</Label>Switches apply immediately, so they suit settings. For choices submitted with a form, use a Checkbox.
When someone @mentions you.
A summary every Monday.
New features and fixes.
Switch#checked / defaultCheckedonCheckedChangesizedisabledclassNames| Prop | Type | Default |
|---|---|---|
checked / defaultCheckedControlled or initial state. | boolean | – |
onCheckedChangeCalled on toggle. | (checked: boolean) => void | – |
sizeTrack and thumb size. | "sm" | "md" | "lg" | "md" |
disabledNot focusable or toggleable. | boolean | false |
classNamesSlot overrides. | { root?: string; thumb?: string } | – |
| Key | Action |
|---|---|
| Space | Toggles the switch. |
| Enter | Toggles the switch. |