Checkbox
A control that allows the user to toggle between checked and not checked.
Installation
import { Checkbox } from "@gradeui/ui"Usage
Examples
Default Checked
Disabled
With Description
Get notified about product updates and releases.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | 'indeterminate' | false | The controlled checked state. |
| defaultChecked | boolean | false | The default checked state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | - | Callback when the checked state changes. |
| disabled | boolean | false | Whether the checkbox is disabled. |
| id | string | - | The ID for associating with a label. |
Accessibility
- Uses native checkbox semantics via Radix UI
- Supports keyboard navigation (Space to toggle)
- Always pair with a Label for screen readers
- Supports indeterminate state
Sidecar
The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/checkbox.md and shipped inside the published @gradeui/ui tarball.
---
name: Checkbox
import: "@gradeui/ui"
props:
- checked?: boolean | "indeterminate"
- onCheckedChange?: (checked: boolean) => void
- defaultChecked?: boolean
- disabled?: boolean
- id?: string — bind a Label's htmlFor to this
when_to_use: Binary on/off tied to a list (select multiple, agree to terms). Single on/off that controls a setting is better with Switch.
composes_with: [Label (via htmlFor), Card, Form rows, Table (for row selection)]
aliases: [checkbox, tickbox, tick box, check, multi-select item]
---
```jsx
<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">I agree to the terms</Label>
</div>
```