Checkbox

Checked, unchecked, and indeterminate, alone or in a group.

import { Checkbox, CheckboxGroup } from 'components/UI/Checkbox'

States

A checkbox is unchecked, checked, or indeterminate. Checkbox.Indicator draws a check mark or a dash.

UncheckedCheckedIndeterminate

Pass checked and onCheckedChange to keep the state in your component.

Email me weekly reports

A disabled box has 50% opacity. Add text-muted to the label yourself.

DisabledDisabled and checked

CheckboxGroup keeps the values of the checked boxes in one array. The parent checkbox checks or clears all items.

All productsProduct analyticsSession replayFeature flags

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Choose the input from the number of options and what the user picks.

Component	Use it for
Radio	One choice from 2 or 3 options that stay visible.
Select	One choice from 4 to about 10 options, or fewer options when space is tight.
Combobox	One or more choices from a long list, with typing to filter.
Autocomplete	Free text, with suggestions that the user can ignore.
Choicebox	A choice where each option needs a description, such as a plan.
Checkbox	An on or off value in a form that the user submits.
Switch	A setting that applies at once.

Put Checkbox.Root and its text in a <label>, so a click on the text toggles it.
For select all, pass allValues to CheckboxGroup and add a Checkbox.Root with parent.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
keepMounted	boolean	true	Keeps the indicator in the DOM when the box is unchecked. The Base UI default is false.
children	ReactNode	A check mark and a dash	The glyphs in the box. Pass children to replace them.