Checkbox
Binary control with indeterminate state. Controlled or uncontrolled via onCheckedChange.
Install
Import path
Examples
Basic
Pair the checkbox with Field and FieldLabel for proper layout and labeling.
Description
Use FieldContent and FieldDescription for helper text.
By clicking this checkbox, you agree to the terms and conditions.
Disabled
Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.
Invalid State
Use aria-invalid to style the checkbox in an invalid state.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
بالنقر على هذا المربع، فإنك توافق على الشروط.
Table
A control that allows the user to toggle between checked and not checked.
| Name | Role | ||
|---|---|---|---|
| Sarah Chen | sarah.chen@example.com | Admin | |
| Marcus Rodriguez | marcus.rodriguez@example.com | User | |
| Priya Patel | priya.patel@example.com | User | |
| David Kim | david.kim@example.com | Editor |
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Checkbox } from "@codefast/ui/checkbox";
import { Label } from "@codefast/ui/label";
<Checkbox id="c" />
<Label htmlFor="c">Label</Label>
API reference
Props for each part of the component. All native element props are also forwarded.
Checkbox
Built on Radix Checkbox.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / onCheckedChange | boolean | "indeterminate" / (checked) => void | — | Controlled state. Pass "indeterminate" for a mixed parent. |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| disabled | boolean | false | Blocks interaction and dims the control. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus to the checkbox. |
| Space | Toggles the checkbox. |
- Has role=checkbox; the indeterminate state is exposed as aria-checked="mixed".
- Always associate a Label via htmlFor / id so the control has an accessible name.
- Use a Checkbox (not a Switch) when the change applies only after a form submit.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use the indeterminate state for a parent that controls a list.
- Let users click the label, not just the box, to toggle.
Don’t
- Don’t use a single checkbox where a Switch better signals an instant setting.
- Don’t rely on the box alone — give it a clear, clickable label.