Select

Select allows the user to select an option from a group of similar options.

On this page:

Best Practices

  • The Select element creates a floating menu of options. It’s often called a “dropdown” but we should avoid this term as it may be confused with a Bootstrap Dropdown. Use this as the last resort ui element.
  • Please read Label Guidance first.
  • Forms work best when users can see all of their choices. When possible, try to refrain from using Selects.
  • If space is not limited, use Radios or Toggle Tokens instead.
  • If users can choose more than one option at a time, use Checkboxes.
  • If you need to include more than 15 possible options, let users type the information into a text input that suggests options.
  • Do not use this for navigation.
  • Use the first option to help inform the user of what they should do.
  • It’s not the same thing as the Dropdown Button.

Usage

<div class="form-group">
  <label for="selectChoices">Label for Select</label>
  <select class="custom-select" id="selectChoices">
    <option selected>&mdash; Select a Numeral &mdash;</option>
    <option value="1">1 (One)</option>
    <option value="2">2 (Two)</option>
    <option value="3">3 (Three)</option>
  </select>
</div>

Resources

Previous page
Next page