#Checkbox

Collects any number of choices from a limited set, or turns a single option on or off — reach for Radio when only one choice is allowed, and Switch when the change takes effect immediately instead of on submit. Past roughly ten options, a Select reads better than a long column of boxes.

Source · Storybook

#Usage

import { Checkbox, CheckboxIndicator, CheckboxLabel } from '@wallarm-org/design-system/Checkbox';

#Examples

#Checked

The checked state. Pass checked to drive it from your own state, or defaultChecked to let the checkbox keep track of it.

#Indeterminate

checked='indeterminate' is for a parent whose children are only partly selected. Set it deliberately — a click never produces it — and clear it once every child is checked or unchecked.

#Disabled

All three states while disabled, so you can see that the indicator stays readable when the option cannot be changed.

#With description

CheckboxDescription adds a second line under the label, and switches the row to a grid so that text lines up with the label rather than the box.

#Group

CheckboxGroup ties several checkboxes to one name and one array of values, and owns the spacing between them. Every box stays independent: ticking one must never move another, unless it is a parent selecting all of its children.

#Card

variant='card' gives every option its own bordered surface. Cards exist to carry a description — that is what the extra room is for, and a card holding a bare label wastes it. Plain rows read better for short lists of short labels.

#Form field

Wrapped in Field, so the label and description above the options come from FieldLabel and FieldDescription. Shown as plain rows and as cards.

#Props

#CheckboxDescription

#CheckboxGroup

#CheckboxLabel

#Explorer