Checkbox

Recognizable checked and indeterminate states, even without color.

Accept terms

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add checkbox

What add checkbox installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Accept terms

Receive updates

Partial selection

Unavailable

States recognizable by icon, not just color.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`checked / defaultChecked` Controlled or initial state.	`boolean`	—
`onCheckedChange` Called when the state changes.	`(checked: boolean) => void`	—
`indeterminate` Shows the indeterminate state.	`boolean`	`false`
`disabled` Disables the control.	`boolean`	`false`

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Empty box with an identifiable border.
Checked	checked shows the check mark, not just color.
Indeterminate	indeterminate shows a dash in addition to color.
Focus visible	2 px ring outline with the keyboard.
Disabled	disabled removes interaction and focus.

Associate a label with htmlFor and the checkbox id; the state does not rely on color alone.

The indeterminate state shows a dash in addition to color; it can be reached and toggled with the keyboard (Space).