Switch
An immediate on/off toggle. Use it for settings that apply the moment they change.
Switch or checkbox?
A switch takes effect immediately; a Checkbox stages a change that a submit button commits. If your switch needs a Save button next to it, it should have been a checkbox.
States
Variants
stretch is an opt-in liquid motion. On every toggle the thumb stretches as it slides across: the edge it is heading toward moves first and the tail follows a beat later, then it relaxes back to a circle. It is one smooth motion with no bounce, it stays inside the track, and reduced motion turns it off. The default switch is unchanged.
Without a label
Inside a settings row that already has its own text, drop the label and pass an aria-label so the control is still named for screen readers.
Controlled
Props
Every other native input attribute is forwarded to the underlying <input type="checkbox">.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Optional text rendered to the right of the switch. | |
| description | ReactNode | Help text under the label, left-aligned with it. | |
| variant | "default" | "stretch" | "default" | stretch adds a liquid motion: the thumb stretches as it travels, then settles to a circle. Matches the Type axis of the Figma Switch. |
| checked | boolean | Controlled on/off state. | |
| defaultChecked | boolean | Uncontrolled initial state. | |
| disabled | boolean | false | Disables the input. |
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | Fires on toggle. |
Why it works this way
Why
- A switch means the change applies immediately; that is the contract that separates it from a checkbox, which is applied on submit.
Don't
- Don't use it in a form that has a Save button. The state would look applied when it isn't. Use Checkbox.