Aileron

Select menu

Storybook

Select menu

Use select menus to combine many choices into one menu that users can select from without having the entire list visible at all times.

Usage Guidelines

The select menu component should:

  • Be used when 2 or more options are available
  • Be used when the user needs to select one single option from the list
  • The different options should be sorted in ascending/descending alphabetical or other applicable order criteria
  • When no default option is selected, placeholder copy should be used

Text label

Qualifies the user’s selection in a descriptive, not instructional way. If the selection needs more explanation or details, use instructional text at the top of the field or in the form of a tooltip.

Accessibility

Additional hidden text can be added to the label if context requires so.

<!-- Default -->
<div class="form-field-container">
    <select name="select1" id="select1">
    <option value="--" >Default option</option>
    <option value="value 1" >Option 1</option>
    <option value="value 2" >Option 2</option>
    <option value="value 3" >Option 3</option>
  </select>
    <label for="select1">
    Select label
  </label>
</div>


<!-- Required -->
<div class="form-field-container">
    <select name="select1-required" id="select1-required">
    <option value="--" >Default option</option>
    <option value="value 1" >Option 1</option>
    <option value="value 2" >Option 2</option>
    <option value="value 3" >Option 3</option>
  </select>
    <label for="select1-required">
    Select label - required
    <span class="icon-required" aria-hidden="true"></span>
    <span class="show-for-sr">, required. </span>
  </label>
</div>


<!-- Error -->
<div class="form-field-container error">
    <select name="select1-error" id="select1-error">
    <option value="--" >Default option</option>
    <option value="value 1" >Option 1</option>
    <option value="value 2" >Option 2</option>
    <option value="value 3" >Option 3</option>
  </select>
    <label for="select1-error">
    Select label - error
    <span class="show-for-sr">Error message</span>
  </label>
    <span class="error-message" aria-hidden="true">Error message</span>
</div>


<!-- Disabled -->
<div class="form-field-container">
    <select name="select1-disabled" id="select1-disabled" disabled>
    <option value="--" >Default option</option>
    <option value="value 1" >Option 1</option>
    <option value="value 2" >Option 2</option>
    <option value="value 3" >Option 3</option>
  </select>
    <label for="select1-disabled">
    Select label - disabled
  </label>
</div>