Checkbox · Bones

A checkbox wrapping the Base UI Checkbox. Keyboard accessible, with a dash indicator for the indeterminate state.

Playground

Flip Indeterminate to see the dash take over the check, then click the box in the preview: the Checked control moves with it, since they share one piece of state. The Code tab shows the markup for exactly what you've configured.

Email me about product updates

States

Unchecked, checked, indeterminate, and disabled, one preference four ways. Hover changes nothing on purpose and keyboard focus adds a ring; the radius stays fixed even in pill mode, so a checkbox never reads as a radio.

Email me about product updates Email me about product updates Email me about product updates Email me about product updates

Styling states

State comes through data attributes (data-checked, data-indeterminate, data-disabled), so custom styling never needs JavaScript:

.ub-checkbox[data-checked] {
  background: var(--ub-success);
  border-color: var(--ub-success);
}

Props

The full Base UI Checkbox root API passes through. The ones you'll reach for:

Prop	Type	Default	Description
`checked`	`boolean`	–	Controlled state. Pair with onCheckedChange.
`defaultChecked`	`boolean`	`false`	Initial state when uncontrolled.
`onCheckedChange`	`(checked) => void`	–	Called when the state changes.
`indeterminate`	`boolean`	`false`	Shows the dash indicator; for a parent of a partly checked group.
`disabled`	`boolean`	`false`	Blocks interaction and dims the control.
`value`	`string`	–	Identifies the box inside a CheckboxGroup; see that page for parent and select-all.
`required`	`boolean`	`false`	Native required validation, surfaced by a wrapping Field.

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

Checkbox, from @usebones/react.
- Uncontrolled: defaultChecked. Controlled: checked + onCheckedChange. indeterminate is display only (it shows the dash without changing checked); use it for a parent of a partly checked group. disabled.
- Wrap in a <label> with its text so the text is clickable, or put it inside FieldRoot with a FieldLabel.
- Restyle in CSS via .ub-checkbox, .ub-checkbox-indicator, [data-checked], [data-indeterminate], [data-disabled]. Tokens only.