Select

You might say

There are too many choices to show all at once. Put them in a dropdown people can open and pick from.

Choose one value from a collapsed listUse a select when answers come from a fixed list but do not need to stay visible all the time. A few options are clearer as Radio buttons. If users may type their own answer, use an input or AutoComplete.

Select Box

Quick checkChoose the best answer

A form lets people choose one of four fixed, exclusive time zones. Which control fits?

Use a Select and show the current time zoneUse unrestricted text so people type a time zoneMake the four peer values submit buttons

You can say this to an AI Agent

Change the time-zone field to a Select with fixed options, retaining the current value and clear names. Choose a new value by keyboard, save, then refresh and confirm display and stored value match.

Select≠Dropdown

Select chooses a form value. Dropdown opens actions or navigation, such as Rename, Export, or Delete.

Select≠AutoComplete

Select chooses only from a fixed list. AutoComplete offers suggestions while someone types and may or may not permit a custom value.

When to use it

Country or region
All states
All statesIn progressCompletedExpired
Role or status
Choose a city
BeijingShanghaiGuangzhouShenzhenHangzhou…
A medium-sized fixed list
All statesAll categoriesRecently updated
A compact choice inside a form
Choose a template
AI Product Requirements Template (with review checklist)User Research Report Template

When NOT to use it

Hide two or three simple choices in a dropdown
AllIn progressCompleted
Use it when users need to compare long descriptions
FrontendBackendDesign
Allow a value outside the list without making that clear
Province / City / DistrictGuangdong ProvinceShenzhenNanshan District
Leave the selected value ambiguous after the menu closes
Custom tag
FrontendBackend➕ Create "Custom tag"

Anatomy

All statusIn progressAll status✓

Its resting state — shows the currently selected value

Tells the user what's selected right now

Signals that the control can expand and its appearance changes when open

The overlay that holds all options — it can be searchable and grouped

Highlights on hover; the selected one gets a checkmark

Variants

Default

The default shape when options are fixed and only one gets picked

Multiple

FrontendBackend

For picking several at once from a longer list

Searchable

🔍Shenzhen

ShenzhenShanghai

With dozens of options, typing finds the target fast

Clearable

In Progress✕

When the filter is optional — one click back to nothing selected

Disabled

All Status

Temporarily locked until conditions are met, preventing misclicks

Typical use cases

Country picker

Task List In Progress

Homepage RedesignIn Progress

Payment Flow ReviewIn Progress

Tracking Plan ReviewNot Started

Role setting

City

Guangdong · Shenzhen

Guangdong · Shenzhen✓ Guangdong · Guangzhou Zhejiang · Hangzhou

Status filter

Interface LanguageThe language shown across the interfaceEnglish

Time ZoneAffects how events and reminders show timeUTC+8 Beijing

Form option

Traffic Trend Weekly

W26W27W28W29W30W31