Checkbox Group
A role="group" wrapper for Checkbox items with a shared label, description, and error. The individual Checkbox inputs also render standalone without a group.
Default
<CheckboxGroup label="Your interests">
<Checkbox value="react" label="React" />
<Checkbox value="svelte" label="Svelte" />
<Checkbox value="vue" label="Vue" />
</CheckboxGroup>With description
<CheckboxGroup
label="Features"
description="Select all features you want to enable"
>
<Checkbox value="analytics" label="Analytics" />
<Checkbox value="notifications" label="Notifications" defaultChecked />
<Checkbox value="api" label="API access" />
</CheckboxGroup>With error
<CheckboxGroup
label="Required selections"
error="Please select at least one option"
>
<Checkbox value="a" label="Option A" />
<Checkbox value="b" label="Option B" />
</CheckboxGroup>Horizontal orientation
<CheckboxGroup label="Size" orientation="horizontal">
<Checkbox value="xs" label="XS" />
<Checkbox value="sm" label="SM" />
<Checkbox value="md" label="MD" defaultChecked />
<Checkbox value="lg" label="LG" />
<Checkbox value="xl" label="XL" />
</CheckboxGroup>Standalone Checkbox
Additional details about this option
This field is required
<Checkbox label="Default" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="Indeterminate" indeterminate />
<Checkbox label="Disabled" disabled />
<Checkbox label="With description" description="Additional details" />
<Checkbox label="With error" error="This field is required" />Color
<Checkbox label="violet" defaultChecked color="violet" />
<Checkbox label="blue" defaultChecked color="blue" />
<Checkbox label="green" defaultChecked color="green" />CheckboxGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Accessible group label |
description | string | — | Helper text below the label |
error | string | — | Error message; applies error styling to all items |
orientation | 'horizontal'|'vertical' | 'vertical' | Layout direction of the item list |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Controls group label font size |
Checkbox props
| Prop | Type | Default | Description |
|---|---|---|---|
label | children | — | Clickable label beside the checkbox |
description | children | — | Helper text below the label |
error | children|boolean | — | Error message or true for error styles only |
checked | boolean | — | SSR checked state snapshot |
defaultChecked | boolean | — | Checked on first render, uncontrolled |
indeterminate | boolean | — | Indeterminate (mixed) state |
disabled | boolean | — | Prevents interaction |
color | UiColor | — | Checked background color |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Checkbox size |
value | string | — | Form value submitted when checked |
name | string | — | Form field name |