Skip to main content
Hennepin County Design System


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.


<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>
A PrimeNG dropdown component example.



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

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.

  • 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