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.