Dropdown / Select

Choosing your country at checkout, a T-shirt size in a fashion app, a sort order in a hotel search: whenever an app needs one answer from a known list, there’s a good chance it uses a dropdownDropdownA control that shows the selected option and opens a list of options when tapped.Open in glossary →. It saves space by hiding the options until you need them.

That hiding is also its weakness. Testers have to open it, scroll it, search it, use it with a keyboard, and check what happens when another field changes. Let’s see how.

What is a dropdown?

A dropdown (also called a select or picker) is a closed field that shows the current value and opens a list of options when you tap it. You pick one option (or several, in a multi-select), and the list closes again.

You’ll usually see dropdowns used for:

• Long, known lists: country, state, language, currency.
• Settings with many values: sort order, items per page, time zone.
• Product choices: size, color, quantity.
• Dependent choices: car make → model, country → city.

Anatomy

How it differs from similar components

Component	Options visible	Selection	Best for
Dropdown / select	Hidden until opened	One (or many, in a multi-select)	5–15 options when space is tight
Combo box (searchable dropdown)	Hidden; filtered as you type	One	Long lists: countries, cities, airports
Segmented control	All, in one row	Exactly one	2–5 short options that switch a view
Radio buttons	All, stacked	Exactly one	2–6 options, especially with longer labels
Bottom sheet / picker	Slides up from the bottom (mobile)	One or many	Long or rich lists on phones, with search or descriptions
Menu	Hidden until opened	None: you trigger an action	Commands like Edit, Share, Delete, not values

Dev note

On the web it’s a <select> element or a custom listbox/combobox. iOS uses a pop-up button (a menu with a checkmark) or a picker (the scrolling wheel). Material Design on Android calls it an exposed dropdown menu, and Android developers often say Spinner. A menu that runs actions is not a dropdown, even if it looks like one.

Designs & variants

Native dropdowns are drawn by the browser or the operating system, so they’re usually robust. Custom ones look nicer, but every behavior (keyboard, positioning, screen readers) has to be rebuilt by the team, and that’s where bugs hide.

All of these work: open them with the mouse, then try the keyboard (Tab, arrows, Enter, Esc, or type a letter).

Size

Choose a sizeXSSMLXLXXL

Sort by

Recommended

DeliveryStandard

36

37

38

39

40

41

42

43

44

45

46

Shoe size (EU): 40

LanguageEnglish

Country

Dietary preferences

Vegetarian

Country

Select a country

City

Choose a country first

When to use it

A dropdown is a good choice when:

• There are more than about 5 options and showing them all would take too much space.
• The options are familiar to users (they know their country, they don’t need to compare).
• There’s a sensible default, or the user picks once and rarely changes it.
• For long lists (15+), add search. Then it becomes a combo box.

Good and bad uses

Common bugs

These are the dropdown bugs testers report most often.

#	Bug	What you see	Typical severity
1	Dependent field not reset	You change the country, but the old city stays selected, so the order ships to “Zagreb, Serbia”	High
2	Menu clipped or off-screen	Near the bottom of the screen (or inside a card) the list is cut off and the last options can’t be reached	High
3	No keyboard support	Tab skips the dropdown, or arrows, Enter and Esc do nothing	High (for affected users)
4	Strict search	“ceske” doesn’t find “České Budějovice”; “zagreb” doesn’t find “Zagreb”	Medium
5	Unsorted list or duplicates	Cities appear in random order, “Split” is listed twice	Low–Medium
6	Doesn’t close	Clicking outside or scrolling the page leaves the menu floating on top of the form	Medium
7	Selected value not shown	After choosing, the field still says “Select…” (but the value was saved)	Medium
8	Wrong default	The first option is pre-selected, or the saved value isn’t shown when you come back to edit	High
9	Placeholder can be submitted	“Select a country” is accepted as if it were a real value	Medium
10	Long labels truncated	“Tomorrow, 16:00–2…” or long translations are cut off in the field or menu	Medium
11	Highlighted ≠ selected	Moving the mouse over an option changes the value without clicking	Medium
12	Screen reader silence	VoiceOver or TalkBack says “button” or “clickable” with no label and no value	High (for affected users)

Stress-test it

A long list is only usable if search and sorting respect real names with real letters. Compare a naive implementation with a robust one:

🧪 Search & sort lab

A long list needs search, and search is where dropdowns break. Type a query (or pick one) and compare a naive search with a robust one.

Search query

"ceske""ZAGREB""lodz""dakovo"" split ""sao paulo""munchen""nis"

Sort order

As storedA–Z (naive)A–Z (locale-aware)

The order the data came from the database. Users can't predict where anything is.

