Select Component

IMPORTANT: The examples below show the select in isolation, without any label. Please see the field module for details on labeling controls. Remember: every select requires a label!

Default select

<span class="select">
  <select name="options">
    <option value="item1">Option 1</option>
    <option value="item2">Option 2</option>
    <option value="item3">Option 3</option>
  </select>
  <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
    <use href="#icon-chevron-down-12" />
  </svg>
</span>

Disabled select

<span class="select">
  <select name="options" disabled>
    <option value="item1">Option 1</option>
    <option value="item2" selected>Option 2</option>
    <option value="item3">Option 3</option>
  </select>
  <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
    <use href="#icon-chevron-down-12" />
  </svg>
</span>

Selected option

<span class="select">
  <select name="options">
    <option value="item1">Option 1</option>
    <option value="item2" selected>Option 2</option>
    <option value="item3">Option 3</option>
  </select>
  <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
    <use href="#icon-chevron-down-12" />
  </svg>
</span>

Unselected Select

If no suitable default value exists, the first option in the list can be used as a prompt and set to disabled & selected .

<span class="select">
  <select>
    <option value="0" disabled selected>-select-</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
    <use href="#icon-chevron-down-12" />
  </svg>
</span>

Fluid select

<span class="select select--fluid">
  <select name="options">
    <option value="item1">Option 1</option>
    <option value="item2" selected>Option 2</option>
    <option value="item3">Option 3</option>
  </select>
  <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
    <use href="#icon-chevron-down-12" />
  </svg>
</span>

Borderless select

<span class="select select--borderless">
  <select name="options" id="options">
    <option value="item1">Option 1</option>
    <option value="item2" selected>Option 2</option>
    <option value="item3">Option 3</option>
  </select>
  <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
    <use href="#icon-chevron-down-12" />
  </svg>
</span>

Large Select

For a large select, apply the select--large modifier.

<span class="select select--large">
  <select>
    <option value="0" disabled selected>Choose a Size</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
    <use href="#icon-chevron-down-12" />
  </svg>
</span>