FEC Pattern Library

Dropdown: multi-select with suggestions

When to use

  • When analytics or research can show that certain options are applied much more often than others, it can be helpful to surface those most common options outside of the hidden list.

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.

<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
    <div class="filter">
        <fieldset class="js-dropdown js-filter" data-filter="checkbox">
            <label for="party" class="label">Political party</label>
            <ul class="dropdown__selected">
                <li class="dropdown__item">
                    <input id="party-DEM" data-prefix="" name="party" type="checkbox" value="DEM" tabindex="0">
                    <label class="dropdown__value" for="party-DEM">Democratic Party</label>
                </li>
                <li class="dropdown__item">
                    <input id="party-REP" data-prefix="" name="party" type="checkbox" value="REP" tabindex="0">
                    <label class="dropdown__value" for="party-REP">Republican Party</label>
                </li>
            </ul>
            <div class="dropdown">
                <button type="button" class="dropdown__button button--alt" data-name="party" aria-haspopup="true" tabindex="0">More</button>
                <div class="dropdown__panel" aria-hidden="true" aria-label="More options">
                    <ul class="dropdown__list">
                        <li class="dropdown__item">
                            <input id="party-AIC" data-prefix="" name="party" type="checkbox" value="AIC" tabindex="0">
                            <label class="dropdown__value" for="party-AIC">American Independent Conservative</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-AIP" data-prefix="" name="party" type="checkbox" value="AIP" tabindex="0">
                            <label class="dropdown__value" for="party-AIP">American Independent Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-AMP" data-prefix="" name="party" type="checkbox" value="AMP" tabindex="0">
                            <label class="dropdown__value" for="party-AMP">American Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-APF" data-prefix="" name="party" type="checkbox" value="APF" tabindex="0">
                            <label class="dropdown__value" for="party-APF">American People's Freedom Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-CIT" data-prefix="" name="party" type="checkbox" value="CIT" tabindex="0">
                            <label class="dropdown__value" for="party-CIT">Citizens' Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-CMP" data-prefix="" name="party" type="checkbox" value="CMP" tabindex="0">
                            <label class="dropdown__value" for="party-CMP">Commonwealth Party of the US</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-COM" data-prefix="" name="party" type="checkbox" value="COM" tabindex="0">
                            <label class="dropdown__value" for="party-COM">Communist Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-CRV" data-prefix="" name="party" type="checkbox" value="CRV" tabindex="0">
                            <label class="dropdown__value" for="party-CRV">Conservative Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-CST" data-prefix="" name="party" type="checkbox" value="CST" tabindex="0">
                            <label class="dropdown__value" for="party-CST">Constitutional</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-DC" data-prefix="" name="party" type="checkbox" value="DC" tabindex="0">
                            <label class="dropdown__value" for="party-DC">Democratic/Conservative</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-DFL" data-prefix="" name="party" type="checkbox" value="DFL" tabindex="0">
                            <label class="dropdown__value" for="party-DFL">Democratic-Farm-Labor</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-FLP" data-prefix="" name="party" type="checkbox" value="FLP" tabindex="0">
                            <label class="dropdown__value" for="party-FLP">Freedom Labor Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-GRE" data-prefix="" name="party" type="checkbox" value="GRE" tabindex="0">
                            <label class="dropdown__value" for="party-GRE">Green Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-GWP" data-prefix="" name="party" type="checkbox" value="GWP" tabindex="0">
                            <label class="dropdown__value" for="party-GWP">George Wallace Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-HRP" data-prefix="" name="party" type="checkbox" value="HRP" tabindex="0">
                            <label class="dropdown__value" for="party-HRP">Human Rights Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-IAP" data-prefix="" name="party" type="checkbox" value="IAP" tabindex="0">
                            <label class="dropdown__value" for="party-IAP">Independent American Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-ICD" data-prefix="" name="party" type="checkbox" value="ICD" tabindex="0">
                            <label class="dropdown__value" for="party-ICD">Independent Conserv. Democratic</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-IGD" data-prefix="" name="party" type="checkbox" value="IGD" tabindex="0">
                            <label class="dropdown__value" for="party-IGD">Industrial Government Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-IND" data-prefix="" name="party" type="checkbox" value="IND" tabindex="0">
                            <label class="dropdown__value" for="party-IND">Independent</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-LAB" data-prefix="" name="party" type="checkbox" value="LAB" tabindex="0">
                            <label class="dropdown__value" for="party-LAB">US Labor Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-LBL" data-prefix="" name="party" type="checkbox" value="LBL" tabindex="0">
                            <label class="dropdown__value" for="party-LBL">Liberal Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-LBR" data-prefix="" name="party" type="checkbox" value="LBR" tabindex="0">
                            <label class="dropdown__value" for="party-LBR">Labor Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-LBU" data-prefix="" name="party" type="checkbox" value="LBU" tabindex="0">
                            <label class="dropdown__value" for="party-LBU">Liberty Union Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-LFT" data-prefix="" name="party" type="checkbox" value="LFT" tabindex="0">
                            <label class="dropdown__value" for="party-LFT">Less Federal Taxes</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-LIB" data-prefix="" name="party" type="checkbox" value="LIB" tabindex="0">
                            <label class="dropdown__value" for="party-LIB">Libertarian</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-LRU" data-prefix="" name="party" type="checkbox" value="LRU" tabindex="0">
                            <label class="dropdown__value" for="party-LRU">La Raza Unida</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-NAP" data-prefix="" name="party" type="checkbox" value="NAP" tabindex="0">
                            <label class="dropdown__value" for="party-NAP">Prohibition Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-NDP" data-prefix="" name="party" type="checkbox" value="NDP" tabindex="0">
                            <label class="dropdown__value" for="party-NDP">National Democratic Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-NLP" data-prefix="" name="party" type="checkbox" value="NLP" tabindex="0">
                            <label class="dropdown__value" for="party-NLP">Natural Law Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-PAF" data-prefix="" name="party" type="checkbox" value="PAF" tabindex="0">
                            <label class="dropdown__value" for="party-PAF">Peace and Freedom</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-PFD" data-prefix="" name="party" type="checkbox" value="PFD" tabindex="0">
                            <label class="dropdown__value" for="party-PFD">Peace Freedom Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-POP" data-prefix="" name="party" type="checkbox" value="POP" tabindex="0">
                            <label class="dropdown__value" for="party-POP">People Over Politics</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-PPD" data-prefix="" name="party" type="checkbox" value="PPD" tabindex="0">
                            <label class="dropdown__value" for="party-PPD">Protest, Progress, Dignity</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-PPY" data-prefix="" name="party" type="checkbox" value="PPY" tabindex="0">
                            <label class="dropdown__value" for="party-PPY">People's Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-REF" data-prefix="" name="party" type="checkbox" value="REF" tabindex="0">
                            <label class="dropdown__value" for="party-REF">Reform Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-RTL" data-prefix="" name="party" type="checkbox" value="RTL" tabindex="0">
                            <label class="dropdown__value" for="party-RTL">Right to Life</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-SLP" data-prefix="" name="party" type="checkbox" value="SLP" tabindex="0">
                            <label class="dropdown__value" for="party-SLP">Socialist Labor Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-SUS" data-prefix="" name="party" type="checkbox" value="SUS" tabindex="0">
                            <label class="dropdown__value" for="party-SUS">Socialist Party USA</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-SWP" data-prefix="" name="party" type="checkbox" value="SWP" tabindex="0">
                            <label class="dropdown__value" for="party-SWP">Socialist Workers Party</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-THD" data-prefix="" name="party" type="checkbox" value="THD" tabindex="0">
                            <label class="dropdown__value" for="party-THD">Theo-Dem</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-TWR" data-prefix="" name="party" type="checkbox" value="TWR" tabindex="0">
                            <label class="dropdown__value" for="party-TWR">Taxpayers Without Representation</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-TX" data-prefix="" name="party" type="checkbox" value="TX" tabindex="0">
                            <label class="dropdown__value" for="party-TX">Taxpayers</label>
                        </li>
                        <li class="dropdown__item">
                            <input id="party-USP" data-prefix="" name="party" type="checkbox" value="USP" tabindex="0">
                            <label class="dropdown__value" for="party-USP">US People's Party</label>
                        </li>
                    </ul>
                </div>
            </div>
        </fieldset>
    </div>