Naive search

label.includes(query)

• Zagreb
• Šibenik
• Split
• Čakovec
• Đakovo
• Osijek
• Beograd
• Niš
• Novi Sad
• Ljubljana
• Kraków
• Łódź
• Gdańsk
• Zürich
• München
• Köln
• Malmö
• Wien
• Brno
• Plzeň
• České Budějovice
• São Paulo
• Ćuprija
• Antwerpen

24 of 24 cities

Robust search

ignore case + accents + extra spaces

• Zagreb
• Šibenik
• Split
• Čakovec
• Đakovo
• Osijek
• Beograd
• Niš
• Novi Sad
• Ljubljana
• Kraków
• Łódź
• Gdańsk
• Zürich
• München
• Köln
• Malmö
• Wien
• Brno
• Plzeň
• České Budějovice
• São Paulo
• Ćuprija
• Antwerpen

24 of 24 cities

Empty query: both show the whole list. Now try "ceske" or "lodz".

Find the bug

The checkout form below has six bugs in its dropdowns. Test it like a real customer, then like a tester:

• Choose a country and city, then change the country.
• Search for countries in lowercase and without accents.
• Try every option in every list, including the last ones.
• Put the mouse away and use only the keyboard.
• Open a list and click somewhere else.

🐞 Bug hunt: Checkout

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

shop.example.com

Checkout

Shipping address

Full name

Country

City

Select a city

Street and number

Free delivery over €50

Delivery slot

Choose a slot

Place order · €64.90

Try the mouse and the keyboard (Tab, arrows, Enter, Esc).

Reset

Network log

Place the order to see the request body…

1. 1

   Hint: Choose a country and a city, then change the country.

   City is not reset when the country changes

   Choose Hrvatska → Zagreb, then switch the country to Srbija: the city still says Zagreb, and the order is placed with "city": "Zagreb", "country": "Srbija". Expected: changing the country clears the city (or keeps it only if it exists in the new country).

   Reveal answer✓ I found this
2. 2

   Hint: Search for a country in lowercase, or without accents.

   Country search is case- and accent-sensitive

   "hrv" finds nothing (only "Hrv" works) and "ceska" doesn't find Česká republika; "osterreich" misses Österreich. Expected: search ignores case and accents.

   Reveal answer✓ I found this
3. 3

   Hint: Open Delivery slot and try to pick a Saturday slot with the mouse.

   Delivery slot menu is clipped; the last slots cannot be chosen

   The menu opens inside a card that hides overflowing content, so only the first slot or two are visible. Saturday slots can only be reached blindly with the arrow keys. Expected: the menu is fully visible (it renders above the card, or flips upwards).

   Reveal answer✓ I found this
4. 4

   Hint: Press Tab from the Country field.

   City dropdown cannot be used with the keyboard

   Focus jumps from Country straight to Street; the city dropdown is never focused, and arrows, Enter and Esc do nothing. It is a plain <div> with a click handler. Expected: it is focusable, opens with Enter/Space/Arrow Down, and supports arrows, Enter and Esc.

   Reveal answer✓ I found this
5. 5

   Hint: Open the City list, then click somewhere else on the page.

   City menu does not close when clicking outside

   The list stays open on top of the Street field until you click the dropdown again or pick a city. Expected: clicking outside (or pressing Esc) closes it without changing the value.

   Reveal answer✓ I found this
6. 6

   Hint: Read the city list for Hrvatska or Srbija carefully.

   City lists are unsorted and contain duplicates

   Cities appear in database order (Zagreb, Split, Osijek…) and Split is listed twice; Novi Sad, Graz, Brno and Mostar are duplicated too. Expected: unique options, sorted alphabetically using the local language rules.

   Reveal answer✓ I found this

How to test it

Checklist

Dropdown test checklist

0 of 14 checked

Copy

