Checkbox Group
Groups related checkboxes
under one label, lays them out, propagates a shared size /
disabled, and reports the checked values.
Basic
html
| 1 | <nana-checkbox-group label="Frameworks"> |
| 2 | <nana-checkbox value="react" checked>React</nana-checkbox> |
| 3 | <nana-checkbox value="angular" checked>Angular</nana-checkbox> |
| 4 | <nana-checkbox value="vue">Vue</nana-checkbox> |
| 5 | </nana-checkbox-group> |
Horizontal
Required & error
Reading the value
ts
| 1 | const group = document.querySelector('nana-checkbox-group'); |
| 2 | group.addEventListener('nana-change', (e) => { |
| 3 | console.log(e.detail.value); // ["react", "angular"] |
| 4 | }); |
Import
ts
| 1 | import "@nana-tec/ui-components/checkbox-group"; |
| 2 | import "@nana-tec/ui-components/checkbox"; |
Props
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Group label |
orientation | horizontal | vertical | vertical | Layout direction |
size | sm | md | lg | — | Applied to every child checkbox |
disabled | boolean | false | Disable every child |
required | boolean | false | Visual asterisk on the legend |
error | string | — | Error message beneath the group |