Skip to main content
Frontend Glossary

UI components · Form input

Select

Also called: Dropdown, Combobox, Picker, Dropdown list

Click to open a list of options and pick one or more. When closed it only takes up the space of an input, so it suits longer option lists.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Use a select for "City." When closed, show the placeholder "Select a city" with a down arrow on the right. When opened, show an options list below, at most 8 rows tall and scrollable beyond that, with a search box at the top for filtering. Highlight the current selection with a check mark, and once an option is picked, close the list and show the city name.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Select is what you need.

Use Select when

  • 6 or more options that take too much room when laid out, like cities, countries, or departments
  • Limited form space, where a set of fixed options needs to fit in one box
  • Many options that need filtering as you type, like picking an owner from hundreds of employees

Pick something else when

  • Only 2 to 5 options, and you want users to see them all at a glance. Use radio buttons.

    Use insteadRadio

  • Clicking should run an action instead of picking a value, like export or delete

    Use insteadDropdown Menu

  • Only on and off states

    Use insteadSwitch

  • Options that are hierarchical, like country, state, and city

    Use insteadCascader

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Making a dropdown for just two options like "Male / Female," which adds a click and hides the choices

  2. 02

    A long list of hundreds of options with no search, so users have to scroll slowly to find the one they want

  3. 03

    Making actions like edit, delete, or export into a select, so users have to click confirm after choosing

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A select box showing the current value, a down arrow on the right, and an options list that pops up on click. The list can have a search box at the top.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A closed select looks like an input with a small down arrow on the right, showing the current value. Click it and a list of options pops up. Pick one and it closes. With many options you can add search filtering, or turn on multi-select, where selected values sit in the box as small tags with an ×.

It's often confused with a Dropdown Menu. A select is a form control for "picking a value" that gets saved. A dropdown menu is a set of commands that run immediately, like edit, delete, or export. Compared with a Radio, a select hides the options, which saves space but costs an extra click. With only 2 to 5 options, radio buttons laid out in the open are easier to scan. When options are hierarchical, like country, state, and city, use a Cascader.

Developer info
Term ID
component-select
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • select
  • [role="combobox"]:not(input)
  • .ant-select
  • .el-select
  • [class*="MuiSelect-select"]
  • .arco-select
  • .t-select
  • .n-select
  • [data-slot="select-trigger"]
  • .form-select
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026