Checkboxes collect one or more independent choices that apply when a form is submitted, from a single opt-in to selecting rows in a list.
Checkboxes collect one or more independent choices that apply when a form is submitted, from a single opt-in to selecting rows in a list.
Change the props and copy the result. The component select switches between the full Checkbox field and the bare CheckboxBase; every control is a real prop, including CheckboxBase’s state props.
CheckboxBase is visual only
Checkbox around it; details are on the Code tab.Two components from one module: the field most screens use, and the bare visual box it is built around.
| Component | Description | Import from |
|---|---|---|
| Checkbox | The full checkbox field: the box with an optional label and hint, built on React Aria’s Checkbox. | @/components/base/checkbox/checkbox |
| CheckboxBase | The bare visual box. Renders a div and two SVG marks, nothing interactive; compose it inside your own rows and menus. | @/components/base/checkbox/checkbox |
Three check states at two sizes, all live: boxes measure 16×16 (sm) and 20×20 (md), matching the Figma sheet exactly. Indeterminate paints the minus and wins over the check; it is presentational, so these boxes still toggle underneath it. The text forms below add the label and hint the field composes around the box.
The whole row toggles
Every treatment below is painted by the kit itself: CheckboxBase takes its states as plain props, so nothing here is a hand-copied approximation. Both sizes.
There is no hover state