Checkbox

A styled checkbox built on Base UI’s Checkbox primitive. Supports checked, unchecked, and indeterminate states with a compound component pattern.

Import


import { Checkbox } from "chunks-ui";

Basic Usage


<Checkbox.Root aria-label="Accept terms">
  <Checkbox.Indicator />
</Checkbox.Root>

A checkbox without a visible label needs an aria-label. To show a label, use Field as below.

With Label

Use the Field component to associate a label:


<Field.Root>
  <div className="flex items-center gap-2">
    <Checkbox.Root>
      <Checkbox.Indicator />
    </Checkbox.Root>
    <Field.Label>Accept terms and conditions</Field.Label>
  </div>
</Field.Root>

Accept terms and conditions

Controlled


function ControlledCheckbox() {
  const [checked, setChecked] = useState(false);
 
  return (
    <Checkbox.Root checked={checked} onCheckedChange={setChecked} aria-label="Subscribe">
      <Checkbox.Indicator />
    </Checkbox.Root>
  );
}

Indeterminate State

The indeterminate state is used for “select all” patterns where some items are checked. Set the indeterminate prop (checked takes only a boolean):


<Checkbox.Root indeterminate aria-label="Select all">
  <Checkbox.Indicator />
</Checkbox.Root>

Disabled


<Checkbox.Root disabled aria-label="Unavailable option">
  <Checkbox.Indicator />
</Checkbox.Root>

Touch Target

The box is 16px. To make it easier to tap, add touch-target to Checkbox.Root: the hit area grows to 44×44px, and the box’s size and the layout stay the same. A label is pressable too, so it also makes the target larger. In a stacked list, keep rows at least the area size apart centre to centre, or let the label enlarge the target instead: overlapping areas send presses to the next row.


<Checkbox.Root aria-label="Accept terms" className="touch-target">
  <Checkbox.Indicator />
</Checkbox.Root>

Compound Parts

Part	Description
`Checkbox.Root`	The checkbox control. Handles checked state and keyboard interaction.
`Checkbox.Indicator`	Renders the check, or the minus when indeterminate, inside the root. Children you pass replace them; with a `render` element and no children, there is neither, and the element may be a void element such as `<img>`. Your content scales and fades in and out as the check does; the morph between the check and the minus belongs to the default icon.

Props

All compound parts accept the same props as their underlying Base UI Checkbox counterparts. No additional custom props are defined.