Documentation on the Switch system-design
Design-system wrapper around Radix Switch.Root and Switch.Thumb.
import { Switch } from '@repo/design-system';
<Switch checked={enabled} />
<Switch
label="Required"
checked={field.required}
=> updateField({ required: checked })}
/>
<Switch
slim
checked={enabled}
/>
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
label | ReactNode | - | Optional visible label | ||
slim | boolean | false | Tighter wrapper layout | ||
size | default | sm | default | Switch size | |
wrapperClassName | string | - | Styles the outer wrapper | ||
switchClassName | string | - | Styles the switch track | ||
thumbClassName | string | - | Styles the thumb |
All Radix Switch.Root props are also supported, including checked, onCheckedChange, disabled, and ARIA props.
Use label for short inline text:
<Switch label="Page Slug" checked={enabled} />
Use external text when you need a title and description layout:
<div className="flex items-start justify-between gap-3">
<div>
<p>Use as Page Slug</p>
<p>This field will be used for URL routing.</p>
</div>
<Switch slim checked={enabled} />
</div>
If you do not provide label, add aria-label or aria-labelledby.
<Switch aria-label="Enable auto deploy" checked={enabled} />