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"	stringCheckbox's meaning for screen readers. Required when label is not provided.
isChecked	—	booleanDetermines if checkbox is checked.
id	—	stringCheckbox's id.
isDisabled	—	booleanWhen true, user is not allowed to interact with the checkbox.
isIndeterminate	—	booleanIndeterminate checkbox indicates that some items were selected, but not all.
label	—	stringLabel to show near the checkbox.
badge	—	ReactNodeBadge to display near the label.
description	—	ReactNodeDescription to show below the label.
onChange	—	(checked: ChangeEvent<HTMLInputElement>) => voidCallback for when user toggles the checkbox.