Select

Select

Component preview

A closed form control that opens a predefined list and stores one selected value without free text entry.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: select box, option picker, drop-down field

a field that opens a fixed list of countries
choose one option without typing
a closed list for picking a value
the form field with a down arrow
select one size from known choices
a phone-friendly picker for a short list

Try it

Choose from a list

Compare all three behaviors

Shared comparison scenario: A form asks the user to choose one value from a known option set before continuing.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Select

Select offers a closed fixed list without text filtering; Combobox includes an editable query, while Listbox keeps options visibly available.

Your task

Choose Portugal with pointer and keyboard, then confirm the selected form value is identical.

Edge case to verify

The required placeholder option cannot be submitted as a valid country and its error remains linked to the field.

Mission

Choose Portugal with pointer and keyboard, then confirm the selected form value is identical.

Primary state: The labeled native select shows the current country and opens the platform's option picker.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Label

The persistent text that names a control or field.

Use it when

Choosing one known value from a short or moderate list
Preserving the native mobile picker is useful

Avoid it when

Users need to search a long list
Several options must remain visible for comparison

Compare similar concepts

Combobox accepts an editable query and coordinates it with options; Select is closed and fixed, while Listbox is an always-visible option collection.

Combobox

Listbox keeps options visible as one composite control; Select hides them in a picker, and Combobox adds an editable query.

Listbox

Technical details

Behaviors

Toggle on activation
Activating the trigger opens the surface, and activating it again can close it.
Select one value
Choosing an option replaces the previous value and exposes the selected state.
Navigate options
Arrow keys move the active option, and selection is announced independently from focus.

States

Select collapsed
Select collapsed
Select expanded
Select expanded

State transitions

Select collapsed → Select expanded
The control is activated with pointer, touch, Enter, Space, or an opening arrow key.
Select expanded → Select collapsed
A valid option is committed, or Escape dismisses the list without changing the value.

Test scenarios

Context: A shipping form asks for one delivery country from a fixed supported list.
Mission: Choose Portugal with pointer and keyboard, then confirm the selected form value is identical.
Primary state: The labeled native select shows the current country and opens the platform's option picker.
Edge case: The required placeholder option cannot be submitted as a valid country and its error remains linked to the field.

Accessibility

Role: native select
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: The native control keeps one focus stop and delegates option focus behavior to the platform.
Dismissal: The platform picker closes on selection, cancellation, or its standard Escape behavior without losing the prior value on cancel.
Scroll: A long option collection scrolls without moving the page behind it, and the active or selected option stays visible.
Announcement: Label, required state, current value, disabled state, and validation message are exposed by native semantics.
Keyboard: Tab focuses the select
Platform keys open and move through options
The platform commit key selects a value

Bindings

select
implementationKind
native
nativeElement
select
ariaPattern
native select
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: The native picker preserves platform behavior and is preferred unless customization requirements justify a separately tested pattern.
Verify binding source

Sources

WHATWG HTML: The select element
WHATWG · standard · 2026-07-16
Claim covered: Select: native select semantics, option selection, form participation, and platform interaction.
WCAG 2.2: Focus Appearance
W3C WAI · standard · 2026-07-16
Claim covered: Select: WCAG focus appearance requirements used to qualify visible keyboard focus.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.