All components
Switch
On/off toggles with a sliding thumb in solid and raised track variants.
Variants
solid
raised
Sizes
xs
sm
md
lg
Install
zsh — switch
1bunx stylexblocks add switchUsage — Base UI
switch.tsx
12345678910111213141516import { Switch } from "#components/ui/base-ui/switch.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // Root is the label wrapper; Control is Base UI's Switch.Root and takes // the checked props — checked styling resolves via Base UI's state-aware // className callback <Switch.Root variant="solid" size="md" palette={indigoPalette}> <Switch.Control defaultChecked /> <Switch.Label>Auto-save</Switch.Label> </Switch.Root> );}
// controlled: <Switch.Control checked={checked} onCheckedChange={setChecked} />