UI Component Lab 日本語

← All components

Input

Listbox

A list of options that stays open, from which the user picks one (or several).

Time zone

Also known as

ListBox — React Aria
<select size> — HTML

How to recognize it

A bordered box showing several options at once, with a scroll bar when there are more. The chosen option is highlighted.

Variations

Multi-select: Several options can be chosen. In the APG pattern, Space toggles the focused option. With a native <select>, add the multiple attribute (keys differ by browser).

Behavior

Clicking an option or moving to it with the arrow keys selects it.
This demo is a native <select> with the size attribute, so it does not open or close and browsers treat it as a listbox.

Keyboard

Key	Action
`↑ / ↓`	Moves to and selects the previous or next option.
`Home / End`	Moves to the first or last option.
`A–Z`	Jumps to an option starting with the typed characters.

Usage notes

With more than five options, support Home / End; with more than seven, support jumping by typing.
Selection that follows focus is only for single selection. It helps in some cases but can make the listbox much harder to use in others.

Select: A listbox keeps several options visible all the time; a select shows only the chosen option until opened.
Radio: A listbox scrolls and is one tab stop; radio buttons show every option with its own label.

Sources

WAI-ARIA APG: Listbox Pattern (Last checked: 2026-10-20)
MDN: <select> (Last checked: 2026-10-20)