Binary on and off control for immediate settings.
Also known as: toggle switch, on off switch, binary switch, settings switch
Install with the CLI, or copy the component source into your project.
Add switch (npm)
1npx --yes -p @default-file/ui df-ui add switch
Checked by default.
Small and default sizes.
Non-interactive states.
Binary on and off control for immediate settings. Prefer Toggle Group for option clusters.
| Prop | Type | Default | Notes |
|---|---|---|---|
| checked | boolean | - | Controlled checked state. |
| defaultChecked | boolean | false | Uncontrolled initial checked state. |
| onCheckedChange | (checked: boolean) => void | - | Called when the switch toggles. |
| size | "sm" | "default" | "default" | Control size. |
| disabled | boolean | - | Non-interactive switch. |
| className | string | - | Additional styles. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-switch-thumb-gap | CSS length | calc(1 * var(--spacing-unit)) | Inset between track edge and thumb. Source of truth for enclosed vertical slack. |
| --df-switch-thumb-size | CSS length | var(--df-affordance-size-sm) | Default thumb diameter. |
| --df-switch-thumb-travel | CSS length | var(--df-switch-thumb-size) | Default checked translate distance. Matches the thumb diameter. |
| --df-switch-track-height | CSS length | calc(var(--df-switch-thumb-size) + 2 * var(--df-switch-thumb-gap)) | Default track height. Derived as thumb size plus twice the thumb gap (40x24 with the default gap). |
| --df-switch-track-width | CSS length | calc(var(--df-switch-track-height) + var(--df-switch-thumb-travel)) | Default track width. Derived as track height plus thumb travel. |
| --df-switch-thumb-size-sm | CSS length | var(--df-affordance-size-xs) | Small thumb diameter. |
| --df-switch-thumb-travel-sm | CSS length | var(--df-switch-thumb-size-sm) | Small checked translate distance. Matches the small thumb diameter. |
| --df-switch-track-height-sm | CSS length | calc(var(--df-switch-thumb-size-sm) + 2 * var(--df-switch-thumb-gap)) | Small track height. Derived as small thumb size plus twice the thumb gap (32x20 with the default gap). |
| --df-switch-track-width-sm | CSS length | calc(var(--df-switch-track-height-sm) + var(--df-switch-thumb-travel-sm)) | Small track width. Derived as small track height plus small thumb travel. |
| --primary | CSS color | var(--df-neutral-850, var(--df-neutral-900)) | Checked track fill. |
| --input | CSS color | var(--df-neutral-100) | Unchecked track fill. |
| --background | CSS color | var(--df-neutral-0) | Thumb fill. |