Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

Checkbox

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

#

#

#

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.

#

#

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

#

  • 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.

#

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

#

#

Initial

Checked

Indeterminate

Default

Hovered

Focused

Disabled

Invalid

#

Inherits margin props.

NameDefaultDescription
isChecked

boolean

Determines if checkbox is checked.

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.

On this page

  • Example
  • Usage
  • Indeterminate
  • Guidelines
  • When to use
  • When not to use
  • Usage
  • Content
  • Matrix
  • Props