</div>
 
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
  <div class="filter">
    <fieldset class="js-dropdown js-filter" data-filter="checkbox">
      <label for="party" class="label">Political party</label>
      <ul class="dropdown__selected">
        <li class="dropdown__item">
          <input id="party-DEM" data-prefix="" name="party" type="checkbox" value="DEM" tabindex="0">
          <label class="dropdown__value" for="party-DEM">Democratic Party</label>
        </li>
        <li class="dropdown__item">
          <input id="party-REP" data-prefix="" name="party" type="checkbox" value="REP" tabindex="0">
          <label class="dropdown__value" for="party-REP">Republican Party</label>
        </li>
      </ul>
      <div class="dropdown">
        <button type="button" class="dropdown__button button--alt" data-name="party" aria-haspopup="true" tabindex="0">More</button>
        <div class="dropdown__panel" aria-hidden="true" aria-label="More options">
          <ul class="dropdown__list">
            <li class="dropdown__item">
              <input id="party-AIC" data-prefix="" name="party" type="checkbox" value="AIC" tabindex="0">
              <label class="dropdown__value" for="party-AIC">American Independent Conservative</label>
            </li>
            <li class="dropdown__item">
              <input id="party-AIP" data-prefix="" name="party" type="checkbox" value="AIP" tabindex="0">
              <label class="dropdown__value" for="party-AIP">American Independent Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-AMP" data-prefix="" name="party" type="checkbox" value="AMP" tabindex="0">
              <label class="dropdown__value" for="party-AMP">American Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-APF" data-prefix="" name="party" type="checkbox" value="APF" tabindex="0">
              <label class="dropdown__value" for="party-APF">American People's Freedom Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-CIT" data-prefix="" name="party" type="checkbox" value="CIT" tabindex="0">
              <label class="dropdown__value" for="party-CIT">Citizens' Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-CMP" data-prefix="" name="party" type="checkbox" value="CMP" tabindex="0">
              <label class="dropdown__value" for="party-CMP">Commonwealth Party of the US</label>
            </li>
            <li class="dropdown__item">
              <input id="party-COM" data-prefix="" name="party" type="checkbox" value="COM" tabindex="0">
              <label class="dropdown__value" for="party-COM">Communist Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-CRV" data-prefix="" name="party" type="checkbox" value="CRV" tabindex="0">
              <label class="dropdown__value" for="party-CRV">Conservative Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-CST" data-prefix="" name="party" type="checkbox" value="CST" tabindex="0">
              <label class="dropdown__value" for="party-CST">Constitutional</label>
            </li>
            <li class="dropdown__item">
              <input id="party-DC" data-prefix="" name="party" type="checkbox" value="DC" tabindex="0">
              <label class="dropdown__value" for="party-DC">Democratic/Conservative</label>
            </li>
            <li class="dropdown__item">
              <input id="party-DFL" data-prefix="" name="party" type="checkbox" value="DFL" tabindex="0">
              <label class="dropdown__value" for="party-DFL">Democratic-Farm-Labor</label>
            </li>
            <li class="dropdown__item">
              <input id="party-FLP" data-prefix="" name="party" type="checkbox" value="FLP" tabindex="0">
              <label class="dropdown__value" for="party-FLP">Freedom Labor Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-GRE" data-prefix="" name="party" type="checkbox" value="GRE" tabindex="0">
              <label class="dropdown__value" for="party-GRE">Green Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-GWP" data-prefix="" name="party" type="checkbox" value="GWP" tabindex="0">
              <label class="dropdown__value" for="party-GWP">George Wallace Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-HRP" data-prefix="" name="party" type="checkbox" value="HRP" tabindex="0">
              <label class="dropdown__value" for="party-HRP">Human Rights Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-IAP" data-prefix="" name="party" type="checkbox" value="IAP" tabindex="0">
              <label class="dropdown__value" for="party-IAP">Independent American Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-ICD" data-prefix="" name="party" type="checkbox" value="ICD" tabindex="0">
              <label class="dropdown__value" for="party-ICD">Independent Conserv. Democratic</label>
            </li>
            <li class="dropdown__item">
              <input id="party-IGD" data-prefix="" name="party" type="checkbox" value="IGD" tabindex="0">
              <label class="dropdown__value" for="party-IGD">Industrial Government Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-IND" data-prefix="" name="party" type="checkbox" value="IND" tabindex="0">
              <label class="dropdown__value" for="party-IND">Independent</label>
            </li>
            <li class="dropdown__item">
              <input id="party-LAB" data-prefix="" name="party" type="checkbox" value="LAB" tabindex="0">
              <label class="dropdown__value" for="party-LAB">US Labor Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-LBL" data-prefix="" name="party" type="checkbox" value="LBL" tabindex="0">
              <label class="dropdown__value" for="party-LBL">Liberal Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-LBR" data-prefix="" name="party" type="checkbox" value="LBR" tabindex="0">
              <label class="dropdown__value" for="party-LBR">Labor Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-LBU" data-prefix="" name="party" type="checkbox" value="LBU" tabindex="0">
              <label class="dropdown__value" for="party-LBU">Liberty Union Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-LFT" data-prefix="" name="party" type="checkbox" value="LFT" tabindex="0">
              <label class="dropdown__value" for="party-LFT">Less Federal Taxes</label>
            </li>
            <li class="dropdown__item">
              <input id="party-LIB" data-prefix="" name="party" type="checkbox" value="LIB" tabindex="0">
              <label class="dropdown__value" for="party-LIB">Libertarian</label>
            </li>
            <li class="dropdown__item">
              <input id="party-LRU" data-prefix="" name="party" type="checkbox" value="LRU" tabindex="0">
              <label class="dropdown__value" for="party-LRU">La Raza Unida</label>
            </li>
            <li class="dropdown__item">
              <input id="party-NAP" data-prefix="" name="party" type="checkbox" value="NAP" tabindex="0">
              <label class="dropdown__value" for="party-NAP">Prohibition Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-NDP" data-prefix="" name="party" type="checkbox" value="NDP" tabindex="0">
              <label class="dropdown__value" for="party-NDP">National Democratic Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-NLP" data-prefix="" name="party" type="checkbox" value="NLP" tabindex="0">
              <label class="dropdown__value" for="party-NLP">Natural Law Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-PAF" data-prefix="" name="party" type="checkbox" value="PAF" tabindex="0">
              <label class="dropdown__value" for="party-PAF">Peace and Freedom</label>
            </li>
            <li class="dropdown__item">
              <input id="party-PFD" data-prefix="" name="party" type="checkbox" value="PFD" tabindex="0">
              <label class="dropdown__value" for="party-PFD">Peace Freedom Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-POP" data-prefix="" name="party" type="checkbox" value="POP" tabindex="0">
              <label class="dropdown__value" for="party-POP">People Over Politics</label>
            </li>
            <li class="dropdown__item">
              <input id="party-PPD" data-prefix="" name="party" type="checkbox" value="PPD" tabindex="0">
              <label class="dropdown__value" for="party-PPD">Protest, Progress, Dignity</label>
            </li>
            <li class="dropdown__item">
              <input id="party-PPY" data-prefix="" name="party" type="checkbox" value="PPY" tabindex="0">
              <label class="dropdown__value" for="party-PPY">People's Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-REF" data-prefix="" name="party" type="checkbox" value="REF" tabindex="0">
              <label class="dropdown__value" for="party-REF">Reform Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-RTL" data-prefix="" name="party" type="checkbox" value="RTL" tabindex="0">
              <label class="dropdown__value" for="party-RTL">Right to Life</label>
            </li>
            <li class="dropdown__item">
              <input id="party-SLP" data-prefix="" name="party" type="checkbox" value="SLP" tabindex="0">
              <label class="dropdown__value" for="party-SLP">Socialist Labor Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-SUS" data-prefix="" name="party" type="checkbox" value="SUS" tabindex="0">
              <label class="dropdown__value" for="party-SUS">Socialist Party USA</label>
            </li>
            <li class="dropdown__item">
              <input id="party-SWP" data-prefix="" name="party" type="checkbox" value="SWP" tabindex="0">
              <label class="dropdown__value" for="party-SWP">Socialist Workers Party</label>
            </li>
            <li class="dropdown__item">
              <input id="party-THD" data-prefix="" name="party" type="checkbox" value="THD" tabindex="0">
              <label class="dropdown__value" for="party-THD">Theo-Dem</label>
            </li>
            <li class="dropdown__item">
              <input id="party-TWR" data-prefix="" name="party" type="checkbox" value="TWR" tabindex="0">
              <label class="dropdown__value" for="party-TWR">Taxpayers Without Representation</label>
            </li>
            <li class="dropdown__item">
              <input id="party-TX" data-prefix="" name="party" type="checkbox" value="TX" tabindex="0">
              <label class="dropdown__value" for="party-TX">Taxpayers</label>
            </li>
            <li class="dropdown__item">
              <input id="party-USP" data-prefix="" name="party" type="checkbox" value="USP" tabindex="0">
              <label class="dropdown__value" for="party-USP">US People's Party</label>
            </li>
          </ul>
        </div>
      </div>
    </fieldset>
  </div>
</div>
 
/* No context defined. */
  • Handle: @multi-select-with-suggestions
  • Preview:
  • Filesystem Path: components/02-components/filters/03-dropdowns/03-multi-select-with-suggestions/multi-select-with-suggestions.html