Switch
A control that indicates whether a setting is on or off.
Preview
Installation
Usage
import { Switch } from "@/components/ui/switch"<Switch />API Reference
Switch
Styled wrapper for Switch.Root from Base UI with built-in thumb. Size is controlled via the --track-size CSS variable.
Examples
For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Switch field.
Disabled
With Description
Customizing Size
The switch size is controlled by the --track-size CSS variable. By default, the switch uses 36px. You can customize the size by overriding this CSS variable on the component using inline styles or a custom class.