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"

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

wrap enables 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>