ComponentsForms
Checkbox
A yes/no choice, including an indeterminate state.
Theme
Motion
A yes/no choice, including an indeterminate state.
<Checkbox id="terms" defaultChecked />
<Label htmlFor="terms">Accept the terms</Label>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Checkbox, Label } from "junco";
<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept the terms</Label>
</div>A parent checkbox shows a dash when only some children are checked.
Checkbox#checked / defaultCheckedonCheckedChangesizeisInvaliddisabledname / value / required| Prop | Type | Default |
|---|---|---|
checked / defaultCheckedControlled or initial state. | boolean | "indeterminate" | – |
onCheckedChangeCalled on toggle. | (checked: boolean | "indeterminate") => void | – |
sizeBox size. | "sm" | "md" | "lg" | "md" |
isInvalidSets aria-invalid and the error border. | boolean | false |
disabledNot focusable or toggleable. | boolean | false |
name / value / requiredFor native form submission. | string / string / boolean | – |
| Key | Action |
|---|---|
| Space | Toggles the checkbox. |