Checkbox

Copy for LLM

Import

import { Checkbox } from "@cfa/react-core";

Live Editor

Guidelines

When to use

Checkbox is for selecting and deselecting options. People can select several independently, such as in a form, settings, or to confirm a single choice.

Do

Write standalone checkbox labels as Subscribe to updates, not Should I subscribe?.
Use helper text only when it adds context, not for redundant information.
For multiple related options, use CheckboxGroup with a visible group label.

Examples

Default Selected

The defaultSelected prop allows you to set the initial state of the checkbox.

Description

The description prop allows you to add helper text to the checkbox.

Disabled

Use the isDisabled prop to disable the checkbox.

Indeterminate

A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn’t. However, visually there are three states a checkbox can be in: checked, unchecked, or indeterminate. Below is an example of the indeterminate state, passing the isIndeterminate prop.

Invalid

The isInvalid prop applies the following outline error color to a validated Checkbox.

Error Message

Use errorMessage with isInvalid to display validation text below the checkbox.

Readonly

The isReadOnly prop applies the following visual style and prevents user from making a selection.

Readonly inputs are still focusable (MDN spec).

Required

The isRequired prop applies a red asterisk to the label, visually indicating that the checkbox is required.

Controlled

Use the isSelected or defaultSelected prop to set the selection state, and onChange to handle selection changes.