Accessible checkbox with an indeterminate state and a drawn check.
A single checkbox with an indeterminate (tri-state) mode, a stroke-drawn tick, a focus ring, and inline error / helper text. A real native input under the hood for keyboard and form semantics; light / dark / auto themes.
Add the package. A real native input under the hood, so keyboard and form semantics come for free.
pnpm add @roy-ui/uiimport { Checkbox } from '@roy-ui/ui';
// or just this component:
import { Checkbox } from '@roy-ui/ui/checkbox';A label, a drawn tick, and a focus ring. Set indeterminate for a tri-state parent checkbox, or pass an error string for inline validation.
The tick strokes itself in on check; indeterminate shows a centred bar; an error string recolours the box and adds a helper line.
Required to continue
<Checkbox label="Subscribe to the newsletter" defaultChecked />
<Checkbox label="Select all" indeterminate />
<Checkbox label="I agree to the terms" error="Required to continue" />Every native input attribute (checked, defaultChecked, onChange, name, disabled…) spreads onto the input; ref forwards to it.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Label beside the box. |
indeterminate | boolean | false | Tri-state; also sets el.indeterminate. |
helperText | ReactNode | — | Quiet line beneath; replaced by an error string. |
error | boolean | string | false | Error state. A string becomes the helper line; the box shakes once. |
size | 'sm' | 'md' | 'md' | Box edge length. |
theme | 'light' | 'dark' | 'auto' | 'auto' | Follow the system or force a side. |