Checkbox
A 20px box with 4px corners. Unchecked uses Colors/input, checked uses Colors/action/primary.
Figma: 10 / Components / CheckboxUsage
Source: src/components/ui/checkbox.tsx
import { Checkbox } from '@/components/ui/checkbox'
import { FieldRow } from '@/components/ui/field'<FieldRow control={<Checkbox defaultChecked />}>Email me weekly results</FieldRow>States
Unchecked, checked, indeterminate and disabled.
When to use
When to reach for it, and when to use something else.
Use it for
Complete: Several independent options.
Complete: Selecting rows in a table.
Avoid
Not complete: Settings that apply immediately; use a Switch.
Not complete: One choice from a list; use a RadioGroup.
Checkbox
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | – | Controlled state. |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| indeterminate | boolean | false | Shows that some, not all, are selected. |
| onCheckedChange | (checked: boolean) => void | – | Called when the state changes. |
| disabled | boolean | false | Blocks interaction. |
