KQ-004 · CHECKBOX
Checkbox
The tick is drawn, not shown — a pathLength stroke on flick, an indeterminate dash that slides in, and group select-alls that cascade down the list.
KQ-004 · CHECKBOX
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/checkbox
Props
- checked / defaultChecked
- boolean
- default —
- Controlled or uncontrolled checked state.
- indeterminate
- boolean
- default false
- Mixed state — dash visual plus native el.indeterminate.
- onCheckedChange
- (checked: boolean) => void
- default —
- Fires with the next checked state.
- label / description
- ReactNode
- default —
- Visible label (required) and muted secondary line.
- CheckboxGroup
- items, value, onValueChange, selectAll, legend…
- default —
- Fieldset-based group with select-all parent (checked / unchecked / indeterminate) and cascading tick draws.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / defaultChecked | boolean | — | Controlled or uncontrolled checked state. |
| indeterminate | boolean | false | Mixed state — dash visual plus native el.indeterminate. |
| onCheckedChange | (checked: boolean) => void | — | Fires with the next checked state. |
| label / description | ReactNode | — | Visible label (required) and muted secondary line. |
| CheckboxGroup | items, value, onValueChange, selectAll, legend… | — | Fieldset-based group with select-all parent (checked / unchecked / indeterminate) and cascading tick draws. |