Checkbox
A control that allows the user to toggle between checked and not checked.
Installation
terminal
npx felicityui add checkbox --platform reactUsage
example.tsx
import { Checkbox } from "@/components/ui/checkbox"
<Checkbox />Composition
Checkbox └── (optional) label / description / error
Default
Checked state
Controlled with checked + onCheckedChange.
Invalid
aria-invalid and data-invalid on the field shell.
You must accept to continue.
Basic
Pair with a label for layout.
Description
Helper text under the label.
Includes failed jobs and preview artifacts.
Disabled
disabled sets data-disabled on the field shell.
Group
Multiple fields as a checkbox list.
Table
Row selection with indeterminate select-all.
| Service | Status | |
|---|---|---|
| api-gateway | Healthy | |
| worker | Deploying | |
| web | Healthy |
RTL
dir=rtl
يشمل الوظائف الفاشلة.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled checked state. |
| defaultChecked | boolean | — | Uncontrolled initial checked state. |
| onCheckedChange | (checked: boolean) => void | — | Called when checked state changes. |
| indeterminate | boolean | — | Shows the indeterminate visual state. |
| label | ReactNode | — | Optional field label. |
| description | ReactNode | — | Helper text below the label. |
| error | ReactNode | — | Error message; sets invalid styling. |
| invalid | boolean | — | Marks invalid without requiring error text. |
| disabled | boolean | — | Disables the checkbox. |
| className | string | — | Additional classes on the input hit target. |
| checkboxVariants | ({ invalid?, className? }) => string | — | Exported class helper for the indicator. |
Accessibility
WCAG 2.2 AA
- Native checkbox semantics and keyboard support.
- Label associated via htmlFor when field chrome is used.
aria-invalidandrole=alertfor errors.- Visible
focus-visiblering on the indicator.
Platform notes
React
Native HTML checkbox with Felicity semantic tokens. Copper fill when checked — not Base UI / Radix runtime.
- Client component (indeterminate + onCheckedChange).
- Uses
data-slot=checkbox|checkbox-indicator; field chrome usesdata-slot=field|field-label|field-description|field-error. data-invalidanddata-disabledon the field shell when chrome is present.- Supports controlled checked + onCheckedChange and indeterminate.