Forms
Switch
A setting that takes effect immediately.
When to reach for it
Inside a form with a Save button, a switch is a lie about when the change happened. Use a Checkbox.
Examples
default
Notes
A setting that takes effect immediately.
Distinct from Checkbox, and the distinction is not cosmetic: a switch applies on flip, a checkbox applies on submit. A switch inside a form with a Save button is a lie about when the change happened.
The track fills with ink when on and the thumb is paper with a hairline — rather than a white thumb floating on a drop shadow, which this system does not have. The off state is a filled rule-coloured track, so the control still reads as a control on a white page.
Props
Also accepts everything in ComponentProps<typeof SwitchPrimitive.Root>. Those are forwarded to the underlying element and are not listed row by row.