Forms
Checkbox
A box for turning an option on or off, with an indeterminate state for partially selected groups. Built on Radix Checkbox.
- Source
- src/components/ui/checkbox.tsx
- Figma
- Checkbox · state (off, on, indeterminate, disabled)
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Checkbox } from "@/components/ui/checkbox";When to use
- Independent options where any number can be selected.
- Agreeing to terms before submitting a form.
- Selecting rows in a table, with an indeterminate header checkbox for "select all".
- For a setting that applies immediately, use Switch.
- For one choice out of several, use a radio group.
Examples
States
Off, on, indeterminate and disabled.
Select all
The parent is checked when every child is, indeterminate when some are. Clicking it selects or clears them all.
With description
Align the box to the first line of a label and a muted description.
API reference
Checkbox
Extends Radix Checkbox.Root props (id, name, value, required, aria-*).
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | "indeterminate" | - | Controlled state. "indeterminate" shows a dash. |
| defaultChecked | boolean | "indeterminate" | - | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean | "indeterminate") => void | - | Called on toggle. From indeterminate, a click goes to checked. |
| disabled | boolean | - | Dims the box and blocks interaction. |
| name | string | - | Submits the value with a surrounding form. |
Accessibility
- Radix renders a button with role="checkbox" and aria-checked set to true, false or "mixed".
- Space toggles it, as with a native checkbox.
- Name it with Label htmlFor pointing at the checkbox id; clicking the label toggles it too. Otherwise pass aria-label.
- A visible focus ring appears on keyboard focus.