Checkbox

Checkboxes let users select one or more options from a list. They support checked, unchecked, and indeterminate states.

$cookest-ui add checkbox

Variants

Unchecked, checked, and indeterminate — the three core visual states.

Unchecked

Indeterminate

Sizes

Three sizes — sm (14 px), md (16 px), lg (20 px) — to fit any context.

Small (sm)

Medium (md)

Large (lg)

States

Disabled prevents interaction; error highlights invalid or required fields.

Disabled

Cannot be interacted with

Disabled checked

Locked in on state

Required field

You must accept to continue

Checkbox Group

A select-all parent checkbox with indeterminate state driven by child selections.

Select all dietary filters

Vegan

No animal products

Gluten-Free

No gluten-containing grains

Nut-Free

No tree nuts or peanuts

Dairy-Free

No milk or dairy products

With Label & Description

Checkboxes used in form agreements — each with a primary label and supporting description.

I agree to the Terms of Service

You must accept the terms before creating an account.

Send me recipe inspiration

Weekly curated recipes and cooking tips. Unsubscribe anytime.

Prop	Type	Default	Description
`checked`	boolean	false	Whether the checkbox is checked.
`indeterminate`	boolean	false	Shows a minus (−) icon to indicate partial child selection.
`size`	"sm" \| "md" \| "lg"	"md"	Controls the visual size of the checkbox box and label text.
`disabled`	boolean	false	Prevents interaction and renders the checkbox at reduced opacity.
`error`	boolean	false	Highlights the checkbox with an error ring (requires acceptance).
`label`	string	—	Primary label text rendered beside the checkbox.
`description`	string	—	Secondary helper text shown below the label.
`id`	string	—	HTML id forwarded to the label element for external association.
`onChange`	(checked: boolean) => void	—	Callback fired with the new boolean state on every click.

Related Components

Toggle

Binary on/off switch for instant-apply settings

Select

Single or multi-select from a dropdown list

Input

Pair with inputs inside form groups

Best Practices

✅ Do

Use for multi-select options in forms
Use indeterminate to signal partial group selection
Always pair with a visible, descriptive label
Show an error state when a required checkbox is unchecked

❌ Don't

Use checkboxes as toggle switches for instant settings
Leave checkboxes without a label or aria-label
Nest checkbox groups more than one level deep
Use a single standalone checkbox for binary yes/no — use Toggle instead

Accessibility

Feature	Support
Keyboard: Space to toggle	Space key checks or unchecks the focused checkbox
aria-checked	Reflects checked, unchecked, or mixed (indeterminate) state
aria-disabled	Communicated to assistive technologies when disabled
Label association	htmlFor/id pair connects label text to the control
Focus visible ring	Visible outline on keyboard navigation for all interactive states
role="checkbox"	Implicit on native input type=checkbox; use explicit role for custom implementations