Select

A select is a drop-down menu that lets a user choose one option from a list of multiple items. You can use a select instead of a radio button when you have limited space. Include no more than 7 to 15 items within the select.

Use selects with caution. They can create usability and accessibility issues.

Select an option

HTML

<div class="hc-form-group">
      <label class="hc-field-label" for="select1">Select an option</label>
      <select class="hc-select" name="select1" id="select1">
        <option value="">Choose an option</option>
        <option value="item1">Item 1</option>
        <option value="item2">Item 2</option>
        <option value="item3">Item 3</option>
      </select>
    </div>

Import

Label

When to use

Use a select only if you can’t use a radio or checkbox component. Selects have accessibility and usability issues.
Selects are a better option than a radio button component if a user must choose one option from a list of 7 or more items.
Use a select when you have limited space.

When not to use

When your menu has fewer than 7 options, don’t use a select. Instead, use a radio button component. For more information, visit the Radio button component.
When a user can choose more than one option, don’t use a select. Multiselects can confuse users and cause usability issues. Instead, use a checkbox component. For more information on checkboxes, visit the Checkbox component.

Open all

Accessibility for select

Include a label. It tells users the purpose of the list.

Do not use conditional logic. Using a previous question to determine the options within a select can be confusing. It can also confuse users when the answer they give in a select determines the follow-up question. Users may have a hard time understanding why their answer changed other options.

Selects have major accessibility problems. These include:

Inability to close the select
Confusing focused items with selected items
Trying to pinch-zoom select options on a mobile device

Visit a Gov.UK video of users struggling with selects.

Best practices for select

Organize items within the select either in alphabetical order or by popularity.
Make sure the select is responsive to different devices.
Test select menus with your users to ensure they can understand and use it.

Open all