---
title: "Select UI: anatomy, variants and examples | Kombai"
description: "A select is a form field that opens a list of options and keeps the one people pick on show."
canonical_url: https://kombai.com/glossary/select/
author: "The Kombai Team"
---

# Select

A select is a form field that opens a list of options and keeps the one people pick on show.

- Also called: select menu, picker, dropdown field
- Platforms: Web, Mobile

- [Orbell](https://kombai.com/gallery/inspirations/forms-web-95/) (Web)
- [Solène](https://kombai.com/gallery/inspirations/payment-method-ios-7/) (Mobile)
- [Fenworth](https://kombai.com/gallery/inspirations/product-detail-web-22/) (Web)

## What is a select?

A select is a field that holds one value from a fixed list, like a country, a time zone or a size. Closed, it looks like a text field with a chevron and shows the current choice. Opened, it shows the options, marks the selected one and closes as soon as people pick another.

- The field shows the chosen value, or a prompt like "Select an option" before there is one.
- Only listed values can be picked, so the answer is always valid.

## When to use select

- **Many options, one answer.** Countries, time zones, currencies and states, where a list of radio buttons would be too long.
- **A value with a default.** A language or region that is usually right but sometimes needs changing.
- **Tight space.** Settings rows and filters where the options only need to show on demand.

## When not to use one

- **Two to five options.** Radio buttons or a segmented control show every choice without a click.
- **Very long lists.** For hundreds of options, use a combobox so people can type to filter.
- **Actions.** Commands like Export or Delete belong in a dropdown menu.

## Anatomy

1. **Label**: Says what is being chosen
2. **Trigger**: Shows the current value
3. **Option list**: Opens below the field
4. **Option**: One choice in the list
5. **Selected mark**: Checks the current value
6. **States**: Closed, open, focus, disabled

## Variants

We sorted the select designs in the Kombai gallery into four patterns.

### 1. Dropdown fields in forms

The default. A field with a chevron for a country, a state or a role, sitting in line with the text fields.

- [Marlowe Pay](https://kombai.com/gallery/inspirations/add-and-create-web-7/) (Web)
- [Cardamom](https://kombai.com/gallery/inspirations/text-area-ios-2/) (Mobile)
- [Cobblestone](https://kombai.com/gallery/inspirations/text-area-ios-26/) (Mobile)

### 2. Open option lists

The list opened over the screen, with a check or a highlight on the current value and groups for long lists.

- [Brindle](https://kombai.com/gallery/inspirations/menu-ios-18/) (Mobile)
- [Aravel](https://kombai.com/gallery/inspirations/settings-web-23/) (Web)
- [Kinetik](https://kombai.com/gallery/inspirations/stacked-list-ios-77/) (Mobile)

### 3. Wheel pickers

The iOS take on a select: a spinning wheel of options under the field, for card types, years and dates.

- [Merrowbay](https://kombai.com/gallery/inspirations/payment-method-ios-34/) (Mobile)
- [Shortwave](https://kombai.com/gallery/inspirations/account-setup-ios-7/) (Mobile)
- [Springbarrel](https://kombai.com/gallery/inspirations/date-picker-ios-21/) (Mobile)

### 4. Settings rows

Language, time zone and theme selects lined up in a settings page, each saving a preference.

- [Halyard Settings](https://kombai.com/gallery/inspirations/settings-web-45/) (Web)
- [Blackspur](https://kombai.com/gallery/inspirations/text-area-web-49/) (Web)
- [Palewood](https://kombai.com/gallery/inspirations/avatar-web-16/) (Web)

## Where selects show up

### Scheduling

A time zone select next to the calendar, so booking slots show in the visitor's own time.

- [Fern & Field Studio](https://kombai.com/gallery/inspirations/time-picker-web-29/) (Web)
- [Alcove](https://kombai.com/gallery/inspirations/calendar-web-11/) (Web)
- [Larkline](https://kombai.com/gallery/inspirations/time-picker-web-33/) (Web)

### Checkout and billing

A country select in the payment form, often next to a postcode field that depends on it.

- [Skylark](https://kombai.com/gallery/inspirations/checkout-web-2/) (Web)
- [Quillpost](https://kombai.com/gallery/inspirations/payment-method-web-47/) (Web)
- [Slipware](https://kombai.com/gallery/inspirations/carousel-web-21/) (Web)

### Contact sales forms

Company size, role and topic selects that help route a demo request to the right team.

- [Vantry](https://kombai.com/gallery/inspirations/contact-web-33/) (Web)
- [Marlowe](https://kombai.com/gallery/inspirations/contact-web-74/) (Web)
- [Yarrow](https://kombai.com/gallery/inspirations/book-a-demo-ios-27/) (Mobile)

## Select vs similar components

| | [Select](https://kombai.com/glossary/select/) | [Combobox](https://kombai.com/glossary/combobox/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Radio button](https://kombai.com/glossary/radio-button/) |
|---|---|---|---|---|
| Holds | Values for one field | Values, filtered by typing | Actions or a few options | A few values, all shown |
| After a pick | Shows the value | Shows the value | Runs the action and closes | Stays marked |
| Best for | Six to a few dozen options | Long lists like cities | Overflow actions | Two to five options |

## Build notes

- Start with the native <select>. It works with every keyboard, screen reader and phone, and opens the platform picker on mobile.
- For a custom select, follow the select-only combobox pattern: role="combobox" on the trigger and role="listbox" on the list.
- Set aria-expanded on the trigger and point aria-activedescendant at the highlighted option, so focus stays on the trigger.
- Down Arrow, Enter or Space opens the list. Arrows, Home and End move, a typed letter jumps, Enter picks and Escape closes.
- Mark the chosen option with aria-selected and a visible check, not with color alone.
- Order options in a way people expect, like A to Z for countries, and put common choices first only with a divider.

## FAQ

### What's the difference between a select and a dropdown menu?

A select is a form field: it holds a value and keeps showing it after the list closes. A dropdown menu holds actions, like Rename or Delete, and runs the one people pick. If the choice is saved as data, use a select.

### Should I use a native select or build my own?

Use the native element when you can. It is accessible out of the box and uses the phone's own picker. Build a custom one only when you need things the native list cannot show, like icons or two-line options, and follow the WAI-ARIA combobox pattern when you do.

### How many options are too many for a select?

Under six, show them all as radio buttons or a segmented control. Up to a few dozen, a select works. Beyond that, scrolling gets slow, so let people type to filter with a combobox.

### Should a select have a placeholder?

Use one, like "Select an option", when there is no sensible default and the answer is required, so nobody submits a value they never chose. When most people want the same value, like their own country, preselect it.

## Related terms

- [Combobox](https://kombai.com/glossary/combobox/)
- [Dropdown menu](https://kombai.com/glossary/dropdown-menu/)
- [Radio button](https://kombai.com/glossary/radio-button/)
- [Form](https://kombai.com/glossary/form/)

## References

- [MDN: The select element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
- [WAI-ARIA Authoring Practices: Select-only combobox example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/)
- [Apple Human Interface Guidelines: Pickers](https://developer.apple.com/design/human-interface-guidelines/pickers)