Forms
Checkbox
On or off, or one of several that can all be on. Base UI's Checkbox with a check indicator.
packages/design-system/components/ui/checkbox.tsx
Examples
We will send ours before the first call.
Anatomy
- 01Box, 16px, rounded 5px
- 02Check indicator
- 03Label, beside it in a horizontal Field
Usage
import { Checkbox } from "@repo/design-system/components/ui/checkbox";
import { Field, FieldLabel } from "@repo/design-system/components/ui/field";
<Field orientation="horizontal">
<Checkbox id="terms" checked={agreed} onCheckedChange={setAgreed} />
<FieldLabel htmlFor="terms">I agree to the terms</FieldLabel>
</Field>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / defaultChecked | boolean | none | Controlled or uncontrolled state. |
| onCheckedChange | (checked: boolean, details) => void | none | Called when it is toggled. |
| indeterminate | boolean | false | Neither on nor off, for a parent of a partly checked group. |
| name / value | string | none | For native form posts; Base UI renders a hidden input. |
| disabled | boolean | false | Half opacity. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Make the label clickable with htmlFor.
- Phrase the label so checked means yes.
Don't
- Use it for a choice of one. Use radios.