Listbox Component

Unselected Listbox

By default, no option is selected until interacting with the widget. This matches the behaviour of a native HTML select element.

<span class="listbox">
  <div
    aria-label="Listbox demo 1"
    class="listbox__options"
    role="listbox"
    tabindex="0"
  >
    <div class="listbox__option" role="option" aria-selected="false">
      <span class="listbox__value"> Option 1 </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="listbox__option" role="option" aria-selected="false">
      <span class="listbox__value"> Option 2 </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div
      class="listbox__option"
      role="option"
      aria-selected="false"
      aria-disabled="true"
    >
      <span class="listbox__value"> Option 3 </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="listbox__option" role="option" aria-selected="false">
      <span class="listbox__value"> Option 4 </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
  </div>
</span>

Selected Listbox

An initial selection can be specified by applying the aria-selected state to a single option.

<div class="listbox">
  <div
    aria-label="Listbox demo 2"
    class="listbox__options"
    role="listbox"
    tabindex="0"
  >
    <div class="listbox__option" role="option" aria-selected="true">
      <span class="listbox__value"> Option 1 </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="listbox__option" role="option" aria-selected="true">
      <span class="listbox__value"> Option 2 </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="listbox__option" role="option" aria-selected="false">
      <span class="listbox__value"> Option 3 </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
  </div>
</div>

Listbox with subtitles

You can add a subtitle to an option by adding a .listbox__description element.

<div class="listbox">
  <div
    aria-label="Listbox demo 2"
    class="listbox__options"
    role="listbox"
    tabindex="0"
  >
    <div class="listbox__option" role="option" aria-selected="true">
      <span class="listbox__value"> Option 1 </span>
      <span class="listbox__description">
        <span class="clipped"> . </span>
        More info about option 1
      </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="listbox__option" role="option" aria-selected="true">
      <span class="listbox__value"> Option 2 </span>
      <span class="listbox__description">
        <span class="clipped"> . </span>
        More info about option 2
      </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="listbox__option" role="option" aria-selected="false">
      <span class="listbox__value"> Option 3 </span>
      <span class="listbox__description">
        <span class="clipped"> . </span>
        More info about option 3
      </span>
      <svg class="icon icon--16" height="10" width="14">
        <use href="#icon-tick-16" />
      </svg>
    </div>
  </div>
</div>