• The field shows a clear placeholder (or a deliberate default) on first load
• The selected value is shown in the field after the menu closes, and after reopening the screen
• A required dropdown can't be submitted with the placeholder still selected
• Every option can be selected, including the first and the last
• The list is sorted sensibly (alphabetically for the user's language) with no duplicates
• Search ignores case, accents and extra spaces, and shows a "no results" message
• Dependent dropdowns reset or update when the parent value changes
• The menu is fully visible near the bottom of the screen, inside cards and in landscape
• Clicking outside, pressing Esc or Back closes the menu without changing the value
• Keyboard: Tab focuses it, Enter/Space/Arrow Down open it, arrows move, Enter selects, Esc closes
• Disabled options look disabled and can't be selected by touch, mouse or keyboard
• Long labels and translations fit or wrap in the field and in the menu
• Screen readers announce the label, current value, and the option count or position
• Works with the largest text size, in dark mode, and on small screens

Example test cases

Accessibility

Custom dropdowns are one of the most common accessibility failures on the web. Check these:

• Keyboard (web): the dropdown is reachable with Tab; Enter, Space or ↓ open it; arrows move the highlight; Enter selects; Esc closes and returns focus to the field. Typing a letter jumps to matching options.
• Screen readers (VoiceOver / TalkBackScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary →) should announce the label, the current value, that it’s a pop-up / combo box, and whether it’s expanded. Inside the list, each option should be announced with its position (“Zagreb, 3 of 6”) and selected state.
  Dev note

  In code: role="combobox" + aria-expanded on the field, role="listbox" and role="option" + aria-selected in the menu.
• Visible focus: both the field and the highlighted option need a clear focus indicator, not only a subtle color.
• Highlighted vs selected must look different, so keyboard users know what Enter will choose.
• Contrast (WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary →): option text at least 4.5:1; the field border and chevron at least 3:1.
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: options at least 44 pt tall on iOS and 48 dp on Android.
• Combo boxes should announce the number of results as you type (“5 results”).

Mobile vs web

iOSAndroidWeb

• Pop-up buttons show a menu with a checkmark. Good for short lists.
  Dev note

  UIButton with a menu, or Picker with the .menu style in SwiftUI.
• Wheel pickers are used for dates, times and sizes. Test that the value saves when you stop scrolling, not only when you tap Done.
  Dev note

  UIPickerView, UIDatePicker, .wheel style.
• A web <select> in Safari opens the native iOS picker. Check long option labels there, because they get truncated.
• Long lists usually open a new screen with a search field instead of a menu.
• Test with VoiceOver (the rotor and swipe up/down adjust picker values) and the largest Dynamic Type size.

• Material 3 exposed dropdown menu; older apps use a spinner.
  Dev note

  ExposedDropdownMenuBox in Compose, TextInputLayout + AutoCompleteTextView in Views; the older one is a Spinner.
• The menu can open above the field when there’s no room below. Test near the bottom of the screen and with the keyboard open.
• The system Back button should close an open menu without leaving the screen.
• Long lists often use a bottom sheet or a full-screen search instead.
• Test with TalkBack, font scale and display size settings.

• A native <select> is the safest choice: keyboard, screen reader and mobile pickers work out of the box.
• Custom dropdowns (React, Vue, UI libraries) must follow the ARIA combobox / listbox pattern. Check the roles in DevToolsDevToolsDeveloper tools built into browsers for inspecting pages, network traffic and errors.Open in glossary →.
• Test positioning: near the bottom of the window, inside scrolling containers, inside modals and cards with hidden overflow.
• Test zoom at 200% and small viewports: does the menu still fit?
• Cross-browserCross-browser testingChecking a website works and looks right in different browsers and browser versions.Open in glossary →: native selects look very different in Chrome, Safari and Firefox; check each one.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.A form asks "Gift wrap?" with only "Yes" and "No". Which component fits best?

   AA dropdownBRadio buttons or a segmented controlCA combo box with searchDA wheel picker

2. 2.You choose Hrvatska and Zagreb, then change the country to Srbija. The city still shows Zagreb. What kind of bug is this?

   AA cosmetic bugBA dependent-field bug: the child value is not reset when the parent changesCA performance bugDNot a bug, users can fix it themselves

3. 3.Which search query is MOST likely to reveal a search bug in a city combo box?

   A"Zagreb"B"zagreb" or "lodz" (lowercase, without accents)CTyping nothingDClicking the first city

4. 4.The last two options of a dropdown are cut off at the bottom of a card. What should the dropdown do?

   ANothing, users can scroll the pageBShow the whole menu, for example by opening upwards or rendering above the cardCRemove the last two optionsDShow a tooltip

5. 5.What is the difference between a highlighted and a selected option?

   AThere is no differenceBHighlighted = where focus or the mouse is now; selected = the current valueCSelected options are always at the topDHighlighted options are disabled

Key takeaways

• A dropdown hides a known list of options behind a compact field. Use it for 5+ familiar options; add search for long lists.
• For 2–5 options, radio buttons or a segmented control are usually better. A menu runs actions and is a different component.
• Prefer a clear placeholder over a random pre-selected first option, and make required dropdowns block submit.
• The classic bugs: dependent fields not reset, clipped menus, no keyboard support, strict search, unsorted or duplicate options, and menus that won’t close.
• Always test the first and last option, changing the parent field, lowercase and accent-free search, and keyboard-only use.