UI Component Lab 日本語

← All components

Input

Select

Lets the user pick one option from a list that opens on demand.

Also known as

How to recognize it

A box showing the current value with a downward arrow on the right. Opening it shows a list of options.

Behavior

  • Clicking the box opens the list; choosing an option closes it and updates the value.
  • Only options from the list can be chosen; the user cannot type a free value.
  • This demo uses the native <select> element, so the list looks different on each OS and browser.

Keyboard

KeyAction
↑ / ↓Changes the option (opens the list on some platforms).
Space / EnterOpens the list, or confirms the highlighted option.
A–ZJumps to an option starting with the typed character.
EscCloses the list without changing.

Usage notes

  • With five or fewer options, use radio buttons instead. Never use a select for two options.
  • Radio: A select hides the options in a list to save space; radio buttons show every option at once.
  • Menu: A select keeps the chosen option as a form value; a menu runs an action when an item is chosen.
  • Combobox: A select only allows options from the list; a combobox also lets the user type a value outside it.
  • Listbox: A select shows only the chosen option until opened; a listbox keeps several options visible all the time.

Sources