Components · Inputs
Checkbox
BetaTurns one option on or off, such as including rest days.
- Source
components/ui/checkbox.tsx - shadcn/ui Checkbox
- Figma: not linked yet (Q13)
Clients see recovery tips on these days.
When to use
- To turn one option on or off as part of a form that is saved later.
- To pick any number of options from a list: training days, equipment a client has.
When not to use
- For a setting that takes effect immediately: use a Switch.
- To pick exactly one option: use a Radio group.
Anatomy
- 1. Box: border, check mark when on, dash when partly on
- 2. Label: clicking it toggles the box
Variants
One style. A checkbox can stand alone, have a description below its label, or lead a group as a "select all" with a mixed state.
States
Accept the terms to receive payouts.
| State | What changes | Token |
|---|---|---|
| Checked | Filled with a check | bg-primary, text-primary-foreground |
| Indeterminate | Filled with a dash: some items in the group are on | bg-primary |
| Focus-visible | Ring around the box | ring-ring/50 |
| Disabled | Half opacity, label too | opacity-(--opacity-disabled) |
| Invalid | Red border, error text | border-destructive, text-destructive-text |
Usage guidelines
- Write labels so "checked" means yes: "Include rest days", not "Hide rest days".
- Group related checkboxes in a
fieldsetwith alegend. - Don't make a checkbox submit anything by itself.
Content guidelines
- Labels are a short statement in sentence case, without a period.
- Put extra detail in a description below the label, not in the label.
Accessibility
| Key | Does |
|---|---|
| Tab | Moves to the checkbox |
| Space | Toggles it |
- Announced as "Include rest days in the calendar, checkbox, checked", followed by its description.
- The mixed state is announced as "mixed" (
aria-checked="mixed"). - The label is a real
<label>, so its whole area is clickable.
RTL
The box sits at the start of the row, so it moves to the right. Indents for nested items use ps-6.
Tokens used
Read from components/ui/checkbox.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.
| Token | Utilities | SuperCoach | Coach |
|---|---|---|---|
| --destructive | border-destructive ring-destructive/20 | red-600 | red-600 |
| --input | border-input | neutral-200 | neutral-200 |
| --primary | border-primary bg-primary | brand-600 | orange-500 |
| --primary-foreground | text-primary-foreground | white | white |
| --ring | border-ring ring-ring/50 | brand-600 | orange-500 |
- Opacity
opacity-(--opacity-disabled) - Radius
rounded-sm - Shadow
shadow-xs
Props
<Checkbox>
Also takes every prop of Radix Checkbox.Root
No props of its own.
Replaces in coach-admin
From the read-only audit of coach-admin: 41 style values, 45 uses.
Classes and selectors
.el-checkbox-input:focus + .el-checkbox-box, .el-checkbox-bo3.el-checkbox-description3.el-checkbox-box3.progress-image-card__checkbox3.delete-images-modal__checkbox3.checkboxlist3&.rg-checkbox-checked2.checkbox-label2.el-checkbox-label2.checkbox input2.rg-checkbox2.el-checkbox-input:checked + .el-checkbox-box1
Files
src/reusableComponents/formComponents/checkbox/checkbox.scss14
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$checkbox-checkednot a color: spacing, size or layout$template-checkbox-sizenot a color: spacing, size or layout$checkbox-unchecked→ nearest neutral-100 (no semantic token)$border-color→--border$primary-border-colornot a color: spacing, size or layout