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

Select

The select component represents an <select> element with an explicitly associated <label> element. The component also supports additional information and/or error messages associated with the form control.

Overall usage

Used to present a series of options presented as a dropdown menu.

Accessibility

• The <label> element should only be hidden in cases where there is no other choices available, and only when the form is extremely simple and its purpose is clear to sighted users.
• For required fields, the required and aria-required="true" attributes must also be applied to the <select> element to inform Assistive Technologies.
• The static, focus and hover states of the <select> element should be defined
• There must be a clearly visible focus state, and the method should be consistent across all focusable elements.

---

.select

Used to display a <select> form control and an explicitly associated <label>.

<div class="select">
  <label class="select__label" for="example1">
    <span class="select__content">Label for select</span>
    <select class="select__control" id="example1">
      <option value="">Choose an option</option>
      <option value="one">one</option>
      <option value="two">two</option>
      <option value="three">three</option>
    </select>
  </label>
</div>

A help mesage can be placed directly after the <label> element using the message--help class.

<div class="select">
  <label class="select__label" for="example3">
    <span class="select__content">Label for select</span>
    <span class="message--help">Help Message</span>
    <select class="select__control" id="example3">
      <option value="">Choose an option</option>
      <option value="one">one</option>
      <option value="two">two</option>
      <option value="three">three</option>
    </select>
  </label>
</div>

A required flag can be placed inside the <label> element using the message--required class. The required boolean attribute must be added to the <select>.

<div class="select">
  <label class="select__label" for="example4">
    <span class="select__content">Label for select <span class="message--required">(Required)</span></span>
    <select class="select__control" id="example4" required>
      <option value="">Choose an option</option>
      <option value="one">one</option>
      <option value="two">two</option>
      <option value="three">three</option>
    </select>
  </label>
</div>

---

.select--hidden

Used to display an <select> form control and an explicitly associated <label>. The <label> is not displayed on-screen, but is still available to assistive technologies.

<div class="select select--hidden">
  <label class="select__label" for="example2">
    <span class="select__content">Label for select</span>
    <select class="select__control" id="example2">
      <option value="">Choose an option</option>
      <option value="one">one</option>
      <option value="two">two</option>
      <option value="three">three</option>
    </select>
  </label>
</div>

---

.select--invalid

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

<div class="select select--invalid">
  <label class="select__label" for="example5">
    <span class="select__content">Label for select <span class="message--required">(Required)</span></span>
    <select class="select__control" id="example5">
      <option value="">Choose an option</option>
      <option value="one">one</option>
      <option value="two">two</option>
      <option value="three">three</option>
    </select>
    <!-- Error message -->
    <span class="message--error">
      <span class="fas fa-times">
        <span class="u-hidden">Error</span>
      </span>
      Error message
    </span>
  </label>
</div>

---

.select--disabled

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

<div class="select select--disabled">
  <label class="select__label" for="example6">
    <span class="select__content">Label for select</span>
    <select class="select__control" id="example6" disabled>
      <option value="one">one</option>
      <option value="two">two</option>
      <option value="three">three</option>
    </select>
  </label>
</div>