Component
Checkbox
Square box with a brand-color check on selection. Built on Radix Checkbox.
9:41
Topics
Topic multi-select + terms agreement
Use Checkbox when the selection is part of a batch the student confirms with a Continue or Submit step. Think terms acceptance, multi-select filter rows, the Topics picker. For binary state that commits immediately, use Switch.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | 'indeterminate' | — | Controlled state. 'indeterminate' renders a partially-filled state for parent-of-children scenarios. |
| defaultChecked | boolean | 'indeterminate' | — | Uncontrolled initial state. |
| onCheckedChange | (checked: boolean | 'indeterminate') => void | — | Fires when state changes. |
| disabled | boolean | — | Disabled state (50% opacity, no pointer events). |
| id | string | — | Pair with a <label htmlFor> to make the label a click target. |
| ...RadixCheckboxProps | ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> | — | All Radix Checkbox props are forwarded. |