Dropdown: single-select | FEC Pattern Library

A dropdown allows users to select options from a hidden list

Single select dropdowns allow users to select one option.

When to use

When a user needs to choose from about seven to 15 possible options and you have limited space to display the options. For longer lists, ideally users would be able to use keyboard typing to start to match a result (this capability is currently not in place in FEC’s site but would be especially helpful for dropdowns of state lists).

When to consider something else

If the list of options is very short. Use radio buttons or checkboxes instead.
If the list of options is very long. Let users type the same information into a text input that suggests possible options instead (search with typeahead matching).

Guidance from the U.S. Web Design System

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.

GitHub issues

#297: Implement new button styles

<div id="filters" class="filters is-open" style="border: none; padding: 20px;"> <div id="election_year-field" class="filter js-filter" data-filter="election" data-name="election_year" data-cycle-name="cycle" data-full-name="election_full" data-duration="4" data-default-cycle="2016"> <label class="label" for="election_year">Election year</label> <select id="election_year" name="election_year" class="js-election select--full" tabindex="0"> <option value="2016">2016</option> <option value="2012">2012</option> <option value="2008">2008</option> <option value="2004">2004</option> <option value="2000">2000</option> <option value="1996">1996</option> <option value="1992">1992</option> <option value="1988">1988</option> <option value="1984">1984</option> <option value="1980">1980</option> </select> </div> </div>