Forms & Inputs
Checkbox Group
Groups related nana-checkbox elements under one label, lays them out, and propagates a shared size/disabled. Tracks the set of checked values and emits them on change.
Preview
Section titled “Preview”<nana-checkbox-group label="Toppings">
<nana-checkbox value="cheese">Cheese</nana-checkbox>
<nana-checkbox value="mushroom">Mushroom</nana-checkbox>
</nana-checkbox-group>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/checkbox-group";Basic usage
Section titled “Basic usage”<nana-checkbox-group label="Toppings"> <nana-checkbox value="cheese">Cheese</nana-checkbox> <nana-checkbox value="mushroom">Mushroom</nana-checkbox></nana-checkbox-group>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | Disable every child checkbox |
error | error | string | undefined | — | Error message shown beneath the group |
label | label | string | undefined | — | Group label |
orientation | orientation | 'horizontal' | 'vertical' | 'vertical' | Lay items out in a column (default) or a row |
required | required | boolean | false | Marks the group required (visual asterisk on the legend) |
size | size | CheckboxSize | undefined | — | Size applied to every child checkbox |
Events
| Event | Description |
|---|---|
nana-change | Fired when any child toggles (detail.value = checked values) |
Slots
| Slot | Description |
|---|---|
(default) | One or more nana-checkbox elements |
CSS parts
| Part | Description |
|---|---|
::part(legend) | The group label |
::part(items) | The layout container |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-change | CustomEvent | Fired when any child toggles (detail.value = checked values) |
| Slot | Description |
|---|---|
(default) | One or more nana-checkbox elements |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
legend | The group label |
items | The layout container |
Accessibility
Section titled “Accessibility”- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Checkbox Group interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook