Components

Select

A select component allows users to choose one option from a temporary modal menu.

<form class="usa-form">
  <label class="usa-label" for="options">Dropdown label</label>
  <select class="usa-select" name="options" id="options">
    <option value>- Select -</option>
    <option value="value1">Option A</option>
    <option value="value2">Option B</option>
    <option value="value3">Option C</option>
  </select>
</form>

Guidance

When to use the select component

  • Use sparingly. Use the select component only when a user needs to choose from about seven to 15 possible options and you have limited space to display the options.

When to consider something else

  • Fewer than seven options. Use radio buttons instead.
  • More than 15 options. If the list of options is very long, consider using a combo box.
  • Multi-select. If you need to allow users to choose more than one option at once. Users often don’t understand how to choose multiple items from select elements. Use checkboxes instead.
  • Site navigation. Use the navigation components instead.

Usability guidance

  • Make sure to test. Test select menus thoroughly with members of your target audience. Several usability experts suggest they should be the “UI of last resort.” Many users find them confusing and difficult to use.
  • Avoid dependent options. Avoid making options in one select menu change based on the input to another. Users often don’t understand how choosing an item in one impacts another.
  • Use a good default. When most users will (or should) pick a particular option, make it the default: <option selected="selected">Default</option>
  • Avoid auto-submission. Don’t use JavaScript to automatically submit the form (or do anything else) when an option is chosen. Offer a “submit” button at the end of the form instead. Users often change their choices multiple times. Auto-submission is also less accessible.

Accessibility guidance

  • Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
  • Always use a label. Make sure your select element has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).
  • Avoid auto-submission. Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.

Package

  • Package usage: @forward "usa-select";
  • Dependencies: uswds-fonts, usa-icon, usa-input

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date USWDS version Affects Breaking Description
2023-08-23 3.6.0
  • Styles
 No

Added ellipses to overflow text in the multiple select variant. This provides a clear indication to users that there is text that extends beyond the select width. More information: uswds#5268

2023-06-09 3.5.0
  • Accessibility
  • Styles
 No

Improved consistency and visibility of disabled styles. Form elements with the disabled or aria-disabled attribute now get consistent styling and have proper color contrast. More information: uswds#5063

2023-06-09 3.5.0
  • Accessibility
  • Styles
 No

Improved consistency of disabled styles in forced colors mode. More information: uswds#5295

2022-08-05 3.1.0
  • Styles
 No

Improved styling for select when the multiple attribute is present. According to the HTML5 standard, a select element whose multiple attribute is present is “expected to render as an inline-block box whose height is the height necessary to contain as many rows for items as given by the element’s display size, or four rows if the [size] attribute is absent.” Our select now conforms to this guidance. More information: uswds#4766

2022-04-28 3.0.0
  • Assets
  • JavaScript
  • Styles
 Breaking

Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656

2022-04-28 N/A
  • Guidance
 No

Renamed component from “dropdown” to “select”. More information: uswds-site#1538