Components

Selects

We spent a lot of time not only making our select boxes accessible but a vast improvement over the defaults.

Quick look

A few things to keep in mind:

  1. You can choose to have a default value set or not.
  2. With no default value set, a required select box will fire validation, which the pattern encapsulated.
  3. Selects take up the same footprint as fields.

Try it out

State
  • Alabama
  • Alaska
  • American Samoa
  • Arizona
  • Arkansas
  • California
  • Colorado
  • Connecticut
  • Delaware
  • District of Columbia
  • Federated States of Micronesia
  • Florida
  • Georgia
  • Guam
  • Hawaii
  • Idaho
  • Illinois
  • Indiana
  • Iowa
  • Kansas
  • Kentucky
  • Louisiana
  • Maine
  • Marshall Islands
  • Maryland
  • Massachusetts
  • Michigan
  • Minnesota
  • Mississippi
  • Missouri
  • Montana
  • Nebraska
  • Nevada
  • New Hampshire
  • New Jersey
  • New Mexico
  • New York
  • North Carolina
  • North Dakota
  • Northern Mariana Islands
  • Ohio
  • Oklahoma
  • Oregon
  • Palau
  • Pennsylvania
  • Puerto Rico
  • Rhode Island
  • South Carolina
  • South Dakota
  • Tennessee
  • Texas
  • Utah
  • Vermont
  • Virgin Island
  • Virginia
  • Washington
  • West Virginia
  • Wisconsin
  • Wyoming
Sex
  • Female
  • Male
  • Other
Age group (with default value selected)
  • 18 - 25
  • 26 - 39
  • 40 - 55
  • 55 - 99

Code samples

<div class="dqpl-field-wrap">
  <div class="dqpl-label" id="age-label">Age group (with default value selected)</div>
  <div class="dqpl-select">
    <div class="dqpl-combobox" role="combobox" tabindex="0" aria-autocomplete="none" aria-owns="age-list" aria-expanded="false" aria-labelledby="age-label" aria-required="true" aria-activedescendant="default">
      <div class="dqpl-pseudo-value">18 - 25</div>
    </div>
    <ul class="dqpl-listbox" role="listbox" id="age-list">
      <li class="dqpl-option" id="default" role="option">18 - 25</li>
      <li class="dqpl-option" role="option">26 - 39</li>
      <li class="dqpl-option" role="option">40 - 55</li>
      <li class="dqpl-option" role="option">55 - 99</li>
    </ul>
  </div>
</div>
<div class="dqpl-field-wrap">
  <div class="dqpl-label" id="pizza-label">Do you like pizza?</div>
  <div class="dqpl-select">
    <div class="dqpl-combobox" role="combobox" tabindex="0" aria-readonly="true" aria-autocomplete="none" aria-owns="pizza-list" aria-expanded="false" aria-labelledby="pizza-label"></div>
    <ul class="dqpl-listbox" role="listbox" id="pizza-list">
      <li class="dqpl-option" role="option">Yes</li>
      <li class="dqpl-option" role="option">No</li>
    </ul>
  </div>
</div>

For more information on implementation read thewiki.