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 — Ark UI
switch.tsx
123456789101112131415import { Switch } from "#components/ui/ark-ui/switch.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // variant/size resolve once on Root; Control renders the Thumb by default <Switch.Root defaultChecked variant="solid" size="md" palette={indigoPalette}> <Switch.Control /> <Switch.Label>Auto-save</Switch.Label> <Switch.HiddenInput /> </Switch.Root> );}
// controlled: <Switch.Root checked={checked} onCheckedChange={(d) => setChecked(d.checked)}>