Checkboxes, radios & switches

Overview

Boolean and single-choice controls share the native <input> + <label> + visual __control pattern (icon font for checkbox ticks). Checkbox adds an indeterminate state for “select some” trees and tables.

Prerequisites

• PimentCSS installed, Installation.
• Input fields, labels and hints from Input fields.
• Focus, :focus-visible rings on __control (3px).

Checkboxes

Wrap with .checkbox: hidden input, .checkbox__control, then label text. Icons for check and minus live inside the control; CSS toggles visibility.

<label class="checkbox">
  <input type="checkbox" class="checkbox__input focus-visible" id="agree">
  <span class="checkbox__control"><i class="ph ph-check checkbox__icon checkbox__icon--check" style="font-size:16px" aria-hidden="true"></i><i class="ph ph-minus checkbox__icon checkbox__icon--minus" style="font-size:16px" aria-hidden="true"></i></span>
  <span class="body-medium">I agree</span>
</label>

Interactive examples

Real inputs with labels. Indeterminate is set in JS on this site (data-pdoc-indeterminate).

Checkbox visuals (spec)

Static span.checkbox__control modifiers for documentation only. Each block lists interaction states without nested scroll.

Unchecked

Empty box before selection.

Selected

Checked with check icon.

Indeterminate

Partial selection (minus icon).

Radio buttons

Only one option per name. Use <fieldset> and <legend> for the group label.

<fieldset>
  <legend>Shipping</legend>
  <label class="radio">
    <input type="radio" name="ship" class="radio__input focus-visible" id="ship-std" value="standard" checked="">
    <span class="radio__control"><span class="radio__dot"></span></span>
    <span class="body-medium">Standard</span>
  </label>
</fieldset>

Interactive radio group

Radio visuals (spec)

Active (selected)

Filled dot when checked.

Inactive

Empty circle before selection.

Switches

Use .switch with role="switch" and sync aria-checked when the knob moves. Under the hood it is still a checkbox input.

<label class="switch">
  <input type="checkbox" class="switch__input focus-visible" id="notify" role="switch" aria-checked="false">
  <span class="switch__control"><span class="switch__knob"></span></span>
  <span class="body-medium">Notifications</span>
</label>

Interactive switches

Switch visuals (spec)

On

Knob aligned end, action surface fill.

Off

Knob at start, neutral track.

Class reference

Customize (Sass)

1. 01

   Control size

   Checkbox and radio use 1.5rem (24px) in component SCSS. Switch track is 3rem × 1.625rem.
   _checkbox.scss

   // scss/components/_checkbox.scss
   $control-size: 1.5rem;

2. 02

   Rebuild CSS

   Run after editing component SCSS.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps