Checkboxes & radios

Checkboxes and radio buttons translate decisions into simple taps or clicks, whether a reader is opting into newsletters, toggling feature flags, or committing to a single choice in a crowded form. Their geometry might be humble, but their semantics provide screen readers and validation logic with an unambiguous source of truth, keeping preference panes and documentation samples predictable across devices.

This page gathers the default, inline, and disabled states for checkboxes, radios, and hybrids so you can preview spacing, helper text, and feedback patterns in one place. Lean on these guidelines whenever you need to confirm label alignment, stack nuanced helper copy, or keep multi-column layouts tidy without sacrificing clarity or accessibility.

Checkboxes capture independent truths: a user can subscribe to multiple notifications, opt into beta features, or acknowledge a series of requirements without losing earlier selections. Pair every box with a concise label (and optional helper text) so the touch target stays generous and the commitment behind each checkmark remains immediately legible.

Group related checkboxes with a legend or heading, order them logically, and only pre-check values when you are confident the default mirrors a user's intent; otherwise you risk obscuring consent and creating extra unchecking work.

<ul class="checkboxes">
  <li>
    <input type="checkbox" id="..." checked>
    <label for="...">...</label>
  </li>
  <li>
    <input type="checkbox" id="...">
    <label for="...">...</label>
  </li>
  <li>
    <input type="checkbox" id="...">
    <label for="...">...</label>
  </li>
  <li>
    <input type="checkbox" id="..." disabled>
    <label for="...">...</label>
  </li>
</ul>
<small class="help">...</small>

Radio buttons enforce a single answer among peers, which keeps shipping methods, billing cadences, or permission levels mutually exclusive. Because changing one selection clears the rest, radios are perfect when "one-and-only-one" logic is required and when you need to expose all possibilities without hiding them behind dropdown friction.

Share a name attribute across every radio in the set, arrange the list in a natural sequence (chronological, price, intensity), and default to the safest option so users can confirm rather than recover from an accidental commitment.

<ul class="radios">
  <li>
    <input type="radio" name="..." id="..." checked>
    <label for="...">...</label>
  </li>
  <li>
    <input type="radio" name="..." id="...">
    <label for="...">...</label>
  </li>
  <li>
    <input type="radio" name="..." id="...">
    <label for="...">...</label>
  </li>
  <li>
    <input type="radio" name="..." id="..." disabled>
    <label for="...">...</label>
  </li>
</ul>
<small class="help">...</small>

Inline boxes place checkboxes or radios side-by-side, making compact filters and quick preference pickers feel at home in toolbars, tables, or summary cards. Use them when the choices are short (think weekdays, badge colors, status chips) and when the surrounding layout benefits from a single line of lightweight controls.

Watch line wrapping: once inline options exceed the available width, revert to stacked lists or add responsive breakpoints so labels never collide. Maintain consistent spacing between the boxes and place helper text underneath the entire group so context remains anchored to the control.

<ul class="checkboxes inline"></ul>
<ul class="radios inline"></ul>

Button-style checkboxes and radios deliver the same form semantics but borrow the bolder chrome of our button system, making segmented controls, format selectors, or filter chips easier to parse at a glance. Use them when you want mutually exclusive states to feel tactile without losing the underlying input behavior described in the buttons documentation.

Sync interaction cues by matching the pressed/selected visuals to their actual checked state and ensuring icons or short labels communicate what toggling will do. Remember that these are still form inputs, so keyboard focus, disabled styling, and helper text should mirror their standard counterparts for consistent accessibility.

<ul class="checkboxes buttons"></ul>
<ul class="radios buttons"></ul>