Components

• Introduction
• Link
• List
• Description-list
• Table
• Button
• Button-group
• Message
• Input
• Select
• Textarea
• Checkbox
• Radio-group
• Segmented-control
• Content-container
• Form-container
• Media
• Summary
• Skip-link
• Header
• Footer
• Icons

Radio-group

The radio-group component represents a set of <input> elements, each with a type of radio and their explicitly associated <label> element. The set is housed within a <fieldset> that contains a <legend> element.

Overall usage

Used to present one or more selectable options to users - where only one option can be chosen at a time.

Accessibility

• The <input> element needs an explicitly associated <label>. The contents of the <label> must come after the <input> element.
• Radio buttons should always be presented as a group within a <fieldset>.
• The <legend> must be present and placed directly after the fieldset start tag.

---

.radio-group

Used to display a series of <input> form controls with the type of radio and their explicitly associated <label>, housed within a <fieldset> element that contains a <legend>

<fieldset class="radio-group">
  <legend>Legend for radio group</legend>
  <ul> 
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="1a" name="example1">
        <label class="radio-group__label" for="1a">Radio button one</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="1b" name="example1">
        <label class="radio-group__label" for="1b">Radio button two</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="1c" name="example1">
        <label class="radio-group__label" for="1c">Radio button three</label>
      </div>
    </li>
  </ul>
</fieldset>

A help mesage can be placed directly after the <legend> element using the message--help class. This message needs to be explicitly associated with the <fieldset> using matching aria-describedby and id values.

<fieldset class="radio-group" aria-describedby="e2">
  <legend>Legend for radio group</legend>
  <p class="message--help--radio-group" id="e2">Help message</p>
  <ul> 
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="2a" name="example2">
        <label class="radio-group__label" for="2a">Radio button one</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="2b" name="example2">
        <label class="radio-group__label" for="2b">Radio button two</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="2c" name="example2">
        <label class="radio-group__label" for="2c">Radio button three</label>
      </div>
    </li>
  </ul>
</fieldset>

A required flag can be placed inside the <legend> element using the message--required class.

<fieldset class="radio-group">
  <legend>
    Legend for radio group
    <span class="message--required">(Required)</span>
  </legend>
  <ul> 
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="3a" name="example3">
        <label class="radio-group__label" for="3a">Radio button one</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="3b" name="example3">
        <label class="radio-group__label" for="3b">Radio button two</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="3c" name="example3">
        <label class="radio-group__label" for="3c">Radio button three</label>
      </div>
    </li>
  </ul>
</fieldset>

---

.radio-group--invalid

Used to inform the user that the form control has not been filled-in correctly.

<fieldset class="radio-group radio-group--invalid" aria-describedby="e4">
  <legend>
    Legend for radio group
    <span class="message--required">(Required)</span>
  </legend>
  <ul> 
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="4a" name="example4">
        <label class="radio-group__label" for="4a">Radio button one</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="4b" name="example4">
        <label class="radio-group__label" for="4b">Radio button two</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="4c" name="example4">
        <label class="radio-group__label" for="4c">Radio button three</label>
      </div>
    </li>
  </ul>
  <p class="message--error--radio-group" id="e4">
    <span class="fas fa-times">
      <span class="u-hidden">Error</span>
    </span>
    Error message
  </p>
</fieldset>

---

.radio-group--disabled

Used to present a disabled <input> element and label. The disabled boolean attribute must be added to each <input>.

<fieldset class="radio-group radio-group--disabled">
  <legend>Legend for radio group</legend>
  <ul> 
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="5a" name="example5" disabled>
        <label class="radio-group__label" for="5a">Radio button one</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="5b" name="example5" disabled>
        <label class="radio-group__label" for="5b">Radio button two</label>
      </div>
    </li>
    <li>
      <div class="radio-group__container">
        <input class="radio-group__control" type="radio" id="5c" name="example5" disabled>
        <label class="radio-group__label" for="5c">Radio button three</label>
      </div>
    </li>
  </ul>
</fieldset>