Getting Started
Foundations
Components

Checkbox

Input component for selecting or deselecting an option.

Examples

Controlled state

To use Checkbox in controlled mode, use the isChecked and onCheckedChanged props with your local state.

Uncontrolled state

To use Checkbox in uncontrolled mode with an initial value, use the isDefaultChecked prop.

Helper text

Use the helperText prop to provide additional context for the Checkbox.

Please read the terms and conditions

Invalid state

Use the isInvalid prop along with errorMessage to indicate an invalid state. The error message will be visible only when isInvalid is set to true. Will be displayed below the input field, replacing any helperText.

The label prop accepts also accepts React components for the times when an inline link is needed.

Use sparingly

Can cause usability issues, use only when necessary.

API Reference

PropDefaultDescription
label-string | ReactElement<unknown, string | JSXElementConstructor<any>>

The label for the checkbox. Accepts a string, or a React component for rendering links within the label.

helperText?-string

Text that provides additional guidance to the user

isDefaultChecked?-boolean

The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.

isChecked?-boolean

The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.

onCheckedChange?-((checked: boolean) => void)

Event handler called when the checked state of the checkbox changes.

isInvalid?falseboolean

If true the checkbox will render in its invalid state.

isDisabled?falseboolean

If true it prevents the user from interacting with the checkbox.

isRequired?falseboolean

If true the user must check the checkbox before the owning form can be submitted.