When to use

  • When a user needs to select multiple options from a 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" style="border: none;">
        <fieldset class="js-dropdown js-filter" data-filter="checkbox">
            <legend class="label" for="state">State or Territory</legend>
            <ul class="dropdown__selected"></ul>
            <div class="dropdown">
                <button type="button" class="dropdown__button button--alt" data-name="contributor_state" aria-haspopup="true" tabindex="0">More</button>
                <div id="state-dropdown" class="dropdown__panel ps-container ps-active-y" aria-hidden="true" aria-label="More options">
                    <ul class="dropdown__list">
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-AK" type="checkbox" value="AK" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-AK">Alaska</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-AL" type="checkbox" value="AL" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-AL">Alabama</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-AR" type="checkbox" value="AR" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-AR">Arkansas</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-AS" type="checkbox" value="AS" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-AS">American Samoa</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-AZ" type="checkbox" value="AZ" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-AZ">Arizona</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-CA" type="checkbox" value="CA" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-CA">California</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-CO" type="checkbox" value="CO" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-CO">Colorado</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-CT" type="checkbox" value="CT" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-CT">Connecticut</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-DC" type="checkbox" value="DC" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-DC">District of Columbia</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-DE" type="checkbox" value="DE" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-DE">Delaware</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-FL" type="checkbox" value="FL" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-FL">Florida</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-GA" type="checkbox" value="GA" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-GA">Georgia</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-GU" type="checkbox" value="GU" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-GU">Guam</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-HI" type="checkbox" value="HI" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-HI">Hawaii</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-IA" type="checkbox" value="IA" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-IA">Iowa</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-ID" type="checkbox" value="ID" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-ID">Idaho</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-IL" type="checkbox" value="IL" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-IL">Illinois</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-IN" type="checkbox" value="IN" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-IN">Indiana</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-KS" type="checkbox" value="KS" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-KS">Kansas</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-KY" type="checkbox" value="KY" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-KY">Kentucky</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-LA" type="checkbox" value="LA" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-LA">Louisiana</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-MA" type="checkbox" value="MA" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-MA">Massachusetts</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-MD" type="checkbox" value="MD" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-MD">Maryland</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-ME" type="checkbox" value="ME" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-ME">Maine</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-MI" type="checkbox" value="MI" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-MI">Michigan</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-MN" type="checkbox" value="MN" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-MN">Minnesota</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-MO" type="checkbox" value="MO" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-MO">Missouri</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-MP" type="checkbox" value="MP" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-MP">Northern Mariana Islands</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-MS" type="checkbox" value="MS" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-MS">Mississippi</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-MT" type="checkbox" value="MT" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-MT">Montana</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-NC" type="checkbox" value="NC" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-NC">North Carolina</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-ND" type="checkbox" value="ND" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-ND">North Dakota</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-NE" type="checkbox" value="NE" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-NE">Nebraska</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-NH" type="checkbox" value="NH" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-NH">New Hampshire</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-NJ" type="checkbox" value="NJ" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-NJ">New Jersey</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-NM" type="checkbox" value="NM" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-NM">New Mexico</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-NV" type="checkbox" value="NV" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-NV">Nevada</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-NY" type="checkbox" value="NY" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-NY">New York</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-OH" type="checkbox" value="OH" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-OH">Ohio</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-OK" type="checkbox" value="OK" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-OK">Oklahoma</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-OR" type="checkbox" value="OR" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-OR">Oregon</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-PA" type="checkbox" value="PA" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-PA">Pennsylvania</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-PR" type="checkbox" value="PR" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-PR">Puerto Rico</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-RI" type="checkbox" value="RI" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-RI">Rhode Island</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-SC" type="checkbox" value="SC" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-SC">South Carolina</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-SD" type="checkbox" value="SD" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-SD">South Dakota</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-TN" type="checkbox" value="TN" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-TN">Tennessee</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-TX" type="checkbox" value="TX" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-TX">Texas</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-UT" type="checkbox" value="UT" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-UT">Utah</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-VA" type="checkbox" value="VA" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-VA">Virginia</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-VI" type="checkbox" value="VI" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-VI">Virgin Islands</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-VT" type="checkbox" value="VT" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-VT">Vermont</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-WA" type="checkbox" value="WA" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-WA">Washington</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-WI" type="checkbox" value="WI" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-WI">Wisconsin</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-WV" type="checkbox" value="WV" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-WV">West Virginia</label>
                        </li>
                        <li class="dropdown__item">
                            <input name="contributor_state" id="state-checkbox-WY" type="checkbox" value="WY" tabindex="0">
                            <label class="dropdown__value" for="state-checkbox-WY">Wyoming</label>
                        </li>
                    </ul>
                </div>
        </fieldset>
    </div>
    </fieldset>
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
  <div class="filter" style="border: none;">
    <fieldset class="js-dropdown js-filter" data-filter="checkbox">
      <legend class="label" for="state">State or Territory</legend>
      <ul class="dropdown__selected"></ul>
      <div class="dropdown">
        <button type="button" class="dropdown__button button--alt" data-name="contributor_state" aria-haspopup="true" tabindex="0">More</button>
        <div id="state-dropdown" class="dropdown__panel ps-container ps-active-y" aria-hidden="true" aria-label="More options">
          <ul class="dropdown__list">
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-AK" type="checkbox" value="AK" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-AK">Alaska</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-AL" type="checkbox" value="AL" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-AL">Alabama</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-AR" type="checkbox" value="AR" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-AR">Arkansas</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-AS" type="checkbox" value="AS" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-AS">American Samoa</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-AZ" type="checkbox" value="AZ" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-AZ">Arizona</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-CA" type="checkbox" value="CA" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-CA">California</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-CO" type="checkbox" value="CO" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-CO">Colorado</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-CT" type="checkbox" value="CT" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-CT">Connecticut</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-DC" type="checkbox" value="DC" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-DC">District of Columbia</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-DE" type="checkbox" value="DE" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-DE">Delaware</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-FL" type="checkbox" value="FL" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-FL">Florida</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-GA" type="checkbox" value="GA" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-GA">Georgia</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-GU" type="checkbox" value="GU" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-GU">Guam</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-HI" type="checkbox" value="HI" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-HI">Hawaii</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-IA" type="checkbox" value="IA" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-IA">Iowa</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-ID" type="checkbox" value="ID" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-ID">Idaho</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-IL" type="checkbox" value="IL" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-IL">Illinois</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-IN" type="checkbox" value="IN" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-IN">Indiana</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-KS" type="checkbox" value="KS" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-KS">Kansas</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-KY" type="checkbox" value="KY" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-KY">Kentucky</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-LA" type="checkbox" value="LA" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-LA">Louisiana</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-MA" type="checkbox" value="MA" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-MA">Massachusetts</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-MD" type="checkbox" value="MD" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-MD">Maryland</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-ME" type="checkbox" value="ME" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-ME">Maine</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-MI" type="checkbox" value="MI" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-MI">Michigan</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-MN" type="checkbox" value="MN" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-MN">Minnesota</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-MO" type="checkbox" value="MO" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-MO">Missouri</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-MP" type="checkbox" value="MP" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-MP">Northern Mariana Islands</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-MS" type="checkbox" value="MS" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-MS">Mississippi</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-MT" type="checkbox" value="MT" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-MT">Montana</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-NC" type="checkbox" value="NC" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-NC">North Carolina</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-ND" type="checkbox" value="ND" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-ND">North Dakota</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-NE" type="checkbox" value="NE" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-NE">Nebraska</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-NH" type="checkbox" value="NH" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-NH">New Hampshire</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-NJ" type="checkbox" value="NJ" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-NJ">New Jersey</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-NM" type="checkbox" value="NM" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-NM">New Mexico</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-NV" type="checkbox" value="NV" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-NV">Nevada</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-NY" type="checkbox" value="NY" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-NY">New York</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-OH" type="checkbox" value="OH" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-OH">Ohio</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-OK" type="checkbox" value="OK" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-OK">Oklahoma</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-OR" type="checkbox" value="OR" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-OR">Oregon</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-PA" type="checkbox" value="PA" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-PA">Pennsylvania</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-PR" type="checkbox" value="PR" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-PR">Puerto Rico</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-RI" type="checkbox" value="RI" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-RI">Rhode Island</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-SC" type="checkbox" value="SC" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-SC">South Carolina</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-SD" type="checkbox" value="SD" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-SD">South Dakota</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-TN" type="checkbox" value="TN" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-TN">Tennessee</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-TX" type="checkbox" value="TX" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-TX">Texas</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-UT" type="checkbox" value="UT" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-UT">Utah</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-VA" type="checkbox" value="VA" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-VA">Virginia</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-VI" type="checkbox" value="VI" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-VI">Virgin Islands</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-VT" type="checkbox" value="VT" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-VT">Vermont</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-WA" type="checkbox" value="WA" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-WA">Washington</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-WI" type="checkbox" value="WI" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-WI">Wisconsin</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-WV" type="checkbox" value="WV" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-WV">West Virginia</label>
            </li>
            <li class="dropdown__item">
              <input name="contributor_state" id="state-checkbox-WY" type="checkbox" value="WY" tabindex="0">
              <label class="dropdown__value" for="state-checkbox-WY">Wyoming</label>
            </li>
          </ul>
      </div>
    </fieldset>
  </div>
</fieldset>
/* No context defined. */
  • Handle: @multi-select
  • Preview:
  • Filesystem Path: components/02-components/filters/03-dropdowns/02-multi-select/multi-select.html