Checkbox

Stable

Checkboxes turn a single option on or off, or let managers pick any number of options from a list. Each checkbox has its own label, and a group of them sits in a fieldset with a legend that asks the question.

Atrium uses the browser's own checkbox, tinted with the accent colour. It has no separate hover style.

Send reminders by

Email SMS

---

Specifications

LightDark

Anatomy

Send reminders by

Email SMS

1) Legend

font-size: var(--at-text-sm) /* 14px */

font-weight: var(--at-weight-bold)

margin-bottom: var(--at-space-2) /* 4px */

2) Box

width: 1.125rem; height: 1.125rem /* 18px */

accent-color: var(--at-bg-primary)

3) Label

font-size: var(--at-text-md) /* 16px */

the whole label is clickable

Size and spacing

Email

Box

18px by 18px

margin-top: 0.15rem to line up with the first line of text

Spacing

box to label: var(--at-space-3) /* 8px */

between options: var(--at-space-3) /* 8px */

Checkbox group

Pick any number of options. Wrap the group in a fieldset with a legend.

LightDark

Example

Notify me about

New readings Missed readings Price changes

States

Unchecked

Email

browser default box

Checked

Email

fill: var(--at-bg-primary)

Focus

Email

outline: 3px solid var(--at-border-focus)

outline-offset: 2px

Disabled

Email

greyed by the browser

Single checkbox

One option on its own, for a yes or no setting. No fieldset is needed.

LightDark

Example

Include archived properties

---

Usage

When to use

• Choosing any number of options, including none.
• A single yes or no setting that is saved with the form.

When not to use

• Exactly one choice from a list: use radios.
• A setting that takes effect straight away: use a button.

Content

• Labels say what is turned on: "Email", "Include archived properties".
• Avoid negatives such as "Do not send reminders".
• The legend asks the question: "Send reminders by".

Do and don't

Send reminders

DoA positive label: ticked means on.

Do not stop sending reminders

Don'tA double negative: ticked means... what?

Do

• Wrap the input in its label so the text is clickable.

Don't

• Use a checkbox to trigger an action immediately.

---

Implementation

HTML

Copy

<fieldset class="at-fieldset">
  <legend>Send reminders by</legend>
  <label class="at-choice"><input type="checkbox" checked /> Email</label>
  <label class="at-choice"><input type="checkbox" /> SMS</label>
</fieldset>

Classes

Class	What it does
at-fieldset	Groups related choices
at-choice	Label wrapping the input and its text

Tokens used

--at-bg-primary

---

Accessibility

• Group related checkboxes in a fieldset with a legend.

Related

Radio

Pick exactly one option from a short list.

View component

Field: label, hint and error

Every form control sits in a field: label, optional hint, the control, and an error when it is wrong.

View component