Components
Checkbox
A binary choice that can be listed and combined.
With label
<div className="flex items-center gap-3">
<Checkbox id="ligatures" defaultChecked />
<Label htmlFor="ligatures">Coding ligatures</Label>
</div>
<div className="flex items-center gap-3">
<Checkbox id="small-caps" />
<Label htmlFor="small-caps">Small caps</Label>
</div>States
Invalid State — aria-invalid
A weekly summary of note activity, set in buena mono.
Description — helper text under the label
Selection table
- Regular
- Medium
- Book
Table — a checkbox per row; the header goes Indeterminate when some but not all rows are selected.
const allChecked = selected.length === rows.length;
const someChecked = selected.length > 0 && !allChecked;
<Checkbox
checked={allChecked}
indeterminate={someChecked}
onCheckedChange={toggleAll}
/>Markdown for agents: /design/checkbox.md · spec: /design.md