Switch
FormA toggle switch for binary on/off settings.
Playground
Controls
Switch label.
On/off state.
Size.
Disabled state.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Switch state. |
label | string | — | Text label. |
description | string | — | Helper text. |
size | 'sm' | 'md' | 'md' | Size. |
disabled | boolean | false | Disabled state. |
Examples
Off
vue
<DsSwitch
label="Dark mode"
:modelValue="false"
/>On
vue
<DsSwitch
label="Dark mode"
modelValue
/>Small
vue
<DsSwitch
label="Small toggle"
:modelValue="false"
size="sm"
/>Disabled
vue
<DsSwitch
label="Unavailable"
disabled
/>Skeleton
Use DsSwitchSkeleton as a loading placeholder while content is being fetched.
Small
vue
<DsSwitchSkeleton
size="sm"
showLabel
/>Medium
vue
<DsSwitchSkeleton
size="md"
showLabel
/>No label
vue
<DsSwitchSkeleton :showLabel="false" />Accessibility
- Uses role="switch" with aria-checked.
- Keyboard-operable: Space to toggle.