Dropdown Select

Overview

Dropdown select form fields are a great way to combine many choices into one input. They are best used when you want to present many options, from which the user can choose only one.

Examples

Static variation

Example
External Link
This field is required
This field is required 
<div class="select">
  <label for="formSelect-1" class="select__label">Select input</label>
  <select name="" id="formSelect-1" class="select__field">
    <option value=""></option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    <option value="">Option 4</option>
    <option value="">Option 5</option>
  </select>
  <div class="form__error-message">
    This field is required
  </div>
</div>
<div class="select">
  <label for="formSelect-2" class="select__label is-invalid">Select input</label>
  <select name="" id="formSelect-2" class="select__field is-invalid" required>
    <option value=""></option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    <option value="">Option 4</option>
    <option value="">Option 5</option>
  </select>
  <div class="form__error-message is-visible">
    This field is required
  </div>
</div>

Usage guidelines

Dos Donts
do iconDo use when you have a long list of options, of which the user can only choose one.
do iconDo create labels that clearly explain the option being selected.

Implementation guidelines

Name Attribute Description
Required required Requires a value to be selected - cannot be left blank. Apply to the select element.