/// Inputs
Checkbox
Boxy 16px checkbox with checked, unchecked, and indeterminate states and an optional label.
import { Checkbox } from "@protocore/pds";Basics
Pass a label and the box wires its own id to the caption. Omit the label for a bare control inside a table cell or custom row.
States
checked accepts true, false, or "indeterminate" — the third state renders a dash rather than a tick. Every state has a disabled variant.
Select-all with indeterminate
The classic parent/child pattern: the header checkbox reads indeterminate while some — but not all — children are selected.
When to use it
Reach for a Checkbox when each option is independent and any number can be on at once — feature flags, region opt-ins, a select-all header. For a single instant on/off that takes effect immediately (a setting, not a form value) use Switch. For a one-of-many choice within a small set, use RadioGroup. For toggling a filter over a collection, use Chip or FilterBar.
Usage
Do
- Give every checkbox a visible `label`, or an `aria-label` when it stands alone.
- Use the `indeterminate` state for a parent that summarizes a partially-selected group.
- Keep related checkboxes in a single vertical list so they scan as one set.
- Control `checked` from state when the value participates in a larger form.
Don't
- Don't use a checkbox for an action that fires immediately — that's a Switch.
- Don't use a checkbox for mutually-exclusive choices — that's a RadioGroup.
- Don't rely on `indeterminate` as a persisted value; it's a visual summary only.
- Don't hide the label and leave the control unlabelled for assistive tech.
Accessibility
| Keys | Action |
|---|---|
| Tab | Move focus to the checkbox. |
| Space | Toggle between checked and unchecked. |
- Built on Radix Checkbox: the control exposes `role="checkbox"` with `aria-checked` reflecting true / false / mixed.
- The label is a real `<label htmlFor>` — clicking the text toggles the box.
- Disabled checkboxes are removed from the tab order and expose `aria-disabled`.
Checkbox props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | |
className | string | — | |
label | ReactNode | — | Text rendered beside the box (sans 14). Omit for a standalone control. |
style | CSSProperties | — |