Checkbox

Basic Checkbox

<Checkbox label="Basic checkbox" />

Controlled state

You can bind a checkbox to a boolean state using the checked prop and update your state every time the onChange event is triggered.

Indeterminate Checkbox

When the checked state is unknown use the indeterminate prop.

This can be useful for a group or hierarchy of checkboxes:

Radio buttons

Set type="radio" and group by name for mutually exclusive radio buttons.

We recommend labelling a set of checkboxes using <fieldset> and <legend>.

This example also uses <Grid> since <Checkbox> is an inline element by default.

Switch toggle

A Checkbox with type="switch" functions exactly the same a normal checkbox, and only differs in styling.

Button style

Use button prop to display as a button. This works for checkboxes of type "radio" and "switch" as well.

Small button size

Use the small prop (along with button) for a smaller button size.

Custom label (like icon)

The label prop accepts JSX content, useful if you want to supply an icon.

Alert state

You can set the state prop to "alert" to give feedback to the user that something is wrong with the selection.

Also applies a red border to button style:

Inactive state

Use state="inactive" instead of disabled when the user needs to know that the control exists but cannot be toggled — and why. Unlike disabled, an inactive checkbox stays focusable, is read by screen readers (announced via aria-disabled), and can be wrapped in a <Tooltip> to explain the reason.

This matches the pattern from <Button state="inactive">.

Combine controlled state with <Tooltip> to keep the value frozen and explain why the control is inactive:

On backgrounds

When placing a checkbox on a non-base background, use state="inherit" to follow current text color.

Disabled

Use disabled prop to disable the control.

<Checkbox disabled label="Disabled checkbox" />

Hide label

Use hideLabel to hide the label. Usually you shouldn't do this!

The label prop is still required for accessibility (screen readers will be able to read the hidden label as long as you pass a string)

Can be useful in a table where they are labelled by the table header, also works with switch and radio type: