Skip to content

role combobox

Select draft v0.1.0

Lets people choose one option from a list that opens on demand.

A select shows the current choice in a closed box and opens a list of options when activated; the browser or the platform renders the list, its keyboard interaction and its announcements. It fits a choice among many known values (a country, a time zone, a sort order) where showing every option at once would take too much room. Two to about six options worth reading side by side are a Radio group; a list of actions is a Dropdown.

Playground

JSON array of option entries ("part": "option" for a option).

HTML 
<div class="ds-select" data-size="medium">
  <label
    class="ds-select__label"
    data-part="label"
    for="ds-select-23"
  >Country</label>
  <div class="ds-select__field" data-part="field">
    <select
      class="ds-select__control"
      data-part="control"
      id="ds-select-23"
    >
      <option
        class="ds-select__option"
        data-part="option"
        value=""
        disabled
        selected
      >Choose a country</option>
      <option
        class="ds-select__option"
        data-part="option"
        value="fr"
      >France</option>
      <option
        class="ds-select__option"
        data-part="option"
        value="de"
      >Germany</option>
      <option
        class="ds-select__option"
        data-part="option"
        value="es"
      >Spain</option>
      <option
        class="ds-select__option"
        data-part="option"
        value="uk"
      >United Kingdom</option>
    </select>
    <span
      class="ds-select__indicator"
      data-part="indicator"
      aria-hidden="true"
    >expand_more</span>
  </div>
</div>