Checkbox
Checkbox is one of the selection controls that lets users select multiple items from a list.
Group Label
Helper text
State
Orientation
Component props
| Name | Default value | Type | Is required? | Description |
|---|---|---|---|---|
isChecked | false | boolean | No | Is the checkbox checked? |
isIndeterminate | false | boolean | No | Is the checkbox in a "mixed" state? Renders as a "minus" icon; useful for "select all"-type checkboxes. |
onChange | ToggleEventHandler<HTMLInputElement> | No | Change handler | |
label | string | Yes | Human-readable label | |
hideLabel | false | boolean | No | Is the label hidden? (Usually false) |
subtext | string | No | Subtext rendered below the checkbox | |
isDisabled | false | boolean | No | Is the checkbox disabled? |
hasError | boolean | No | Does the checkbox have an error? | |
name | string | No | Input name for the checkbox | |
size | "medium" | "large" | No | Size variant | |
testId | string | No | ID for automated testing | |
className | string | No | CSS class names | |
tabIndex | 0 | number | No | tab-index to apply |
backgroundStyle | transparent | "transparent" | "filled" | No | Set the background style for a checkbox |