Checkboxes are used to select something. They can be used to reflect a binary setting or for selecting elements to perform an action. Related design guidelines: Data input

ExamplesPropsCSS variables


Controlled checkbox

Copied to clipboard

Uncontrolled checkbox

Copied to clipboard

Disabled checkbox

Copied to clipboard


Checkbox props

The Checkbox component accepts the following props.

classNamestring''Additional classes added to the Checkbox.
isValidbooleantrueFlag to show if the Checkbox selection is valid or invalid.
isDisabledbooleanfalseFlag to show if the Checkbox is disabled.
isCheckedbooleanfalseFlag to show if the Checkbox is checked.
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => {}A callback for when the Checkbox selection changes.
labelReact.ReactNodeLabel text of the checkbox.
idstringId of the checkbox.
aria-labelstringAria-label of the checkbox.

CSS variables