Skip to main content

Combo Box

A combo box helps users select an item from a large list of options.


Default

Component Preview


Component Code

<label class="usa-label" for="fruit">Select a fruit</label>
<div class="usa-combo-box">
  <select class="usa-select" name="fruit" id="fruit">
    <option value>Select a fruit</option>
    <option value="apple">Apple</option>
    <option value="apricot">Apricot</option>
    <option value="avocado">Avocado</option>
    <option value="banana">Banana</option>
    <option value="blackberry">Blackberry</option>
    <option value="blueberry">Blueberry</option>
    <option value="cherry">Cherry</option>
    <!-- Additional options... -->
  </select>
</div>


Guidance

When to use the combo box component

More than 15 options.
Use a combo box when there are more than 15 choices in a drop-down list. With so many options, users may find it difficult to navigate with scrolling only.
Limited space.
Use a combo box for presenting options when screen real estate is limited.

When to consider something else

Limited choices.
When the number of options is small, you can continue to use a select or radio element.

Usability guidance

Use option strings familiar to users.
The combo box filters by matching strings. Include option text that includes familiar strings or spellings (for example, if using the combobox with a state list, include the postal abbreviation in the option text: District of Columbia (DC)).
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 using <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 selected. Offer a "submit" button at the end of the form instead.

Accessibility guidance

Known assistive technology issues.
Testing with people using assistive technology revealed usability concerns that require additional investigation. At this time, consider using a Select component instead of a Combo box if accessibility is critical.
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.
Avoid auto-submission.
Don't use JavaScript to automatically submit the form when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.

USWDS Documentation

For more guidance, view the USWDS Combo Box Component Documentation.



Settings

This component has no settings.



Variants

This component has no variants.

Looking for U.S. government information and services?
Visit USA.gov