Single-Select Listbox
A selectable list of options with Up/Down arrow navigation. Click or press Enter/Space to select an item.
focusgroup="listbox block"
Try it: Use ↓ and ↑ to
navigate. Press Enter or Space to
select an option. Home and End jump
to the first and last items.
Apple
Banana
Cherry
Date
Elderberry
Fig
Grape
Honeydew
- Up/Down arrows navigate between options
- Home jumps to the first option, End to the last (built into focusgroup)
- The listbox is one tab stop — Tab enters, arrows navigate, Tab exits
- Selection state (
aria-selected) is managed by JavaScript — focusgroup handles navigation only
View source
<div focusgroup="listbox block"
aria-label="Favorite fruit">
<div class="listbox-option selected" tabindex="0"
aria-selected="true">Apple</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Banana</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Cherry</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Date</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Elderberry</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Fig</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Grape</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Honeydew</div>
</div>
Listbox with Wrapping
Adding wrap allows navigation to wrap from the last
item back to the first (and vice versa).
focusgroup="listbox block wrap"
Try it: Navigate to "Mango" (last item), then
press ↓ — focus wraps to "Avocado".
Avocado
Coconut
Guava
Kiwi
Mango
wrapenables circular navigation at boundaries- Down from last → first; Up from first → last
- Without
wrap, navigation stops at the boundaries
View source
<div focusgroup="listbox block wrap"
aria-label="Tropical fruits">
<div class="listbox-option selected" tabindex="0"
aria-selected="true">Avocado</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Coconut</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Guava</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Kiwi</div>
<div class="listbox-option" tabindex="0"
aria-selected="false">Mango</div>
</div>