Checkbox
Accessible checkboxes with indeterminate state, labels, validation, and form integration.
01 Examples
Task list
Helper & error
02 Customization
Slot Class Overrides
Fully Custom (unstyled)
03 Accessibility
Native Semantics
Built on a native <input type="checkbox"> for correct form behavior and assistive technology support. The indeterminate property automatically conveys the
mixed state, and aria-checked="mixed" is set explicitly
for maximum screen reader compatibility.
Labels & Descriptions
The label prop creates an associated <label>. Helper and error text are linked via aria-describedby, and errors set aria-invalid.
Keyboard
Tab to focus, Space to toggle. The focus ring uses focus-visible: for keyboard-only visibility and
appears on the checkbox box via the peer pattern.
Color Contrast
Error and helper messages use text alongside color to convey state. The checkbox icon (check / minus) meets WCAG AA contrast against all intent backgrounds.
04 API Reference
No matching properties |