Component

Checkbox

Backed by @base-ui/react/checkbox. Anatomy is fixed: root, indicator parts. Base UI reference.

Install

npx bambiui add checkbox

Import from your own project source, never from Base UI directly, and never from a published bambiui package:

import { Checkbox } from "@/components/ui/checkbox";

Sizes

States

Hover, active, and focus-visible are styled but cannot be shown statically. Use the component with a mouse or keyboard to verify those interaction states.

Supported states: `default`, `hover`, `focus-visible`, `checked`, `indeterminate`, `invalid`, `read-only`, `disabled`.

Props

Prop	Type	Default
`size`	"sm" \| "md" \| "lg"	`"md"`
`checked`	boolean	`undefined`
`defaultChecked`	boolean	`false`
`onCheckedChange`	(checked: boolean, details: Checkbox.Root.ChangeEventDetails) => void	`undefined`
`indeterminate`	boolean	`false`
`parent`	boolean	`false`
`name`	string	`undefined`
`value`	string	`undefined`
`required`	boolean	`false`
`readOnly`	boolean	`false`
`disabled`	boolean	`false`

Native props and refs supported by the underlying Base UI primitive are preserved.

Tokens

Override any of these in your theme CSS to restyle Checkbox:

--bambi-selection-size-sm
--bambi-selection-size-md
--bambi-selection-size-lg
--bambi-selection-radius
--bambi-selection-background
--bambi-selection-border
--bambi-selection-checked-background
--bambi-selection-checked-border
--bambi-indicator-foreground
--bambi-control-border-invalid

Accessible name

A checkbox renders only the box and its indicator, so it needs a name from outside. Wrap it in a <label>, or put it inside Field.Labelto also pick up the field's description, validity, and disabled state:

<Field.Root name="terms">
  <Field.Label>
    <Checkbox />
    Accept the terms
  </Field.Label>
  <Field.Description>Required before you can publish.</Field.Description>
</Field.Root>

Accept the terms

Required before you can publish.

Indeterminate

indeterminate shows a dash instead of a tick and is styled like checked, for the case where some but not all of a set is selected. It does not change the submitted value: set checked as well to control that. A parent checkbox in a Checkbox Group gets this state managed for you.