Checkbox
FormA boolean toggle with optional label and description.
Playground
Controls
Checkbox label.
Checked state.
Disable checkbox.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | 'indeterminate' | false | Checked state. |
label | string | — | Text label. |
description | string | — | Helper text below label. |
disabled | boolean | false | Disabled state. |
Examples
Unchecked
vue
<DsCheckbox
label="Accept terms"
:modelValue="false"
/>Checked
vue
<DsCheckbox
label="Subscribed"
modelValue
/>Disabled
vue
<DsCheckbox
label="Unavailable"
:modelValue="false"
disabled
/>With description
Receive weekly updates.
vue
<DsCheckbox
label="Newsletter"
description="Receive weekly updates."
/>Skeleton
Use DsCheckboxSkeleton as a loading placeholder while content is being fetched.
Label only
vue
<DsCheckboxSkeleton showLabel />With description
vue
<DsCheckboxSkeleton
showLabel
showDescription
/>No label
vue
<DsCheckboxSkeleton :showLabel="false" />Accessibility
- Uses native <input type="checkbox"> under the hood.
- Label is linked via id/for for proper AT support.
- Supports indeterminate state via modelValue="indeterminate".