Listbox

Listbox

Component preview

An always-visible list of named options where keyboard focus and selection are managed as one composite control.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: option list, selection list, multi-select list

keep all choices visible in a box
a selectable list that does not collapse
use arrows to move through visible options
choose one item from a permanent list
a box of options with the selected row highlighted
show several choices at once for comparison

Try it

Choose from a list

Compare all three behaviors

Shared comparison scenario: A form asks the user to choose one value from a known option set before continuing.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Listbox

Listbox keeps options visible as one composite control; Select hides them in a picker, and Combobox adds an editable query.

Your task

Focus the list, reach Last 30 days with arrows, select it, and verify the selected state remains visible.

Edge case to verify

A disabled custom range is announced, skipped when required by the keyboard model, and never mistaken for the selected value.

Mission

Focus the list, reach Last 30 days with arrows, select it, and verify the selected state remains visible.

Primary state: All presets remain visible, with one active option and one selected value clearly distinguished.

Report period

Last 7 days

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Label

The persistent text that names a control or field.

Use it when

A small set must remain visible for comparison
Keyboard users benefit from rapid option-to-option navigation

Avoid it when

Screen space is scarce and a native Select is sufficient
Items are commands instead of values

Compare similar concepts

Select offers a closed fixed list without text filtering; Combobox includes an editable query, while Listbox keeps options visibly available.

Select

Combobox accepts an editable query and coordinates it with options; Select is closed and fixed, while Listbox is an always-visible option collection.

Combobox

Technical details

Behaviors

Navigate options
Arrow keys move the active option, and selection is announced independently from focus.
Select one value
Choosing an option replaces the previous value and exposes the selected state.

States

Default preset selected
Default preset selected
Last 30 days selected
Last 30 days selected

State transitions

Default preset selected → Last 30 days selected
Arrow navigation reaches Last 30 days and the selection command commits it.
Last 30 days selected → Default preset selected
Navigation returns to the default preset and the selection command commits it.

Test scenarios

Context: A report builder shows five visible date presets and lets the user choose exactly one.
Mission: Focus the list, reach Last 30 days with arrows, select it, and verify the selected state remains visible.
Primary state: All presets remain visible, with one active option and one selected value clearly distinguished.
Edge case: A disabled custom range is announced, skipped when required by the keyboard model, and never mistaken for the selected value.

Accessibility

Role: listbox with option children
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: The listbox is one tab stop; active option and selected option remain programmatically distinct.
Dismissal: The always-visible list does not dismiss; leaving with Tab preserves the committed selection.
Scroll: A long option collection scrolls without moving the page behind it, and the active or selected option stays visible.
Announcement: The list name, option count, active option, selected state, disabled state, and multi-select mode are exposed.
Keyboard: Tab enters the composite control once
Arrow keys move the active option
Space selects when selection does not follow focus
Home and End reach boundaries

Bindings

select[size]
implementationKind
native
nativeElement
select[size]
ariaPattern
listbox
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: A native sized select is used for the simple specimen. A custom ARIA listbox requires full option navigation and selection behavior.
Verify binding source

Sources

WAI-ARIA APG: Listbox Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Listbox: listbox and option semantics plus focus, selection, and keyboard interaction guidance.
WHATWG HTML: The select element
WHATWG · standard · 2026-07-16
Claim covered: Listbox: native select semantics, option selection, form participation, and platform interaction.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.