Skip to content
Design System

Select

Select allows users to make a single selection or multiple selections from a list of options.

Code

Relies on the third-party librarySelect2for its features and functionality.View all resources

Stacked layout

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts.

Help or instructional text goes here 
<div class="form-group form-group--stacked">
  <label for="selectField" class="form-label"> … </label>
  <span class="help-block">
    <span class="help-block__text"> … </span>
    <span class="help-block__link"> … </span>
    <!-- optional warning message -->
    <div class="text-warning d-flex align-items-center space-x space-x-3">
      <svg class="icon icon-16" aria-hidden="true">
        <use xlink:href="/assets/svg/solid.svg#bell-on"></use>
      </svg>
      …
    </div>
    <!-- /optional warning message -->
  </span>
  <!-- error handling -->
  <div class="form-error" role="alert">…</div>
  <!-- /error handling -->
  <select id="selectField" data-js="select2">
    <option selected>Selected value</option>
    <option>Option two</option>
    <option>Option three</option>
  </select>
</div>

Horizontal layout

Side labels are most useful when vertical space is limited.

(Required)
Help or instructional text goes here 
<div class="form-group row">
  <div class="col-sm-3 col-md-2 d-md-flex text-md-right flex-column align-items-end">
    <label class="col-form-label" for="selectField">…</label>
    <span class="help-inline">(Required)</span>
  </div>
  <div class="col-sm-9 col-md-10 input-width--md">
    <input class="form-control" id="selectField" required="true" type="text" placeholder="Placeholder" />
    <!-- error handling -->
    <div class="form-error" role="alert">…</div>
    <!-- /error handling -->
    <span class="help-block">
      <span class="help-block__text"> … </span>
      <!-- optional warning message -->
      <div class="text-warning d-flex align-items-center space-x space-x-3">
        <svg class="icon icon-16" aria-hidden="true">
          <use xlink:href="/assets/svg/solid.svg#bell-on"></use>
        </svg>
        …
      </div>
      <!-- /optional warning message -->
    </span>
  </div>
</div>

Appearance

In Practice

The select component should:

  • Be used for selecting between 4 or more pre-defined options.
  • Have a default option selected whenever possible.
  • Use “Select” as a placeholder option only if there’s no logical default option.

Content guidelines

Select label

Labels should:

  • Give a short description (1–3 words) of the requested input.
  • Be written in sentence case (the first word capitalized, the rest lowercase).
  • Avoid punctuation and articles (“the”, “an”, “a”).
  • Be independent sentences. To support internationalization, they should not act as the first part of a sentence that is finished by the component’s options. (e.g., use “Country” NOT “My country is:”)
  • Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.

Select options

Options should:

  • Start with “Select” as a placeholder if there isn’t a default option
  • Be listed alphabetically or in another logical order so customers can easily find the option they need
  • Be written in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
  • Be clearly labelled based on what the option will do

Design resources

View component in Figma