Installation
Install the dependencies:
npm install @base-ui/reactCopy the source into components/ui/switch.tsx. Registry items that depend on it install it automatically.
Usage
import { Switch } from "@/components/ui/switch";
export function Example() {
return (
<label className="flex items-center gap-2 text-sm">
<Switch defaultChecked />
Streaming
</label>
);
}Examples
Sizes and disabled
default measures 32×18 and sm 24×14. A disabled switch keeps its state visible at half opacity.
API Reference
Switch
Wraps Base UI's Switch and accepts its props.
SwitchProps
- size"sm" | "default"= "default"
The control size.
- checked?boolean
Controlled checked state.
- onCheckedChange?(checked: boolean) => void
Called when the state changes.
- defaultCheckedboolean= false
Uncontrolled initial state.
- disabledboolean= false
Prevents interaction.