Layout
Checked
Code preview
import { Checkbox } from "./Checkbox";
On/off choices for one setting or a related list where people can pick more than one option.
Turn one setting on or off, or offer a list of related choices where people can select more than one.
import { Checkbox } from "./Checkbox";
Color and type tokens for checkbox states and labels.
| Token | Value | Color | Usage |
|---|---|---|---|
| Unchecked border | var(--input-input-stroke-default) | #8f9da4 | Outline when the option is off |
| Unchecked fill | var(--input-input-fill) | #fcfcfc | Background when the option is off |
| Checked | var(--lavender-500) | #765cd8 | Fill and checkmark when the option is on |
| Label | var(--text-heading-strong) | #063235 | Text beside the control |