Skip to content

role group

Checkbox group draft v0.1.0

Lets people pick any number of options from a short, visible set, under one legend.

A checkbox group shows every option at once, with a legend naming the choice, and lets people check any number of them, including none. It is the grouped form of the Checkbox: the group carries the legend, the shared help text and the error message, and each option its own label, description, value and checked state. Exactly one choice is a Radio group; a long list is a Select.

Playground

JSON array of option entries ("part": "option" for a option).

Notifications

  • A daily digest

  • Carrier rates may apply

HTML 
<fieldset
  class="ds-checkbox-group"
  data-orientation="vertical"
  data-size="medium"
>
  <legend
    class="ds-checkbox-group__legend"
    data-part="legend"
  >Notifications</legend>
  <ul class="ds-checkbox-group__options">
    <li>
      <div class="ds-checkbox-group__option" data-part="option">
        <input
          type="checkbox"
          class="ds-checkbox-group__control"
          data-part="control"
          id="ds-checkbox-group-20-1"
          name="notifications"
          value="email"
          checked
          aria-describedby="ds-checkbox-group-20-1-description"
        >
        <label
          class="ds-checkbox-group__option-label"
          data-part="option-label"
          for="ds-checkbox-group-20-1"
        >Email</label>
        <p
          class="ds-checkbox-group__option-description"
          data-part="option-description"
          id="ds-checkbox-group-20-1-description"
        >A daily digest</p>
      </div>
    </li>
    <li>
      <div class="ds-checkbox-group__option" data-part="option">
        <input
          type="checkbox"
          class="ds-checkbox-group__control"
          data-part="control"
          id="ds-checkbox-group-20-2"
          name="notifications"
          value="push"
          checked
        >
        <label
          class="ds-checkbox-group__option-label"
          data-part="option-label"
          for="ds-checkbox-group-20-2"
        >Push</label>
      </div>
    </li>
    <li>
      <div class="ds-checkbox-group__option" data-part="option">
        <input
          type="checkbox"
          class="ds-checkbox-group__control"
          data-part="control"
          id="ds-checkbox-group-20-3"
          name="notifications"
          value="sms"
          aria-describedby="ds-checkbox-group-20-3-description"
        >
        <label
          class="ds-checkbox-group__option-label"
          data-part="option-label"
          for="ds-checkbox-group-20-3"
        >Text message</label>
        <p
          class="ds-checkbox-group__option-description"
          data-part="option-description"
          id="ds-checkbox-group-20-3-description"
        >Carrier rates may apply</p>
      </div>
    </li>
  </ul>
</fieldset>