Checkbox

Installation

npx @yolkui/cli add checkbox

Group

CheckboxGroup holds a list that shares one value, an array of the checked values. Give it allValues and mark one checkbox parent: the parent checks or clears every child, and is mixed while only some are checked. Name it with a FieldLegend inside, which screen readers hear when focus enters the group (or aria-label when the heading is elsewhere). Give each child the same name and its own value, and a form submits one entry per checked child; the parent submits nothing.

Invalid

An invalid checkbox draws its ring in red. Red is never the only signal: pair it with a FieldError that says what to do.

Disabled

A disabled checkbox fades with its label and cannot be changed, and a form leaves it out. It stays focusable and keeps pointer events, so a Tooltip around the box can say why: it opens on hover over the box and on keyboard focus, not over the label's text. Keep the tooltip on the box, so screen readers hear it with the checkbox; if the reason matters to everyone, write it in a FieldDescription instead.

Accessibility

Screen readers hear the label, the state (checked, not checked or mixed) and "dimmed" when disabled. Space toggles it.

• Wrap it in FieldLabel with its text, so the label names it and a click on the text toggles it.
• The box is 16px; the area that takes a click is 24px, and the whole label.
• A description in FieldDescription is read after the label.