An official website of the United States GovernmentSelect
Overview
Select a single option from a list.
Preview
View Kitchen SinkOften referred to as a “drop down” or “pull down” menu, its most common usage is as a nested component of theForm Fields component.
Variants
The style for<select> components always start withclass="fsa-select", modifiable with one or multiplefsa-select--[VARIANT].
<selectclass="fsa-select fsa-select--[VARIANT]"name="Options"> ...</select>Default
<selectclass="fsa-select"name="Options lorem"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select>Fill
<selectclass="fsa-select fsa-select--fill"name="Options ipsum"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select>Small
<selectclass="fsa-select fsa-select--small"name="Options dolor"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select>Large
<selectclass="fsa-select fsa-select--large"name="Options sit"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select>Example: opt-group
<optgroup> allows for grouping of multiple<option> within a<select> element.
<selectclass="fsa-select"id="lealtad-de-beisbol"name="lealtad-de-beisbol"><optgrouplabel="American League West"><optionvalue="Houston Astros">Houston Astros</option><optionvalue="Los Angeles Angels of Anaheim">Los Angeles Angels of Anaheim</option><optionvalue="Oakland Athletics">Oakland Athletics</option><optionvalue="Seattle Mariners">Seattle Mariners</option><optionvalue="Texas Rangers">Texas Rangers</option></optgroup><optgrouplabel="American League East"disabled=""title="Disabled group"><optionvalue="Baltimore Orioles">Baltimore Orioles</option><optionvalue="Boston Red Sox">Boston Red Sox</option><optionvalue="New York Yankees">New York Yankees</option><optionvalue="Tampa Bay Rays">Tampa Bay Rays</option><optionvalue="Toronto Blue Jays">Toronto Blue Jays</option></optgroup><optgrouplabel="American League Central"><optionvalue="Chicago White Sox">Chicago White Sox</option><optionvalue="Cleveland Indians">Cleveland Indians</option><optionvalue="Detroit Tigers">Detroit Tigers</option><optionvalue="Kansas City Royals">Kansas City Royals</option><optionvalue="Minnesota Twins">Minnesota Twins</option></optgroup><optgrouplabel="National League East"><optionvalue="Atlanta Braves">Atlanta Braves</option><optionvalue="Miami Marlins">Miami Marlins</option><optionvalue="New York Mets">New York Mets</option><optionvalue="Philadelphia Phillies">Philadelphia Phillies</option><optionvalue="Washington Nationals">Washington Nationals</option></optgroup><optgrouplabel="National League Central"><optionvalue="Chicago Cubs">Chicago Cubs</option><optionvalue="Cincinnati Reds">Cincinnati Reds</option><optionvalue="Milwaukee Brewers">Milwaukee Brewers</option><optionvalue="Pittsburgh Pirates">Pittsburgh Pirates</option><optionvalue="St. Louis Cardinals">St. Louis Cardinals</option></optgroup><optgrouplabel="National League West"><optionvalue="Arizona Diamondbacks">Arizona Diamondbacks</option><optionvalue="Colorado Rockies">Colorado Rockies</option><optionvalue="Los Angeles Dodgers"selected="selected">Los Angeles Dodgers</option><optionvalue="San Diego Padres">San Diego Padres</option><optionvalue="San Francisco Giants">San Francisco Giants</option></optgroup></select>Within aField
Instructional message here
<divclass="fsa-field"><labelclass="fsa-field__label"for="UNIQUE-ID-hshhsjtext">Label<spanclass="fsa-field__label-desc">Required</span></label><selectclass="fsa-select fsa-field__item"id="UNIQUE-ID-hshhsjtext"aria-describedby="lorem-hshhsjtext-help-4"aria-required="true"name="UNIQUE-ID-hshhsjtext"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select><spanclass="fsa-field__help"id="lorem-hshhsjtext-help-4">Instructional message here</span></div>States
Error
<selectclass="fsa-select fsa-select--error"name="Options amet"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select>Disabled
Disabled select components do not have aclass="fsa-select--[VARIANT]", instead using thedisabled attribute.
<selectclass="fsa-select"disabled="disabled"name="Options quis"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select>Responsive
Selectively override several style properties at each Media Query breakpoint.
fsa-select--[VARIANTS]@[BREAKPOINT], whereVARIANTS is one or more ofsmall,medium,large,fill, orinline, andBREAKPOINT is one ofs,m,l, orxl
View on alarger screen or device to fully appreciate Responsive Web Design rendering.
Usage
Use
- Use sparingly — only when a user needs to choose from about seven to 15 possible options and you have limited space to display the options.
Don’t Use
- If the list of options is very short. Useradio buttons instead.
- If the list of options is very long. Let users type the same information into atext input that suggests possible options instead.
- Avoid using the
multipleattribute, use theSelect Multi component instead. Users often don’t understand how to select multiple items from theselectelement (by holding down a modifier key). - For site navigation.
UI Component
Form Fields
Data entry from a variety of structured form controls.
UI Component
Global Navigation
Display a global list of sections, topics, or actions.
UI Component
Search
Find specific content via user input.
Accessibility
Always refer to theAccessibility Forms Guide for overall guidance.
If you customize the select element, ensure they continue to meet the the accessibility requirements that apply to all form controls.
- Make sure your dropdown has an accessible label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the dropdown read “Select a state” by default).
- 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.
General Guidance
- Test dropdowns 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 making options in one dropdown menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another.
- When most users will (or should) pick a particular option, make it the default:
<option selected="selected">Default</option> - 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. Users often change their choices multiple times, particularly if interacting with a form solely with keyboard. Auto-submission is also less accessible.