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.
Cheese
Mushroom
Show code Copy < nana-checkbox-group label = "Toppings" > < nana-checkbox value = "cheese" >Cheese</ nana-checkbox > < nana-checkbox value = "mushroom" >Mushroom</ nana-checkbox > </ nana-checkbox-group >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/checkbox-group " ;
< nana-checkbox-group label = " Toppings " >
< nana-checkbox value = " cheese " > Cheese </ nana-checkbox >
< nana-checkbox value = " mushroom " > Mushroom </ nana-checkbox >
Properties Property Attribute Type Default Description disabled— booleanfalseDisable every child checkbox error— string | undefined—Error message shown beneath the group label— string | undefined—Group label orientation— 'horizontal' | 'vertical''vertical'Lay items out in a column (default) or a row required— booleanfalseMarks the group required (visual asterisk on the legend) size— CheckboxSize | undefined—Size applied to every child checkbox
Events Event Description nana-changeFired 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
Event Type Description nana-changeCustomEventFired when any child toggles (detail.value = checked values)
Slot Description (default)One or more nana-checkbox elements
Part Description legendThe group label itemsThe layout container
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Checkbox Group interactively Every state, prop, and edge case — with live controls — in Storybook.
