Checkbox

Checkbox allows a user to select individual items from a list.

#Example

#Usage

#Disabled

The checkbox's disabled state.

#Indeterminate

When table rows can be selected, it's a good practice to place a parent checkbox on top of the table rows, which selects or deselects all rows at once.

Indeterminate state is used when there are some table rows selected, but not all of them. Checked state doesn't apply in that case, because there are rows which aren't selected. Same for unchecked state, because there are rows that are selected. So indeterminate state is like a middle ground between checked and unchecked states.

#Guidelines

#When to use

• When there are multiple selectable items in a form, table or a list.

#When not to use

• If only one item is allowed to be selected at a time, use a radio instead.
• If toggling something on or off, use a switch instead.

#Usage

• If there are multiple checkboxes with labels placed together, wrap them in a checkbox group.

#Content

• Use sentence case.
• Don't add a dot at the end of the label.

#Matrix

#Props

Inherits margin props.

Name	Default	Description
aria-label	"Select checkbox"	string Checkbox's meaning for screen readers. Required when `label` is not provided.
isChecked	—	boolean Determines if checkbox is checked.
id	—	string Checkbox's id.
isDisabled	—	boolean When `true`, user is not allowed to interact with the checkbox.
isIndeterminate	—	boolean Indeterminate checkbox indicates that some items were selected, but not all.
label	—	string Label to show near the checkbox.
badge	—	ReactNode Badge to display near the label.
description	—	ReactNode Description to show below the label.
onChange	—	(checked: ChangeEvent<HTMLInputElement>) => void Callback for when user toggles the checkbox.