Checkbox
A selection control for when users choose one or more options or agree to terms. Built on Base UI Checkbox for accessibility.
Preview
Examples
Intent
Controls the color intent of the checkbox.
| Value | Default | Description |
|---|---|---|
primary | ✓ | General selection items. |
secondary | Secondary selection items. | |
success | Positive choices such as agreement or completion. | |
warning | Choices that require caution. | |
danger | Choices that imply risk or deletion. | |
neutral | Neutral choices. |
Size
Controls the checkbox size. Choose based on adjacent text or form components.
| Value | Default | Description |
|---|---|---|
small | For dense forms or secondary options. | |
medium | ✓ | General form use. |
large | When a larger click area is needed. | |
xlarge | When a large touch target is needed (e.g. mobile). |
Guidelines
Controlled vs Uncontrolled
Use defaultChecked when you don’t need to manage state. Use checked with onCheckedChange when integrating with form libraries, external state, or when rendering different UI based on the checked state.
Accessibility
Use the label prop or connect the checkbox to a <label> element so screen readers can identify its purpose.
Props
Props
Prop
Default
Type
size?"medium""small" | "medium" | "large" | "xlarge"
intent?"primary""primary" | "secondary" | "success" | "warning" | "danger" | "neutral"
label?—
string
checked?—
boolean
defaultChecked?—
boolean
disabled?falseboolean
onCheckedChange?—
(checked: boolean) => void
name?—
string
required?—
boolean
readOnly?—
boolean
Last updated on