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

Segmented-control

The segmented-control component represents a group of radio elements within a fieldset element, styled to look like segments.

Overall usage

Used to present a range of radio options that are styled to look like series of buttons.

Accessibility

• A <label> must be present for each <radio> item.
• The <label> must be explicitly associated with the <radio> using matching for and id attribute values
• A <fieldset> and <legend> must be present to provide an overall label for the group of options.

---

.segmented-control

Used for a left-aligned, non-stretched segemented control.

<fieldset class="segmented-control">
  <legend>legend</legend>
  <ul class="segmented-control__list">
    <li>
       <input type="radio" id="example1-option1" name="example1">
       <label for="example1-option1">one</label>
    </li>
    <li>
       <input type="radio" id="example1-option2" name="example1">
       <label for="example1-option2">two</label>
    </li>
  </ul>
</fieldset>

---

.segmented-control--stretched

Used for a left-aligned, stretched segemented control.

<fieldset class="segmented-control segmented-control--stretched">
  <legend>Legend</legend>
  <ul class="segmented-control__list">
    <li>
       <input type="radio" id="example2-option1" name="example2">
       <label for="example2-option1">one</label>
    </li>
    <li>
       <input type="radio" id="example2-option2" name="example2">
       <label for="example2-option2">two</label>
    </li>
    <li>
       <input type="radio" id="example2-option3" name="example2">
       <label for="example2-option3">three</label>
    </li>
  </ul>
</fieldset>

---

.segmented-control--centered

Used for a centered, non-stretched segemented control.

<fieldset class="segmented-control segmented-control--centered">
  <legend>Legend</legend>
  <ul class="segmented-control__list">
    <li>
       <input type="radio" id="example3-option1" name="example3">
       <label for="example3-option1">one</label>
    </li>
    <li>
       <input type="radio" id="example3-option2" name="example3">
       <label for="example3-option2">two</label>
    </li>
    <li>
       <input type="radio" id="example3-option3" name="example3">
       <label for="example3-option3">three</label>
    </li>
  </ul>
</fieldset>