Focusgroup: Listbox Pattern

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 nomemory"

Try it: Use ↓ and ↑ to navigate. Press Enter or Space to select an option.

Apple

Banana

Cherry

Date

Elderberry

Fig

Grape

Honeydew

Up/Down arrows navigate between options
Home and End are not built into focusgroup. Add JavaScript handlers if your listbox pattern requires them
The listbox is a single tab stop. Tab enters, arrows navigate, and Tab exits.
Selection state (aria-selected) is managed by JavaScript. focusgroup handles navigation only.
This demo uses "browse-then-confirm" selection (Enter or Space to select after arrowing). The ARIA APG recommends selection-follows-focus for single-select listboxes; add a focus event handler calling select(item) on each option for that behavior.
<div> children are not natively focusable (the listbox token infers role="option" on each). Give every option tabindex="0" so the browser can focus it. focusgroup collapses those tab stops into one. No manual tabindex="-1" management needed.
listbox has no default axis modifier. The explicit block here applies Up/Down arrow navigation. Without it, no axis would be active.

View source

<div focusgroup="listbox block nomemory"
     aria-label="Favorite fruit"
     aria-multiselectable="false" class="listbox">
    <div class="listbox-option selected" tabindex="0"
         aria-selected="true" focusgroupstart>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

With wrap, navigation continues from the last item back to the first (and vice versa).

focusgroup="listbox block wrap nomemory"

Try it: Navigate to "Mango" (last item), then press ↓ and focus wraps to "Avocado".

Avocado

Coconut

Guava

Kiwi

Mango

wrap makes navigation circular at boundaries
Down from last → first; Up from first → last
Without wrap, navigation stops at the boundaries
Unlike menu and menubar (which wrap by default), listbox does not wrap by default. The wrap token here is an explicit opt-in.

View source

<div focusgroup="listbox block wrap nomemory"
     aria-label="Tropical fruits"
     aria-multiselectable="false" class="listbox">
    <div class="listbox-option selected" tabindex="0"
         aria-selected="true" focusgroupstart>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>