Checkbox

Accessibility

Checkbox from @prepared911/ui/checkbox is a Radix Checkbox rendered with a paired visible label. The primitive handles the native checkbox semantics, focus, and keyboard toggling; your job is to keep labels accurate, group related checkboxes, and surface validation errors programmatically.

What the component handles

Native checkbox semantics. Radix exposes role="checkbox" with aria-checked reflecting checked, unchecked, or indeterminate.
Label association. Children render as the paired label via htmlFor + id.
Keyboard toggle. Space toggles the checked state.
Disabled state. Applies the native attribute and removes the element from the tab order.

What you must provide

Readable label text. Short, affirmative statements ("Email notifications", not "Email?").
Group labels. When multiple checkboxes share a purpose, wrap them in a region with aria-labelledby pointing at a heading or caption.
Required and invalid state. Pass aria-required, aria-invalid, and aria-errormessage as needed; associate the error text via id.

Keyboard behavior

Tab / Shift+Tab move focus between checkboxes.
Space toggles the focused checkbox.
Disabled checkboxes are skipped.

Semantics and roles

Native checkbox (via Radix) with aria-checked.
aria-describedby pointing at helper or error text when present.

Validation

CheckboxVisual

CheckboxVisual is a non-interactive, always aria-hidden paint of the checkbox. It must not carry selection semantics alone—the parent widget owns aria-checked or aria-selected (for example MenuItemCheckbox). Do not use it as a standalone form control.

Known caveats

Indeterminate state. When using an indeterminate parent, ensure the label makes the tri-state meaningful and that activation flips between a known state (not back to indeterminate).
Color-only checked signal. Checked must be visually distinguishable beyond color—the Radix primitive supplies a check mark; don't override it to a color-only indicator.

Checkbox / API and Development

Checkbox Cards / Usage

On this page

What the component handles

What you must provide

Checkbox

Accessibility

What the component handles

Native checkbox semantics. Radix exposes role="checkbox" with aria-checked reflecting checked, unchecked, or indeterminate.
Label association. Children render as the paired label via htmlFor + id.
Keyboard toggle. Space toggles the checked state.
Disabled state. Applies the native attribute and removes the element from the tab order.

What you must provide

Readable label text. Short, affirmative statements ("Email notifications", not "Email?").
Group labels. When multiple checkboxes share a purpose, wrap them in a region with aria-labelledby pointing at a heading or caption.
Required and invalid state. Pass aria-required, aria-invalid, and aria-errormessage as needed; associate the error text via id.

Keyboard behavior

Tab / Shift+Tab move focus between checkboxes.
Space toggles the focused checkbox.
Disabled checkboxes are skipped.

Semantics and roles

Native checkbox (via Radix) with aria-checked.
aria-describedby pointing at helper or error text when present.

Validation

CheckboxVisual

Known caveats

Indeterminate state. When using an indeterminate parent, ensure the label makes the tri-state meaningful and that activation flips between a known state (not back to indeterminate).
Color-only checked signal. Checked must be visually distinguishable beyond color—the Radix primitive supplies a check mark; don't override it to a color-only indicator.

Checkbox / API and Development

Checkbox Cards / Usage

On this page

What the component handles

What you must provide