Checkbox

Checkbox gives users a binary choice between multiple options in a series.

Installation

Base UI components are all available as a single package.

Once you have the package installed, import the component.

import * as Checkbox from '@base_ui/react/Checkbox';

Anatomy

Checkbox is composed of two components:

• <Checkbox.Root /> renders a <button>.
• <Checkbox.Indicator /> renders a <span> for providing a visual indicator. You could place an icon inside this component.

<Checkbox.Root>
  <Checkbox.Indicator />
</Checkbox.Root>

Indeterminate state

To make the Checkbox indeterminate, add the indeterminate prop to override the appearance of the Checkbox. The Checkbox remains in an indeterminate state regardless of user interaction until set back to false.

The primary use case for an indeterminate checkbox is representing the state of a parent checkbox where only some of its children are checked.

It's a visual-only state, so its internal checked state can still be changed.

Overriding default components

Use the render prop to override the rendered checkbox or indicator element with your own components.

<Checkbox.Root render={(props) => <MyCheckbox {...props} />}>
  <Checkbox.Indicator render={(props) => <MyCheckboxIndicator {...props} />} />
</Checkbox.Root>

Accessibility

Ensure the Checkbox has an accessible name via a <label> element.

<Checkbox.Root id="my-checkbox">
  <Checkbox.Indicator />
</Checkbox.Root>
<label htmlFor="my-checkbox">
  My label
</label>