Checkbox group

How to use it

Use when people may choose any number of options from a short list, including none, such as which emails to receive. For exactly one choice use a radio group, and for a single yes/no that applies immediately use a toggle switch. After copying, change the ids, names and values, keep each hint's id in sync with its checkbox's aria-describedby, and keep the legend phrased as the question being answered.

Accessibility

A <fieldset> and <legend> name the group, so each checkbox is announced as part of "Email me about". Every native checkbox has its own <label for>, so the label text is a large click target and Space toggles the box; the hint under "Security alerts" is attached with aria-describedby and read after its label. The boxes are enlarged to 1.25rem with accent-color and show a 2px focus outline. Text is #0f172a on #ffffff (17.85:1) and the hint is #475569 on #ffffff (7.58:1).

Source (copy-ready)

Copy code

<fieldset class="dcl-checkgroup">
  <legend class="dcl-checkgroup__legend">Email me about</legend>
  <div class="dcl-checkgroup__option">
    <input class="dcl-checkgroup__box" type="checkbox" id="dcl-checkgroup-updates" name="email-topics" value="updates" checked>
    <label class="dcl-checkgroup__label" for="dcl-checkgroup-updates">Product updates</label>
  </div>
  <div class="dcl-checkgroup__option">
    <input class="dcl-checkgroup__box" type="checkbox" id="dcl-checkgroup-security" name="email-topics" value="security" aria-describedby="dcl-checkgroup-security-hint" checked>
    <label class="dcl-checkgroup__label" for="dcl-checkgroup-security">Security alerts</label>
    <p class="dcl-checkgroup__hint" id="dcl-checkgroup-security-hint">Recommended. Sent only when someone signs in from a new device.</p>
  </div>
  <div class="dcl-checkgroup__option">
    <input class="dcl-checkgroup__box" type="checkbox" id="dcl-checkgroup-summary" name="email-topics" value="summary">
    <label class="dcl-checkgroup__label" for="dcl-checkgroup-summary">Weekly activity summary</label>
  </div>
</fieldset>
<style>
.dcl-checkgroup { min-width: 0; max-width: 26rem; margin: 0; padding: 0; border: none; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-checkgroup__legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-checkgroup__option { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: 0.6rem; align-items: start; padding: 0.4rem 0; }
.dcl-checkgroup__box { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: #1d4ed8; }
.dcl-checkgroup__box:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.dcl-checkgroup__label { cursor: pointer; overflow-wrap: anywhere; color: #0f172a; background-color: #ffffff; }
.dcl-checkgroup__hint { grid-column: 2; margin: 0.15rem 0 0; font-size: 0.875rem; color: #475569; background-color: #ffffff; }
</style>