A listbox is intended for use as a custom, non-form based implementation of the native HTML select element.
By default, no option is selected until interacting with the widget. This matches the behaviour of a native HTML select element.
An initial selection can be specified by applying the aria-selected state to a single option.
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>
<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>
<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>
<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>