Skip to main content

Dropdown

The dropdown (select) component allows users to choose an option from a list.

Only use a dropdown when you have 4 or more options. Use radio buttons if you have fewer than 4 options.

With label​

<div class="field">
  <label class="field__label field__label--block" for="dropdown">Container that was missed</label>
  <div class="drop drop--block">
    <select id="dropdown">
      <option disabled>Please select</option>
      <option value="">Black wheeled bin</option>
      <option value="">Black recycling box</option>
      <option value="">Food waste bin</option>
      <option value="">Green recycling box</option>
      <option value="">Blue sack</option>
      <option value="">Garden waste bin</option>
    </select>
    <div class="drop__background"></div>
  </div>
</div>

With label and hint​

<div class="field">
  <label class="field__label field__label--block" for="dropdown">What's the problem about?</label>
  <div class="field__instructions">Select an item from this list</div>
  <div class="drop drop--block">
    <select id="dropdown">
      <option disabled>Please select</option>
      <option value="Bin, litter or rubbish">Bin, litter or rubbish</option>
      <option value="Graffiti or fly-posting">Graffiti or fly-posting</option>
      <option value="Grass">Grass</option>
      <option value="Leaves or blossom">Leaves or blossom</option>
      <option value="Other">Other</option>
    </select>
    <div class="drop__background"></div>
  </div>
</div>

With error​

Display an inline error when there's something wrong.

Make sure:

  • The form control has the aria-describedby attribute and references an associated error message
  • The associated error message has a unique ID

Remove the error state when the dropdown is changed, to avoid confusing users.

To do this:

  • Remove the field--error class
  • Remove the <div> element with the class field__message field__message--error

Refresh this page to reset the error state in this example.

You need to tell us which container was missed
<div class="field field--error">
  <label class="field__label field__label--block" for="dropdown">Container that was missed</label>
  <div class="drop drop--block">
    <select aria-describedby="dropdown-error" id="dropdown">
      <option disabled>Please select</option>
      <option value="">Black wheeled bin</option>
      <option value="">Black recycling box</option>
      <option value="">Food waste bin</option>
      <option value="">Green recycling box</option>
      <option value="">Blue sack</option>
      <option value="">Garden waste bin</option>
    </select>
    <div class="drop__background"></div>
    <div id="dropdown-error" class="field__message field__message--error">You need to tell us which container was missed</div>
  </div>
</div>