Select dropdown

The select component allows users to choose an option from a long list.

Example

Example

Select

Select with hint

This is an example hint

Select with error message

Select a sort by option

Select with hint and error message

This is an example hint

Select a sort by option

HTML

                                    
<!-- Select -->
<form id="selects" class="coop-form" novalidate>
  <h3>Select</h3>

  <div class="coop-form__row">
    <label class="coop-form__label" for="sort-by-1">Sort by:</label>

    <p id="sort-by-1-error" class="coop-form__error" hidden></p>

    <select id="sort-by-1" class="coop-form__field coop-form__select">
      <option value="">Please select</option>
      <option value="relevancy" selected>Relevancy</option>
      <option value="price-asc">Price: Low to high</option>
      <option value="price-desc">Price: High to low</option>
    </select>
  </div>
</form>

                                    
<!-- Select with hint -->
<form id="selects-hint" class="coop-form" novalidate>
  <h3>Select with hint</h3>

  <div class="coop-form__row">
    <label class="coop-form__label" for="sort-by-2">Sort by:</label>

    <p id="sort-by-2-hint" class="coop-form__hint">This is an example hint</p>
    <p id="sort-by-2-error" class="coop-form__error" hidden></p>

    <select id="sort-by-2" class="coop-form__field coop-form__select" aria-describedby="sort-by-2-hint">
      <option value="">Please select</option>
      <option value="relevancy" selected>Relevancy</option>
      <option value="price-asc">Price: Low to high</option>
      <option value="price-desc">Price: High to low</option>
    </select>
  </div>
</form>

                                    
<!-- Select with error message -->
<form id="selects-error" class="coop-form" novalidate>
  <h3>Select with error message</h3>

  <div class="coop-form__row">
    <label class="coop-form__label" for="sort-by-3">Sort by:</label>

    <p id="sort-by-3-error" class="coop-form__error">Select a sort by option</p>

    <select id="sort-by-3" class="coop-form__field coop-form__select coop-form__invalid" aria-describedby="sort-by-3-error">
      <option value="">Please select</option>
      <option value="relevancy">Relevancy</option>
      <option value="price-asc">Price: Low to high</option>
      <option value="price-desc">Price: High to low</option>
    </select>
  </div>
</form>

                                    
<!-- Select with hint and error message -->
<form id="selects-hint-error" class="coop-form" novalidate>
  <h3>Select with hint and error message</h3>

  <div class="coop-form__row">
    <label class="coop-form__label" for="sort-by-4">Sort by:</label>

    <p id="sort-by-4-hint" class="coop-form__hint">This is an example hint</p>
    <p id="sort-by-4-error" class="coop-form__error">Select a sort by option</p>

    <select id="sort-by-4" class="coop-form__field coop-form__select coop-form__invalid" aria-describedby="sort-by-4-hint sort-by-4-error">
      <option value="">Please select</option>
      <option value="relevancy">Relevancy</option>
      <option value="price-asc">Price: Low to high</option>
      <option value="price-desc">Price: High to low</option>
    </select>
  </div>
</form>

                                    

Design and content

We do not advise the use of select because research shows that some users find selects very difficult to use. We follow the same guidelines as Gov.uk.

Accessibility

Watch a video about how some users struggle with selects.