Checkbox

A single binary choice, with an optional description and a third indeterminate state.

Email me about product updates

With a description

Use the description for the consequence of ticking the box, not a restatement of the label.

Weekly digestA single summary email every Monday, instead of one per event.

States

Indeterminate parent

indeterminate is presentational only: the underlying input is still either checked or not, so drive it from whether the children are partly selected.

Select all

InvoicesReceiptsStatements

Props

Every other native input attribute is forwarded to the underlying <input type="checkbox">.

Prop	Type	Default	Description
label	string		Text rendered beside the box.
description	string		Supporting line under the label.
indeterminate	boolean	false	Renders the dash state, for a parent whose children are partly selected.
checked	boolean		Controlled checked state.
defaultChecked	boolean		Uncontrolled initial state.
disabled	boolean	false	Disables the input.
onChange	(e: ChangeEvent<HTMLInputElement>) => void		Fires on toggle.

Why it works this way

Why

It has an indeterminate state for "some of the children are selected", which a plain boolean cannot express.

Don't

Don't use it for an immediate on/off that takes effect now. Use Switch.
Don't use it for choosing exactly one. Use Radio.

PreviousCombobox NextRadio