Getting started
Foundation
Typography
Navigation
Feedback
Forms
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.
Initial
Checked
Indeterminate
Default
Hovered
Focused
Disabled
Invalid
Inherits margin props.
Name | Default | Description |
---|---|---|
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. |