Skip to content

role group

Radio group draft v0.1.0

Lets people choose exactly one option from a short, visible set.

A radio group shows every option at once, with a legend naming the choice, and lets people check exactly one of them: checking an option unchecks the previous one. Use it when the options are few and worth reading side by side; a long list of options is a Select, and independent on/off options are Checkboxes. The group is one component: the options are its repeated part, each with its own label, description, value and disabled state.

Playground

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

Delivery method

  • 3 to 5 business days, free

  • 1 to 2 business days

  • Today, at the store

HTML 
<fieldset
  class="ds-radio-group"
  data-orientation="vertical"
  data-size="medium"
>
  <legend
    class="ds-radio-group__legend"
    data-part="legend"
  >Delivery method</legend>
  <ul class="ds-radio-group__options">
    <li>
      <div class="ds-radio-group__option" data-part="option">
        <input
          type="radio"
          class="ds-radio-group__control"
          data-part="control"
          id="ds-radio-group-20-1"
          name="delivery"
          value="standard"
          checked
          aria-describedby="ds-radio-group-20-1-description"
        >
        <label
          class="ds-radio-group__option-label"
          data-part="option-label"
          for="ds-radio-group-20-1"
        >Standard</label>
        <p
          class="ds-radio-group__option-description"
          data-part="option-description"
          id="ds-radio-group-20-1-description"
        >3 to 5 business days, free</p>
      </div>
    </li>
    <li>
      <div class="ds-radio-group__option" data-part="option">
        <input
          type="radio"
          class="ds-radio-group__control"
          data-part="control"
          id="ds-radio-group-20-2"
          name="delivery"
          value="express"
          aria-describedby="ds-radio-group-20-2-description"
        >
        <label
          class="ds-radio-group__option-label"
          data-part="option-label"
          for="ds-radio-group-20-2"
        >Express</label>
        <p
          class="ds-radio-group__option-description"
          data-part="option-description"
          id="ds-radio-group-20-2-description"
        >1 to 2 business days</p>
      </div>
    </li>
    <li>
      <div class="ds-radio-group__option" data-part="option">
        <input
          type="radio"
          class="ds-radio-group__control"
          data-part="control"
          id="ds-radio-group-20-3"
          name="delivery"
          value="pickup"
          aria-describedby="ds-radio-group-20-3-description"
        >
        <label
          class="ds-radio-group__option-label"
          data-part="option-label"
          for="ds-radio-group-20-3"
        >Pickup</label>
        <p
          class="ds-radio-group__option-description"
          data-part="option-description"
          id="ds-radio-group-20-3-description"
        >Today, at the store</p>
      </div>
    </li>
  </ul>
</fieldset>