Checkbox component

Figma Component
Checkboxes allow the user to select one or more items from a set.

Properties

NameDescriptionDefault
busy

Input busy state

-
description
Checkbox description
-
error
Input error state
-
indeterminate

Indeterminate style

-
label

Checkbox inline label Component label

-
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.

Group

To group related checkboxes, the `Checkbox.Group` component can be used.

An optional error can be defined for checkbox group.

Error text

With Error

When a checkbox field is a part of a form that is currently busy (e.g. data is asynchronous validated or saved) the input field should be marked with the `busy` attribute. The component will be set as disabled, but will be visually different from `disabled` state.

Busy

When a checkbox field is a part of a form that is currently busy (e.g. data is asynchronous validated or saved) the input field should be marked with the `busy` attribute. The component will be set as disabled, but will be visually different from `disabled` state.

Disabled

A component that is unavailable and should be ignored on form submissions, has to be marked with the `disabled` property.

Read Only

A component that is unavailable for user input changes, but should be focusable and included on form submissions, has to be marked with the `readOnly` property.