Selects

Best practices

Use dropdown menus to let users select an action or options from a set of choices. Typically, dropdown menus are used when you have more than 5 options.

Dropdown menus should:

  • Be limited to 15 items. Consider breaking large lists out into categories and using dropdowns or other list formats.
  • Be avoided when typing may be faster, such as selecting a country from a large list.
  • Be avoided for data that is familiar to users, such as birthdays.
  • Always have the label in view.
  • Always support keyboard input.

How it works

Custom <select> menus need only a custom class, .custom-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

<label for="exampleSelect1">Example file input</label>
<select id="exampleSelect1" class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

In most cases the default sized form components should be used. Smaller sizing could be used in instances where there are space limitations or the form is not the main action on the page (a form within the footer or sidebar for instance).

<div class="form-group">
  <label for="selectLg">Large select</label>
  <select id="selectLg" class="custom-select custom-select-lg mb-2">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="form-group">
  <label for="selectSm">Small select</label>
  <select id="selectSm" class="custom-select custom-select-sm">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>