Skip to content
SkillCodex
Menu

Select

Select

A form control for choosing one or more values from predefined options without arbitrary text entry; a single-select commonly appears as a closed picker, while a multiple select may expose a list.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r2
Sources
5 sources
Status
Published
Read the sources

You may have searched for: a field that opens a fixed list of countrieschoose one option without typinga closed list for picking a value

All phrasings
Save and share

Recognize

Choose from a list

Try it

Is the person choosing a native value, filtering by typing, or navigating a list?

Select

Shared trial context

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

Select

Mission

Select

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

Live result

No country is confirmed.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
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.

What this example shows

Select is a native form control whose values come only from predefined options and whose mode can be single or multiple; Combobox controls an associated popup and may be editable or select-only, while Listbox is a composite option widget that can be standalone or used in a popup.

Which fits your need?

Select

Choosing one or more known values from a predefined list

Combobox

A value control needs an associated popup for options or richer assistance

Which component will you use here?
Difference and sources

Select is a native form control whose values come only from predefined options and whose mode can be single or multiple; Combobox controls an associated popup and may be editable or select-only, while Listbox is a composite option widget that can be standalone or used in a popup.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Label

    The persistent text that names a control or field.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Choose from a list

      Select belongs to this comparison group.

    • Do not confuse

      Combobox

      Choose Select if the values are known and few and the native control is enough. Choose Combobox if the user must filter, type, or browse a popup richer than a closed list.

      Compare this pair
    • Do not confuse

      Listbox

      Choose Select if a known set of values fits a plain form field and native behavior is enough. Choose Listbox if the options need custom rendering, stay visible, or support multiple selection with keyboard patterns you control.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    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

    Choose

    Use it when

    • Choosing one or more known values from a predefined list
    • Preserving native form and platform behavior is useful

    Avoid it when

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

    Compare

    Compare similar concepts

    Platform equivalents

    The same interaction can have a different name or contract on each platform. Check the mapping before choosing an API.

    • HTML

      Direct

      <select>

      HTML Living Standard 2026-09

      The native control owns option selection, keyboard behavior, form value, validation, and platform presentation.

      Verified Official documentation
    • WAI-ARIA APG

      Partial

      role="listbox" or select-only combobox

      WAI-ARIA APG 2026-09

      APG offers listbox and select-only combobox patterns; the author must choose the collapsed or always-visible model.

      Verified Official documentation
    • Radix UI

      Direct

      Select.Root

      Radix Select docs 2026-09-03

      Select coordinates trigger, value, option collection, keyboard selection, portal, and positioning without text entry.

      Verified Official documentation
    • shadcn/ui

      Direct

      Select

      shadcn/ui docs 2026-09-03

      The Select recipe exposes the Radix select-only value picker.

      Verified Official documentation
    • Material UI

      Direct

      Select

      Material UI v9.4.0

      Select chooses from predefined values and integrates with MUI form controls.

      Verified Official documentation
    • SwiftUI

      Direct

      Picker

      SwiftUI documentation 2026-09

      Picker binds one selected value to a collection and adapts its visual style by platform.

      Verified Official documentation
    • Jetpack Compose

      Direct

      ExposedDropdownMenuBox + read-only TextField

      Compose Material 3 docs 2026-08

      A read-only field and exposed menu provide a compact predefined-value picker.

      Verified Official documentation
    • Flutter

      Direct

      DropdownMenu<T>

      Flutter API docs 2026-09

      DropdownMenu selects a value from supplied entries and can disable free editing.

      Verified Official documentation

    Impact profile

    Measured implementation costs and operating constraints for this SkillCodex specimen. A missing evaluation is never treated as free.

    This profile contains a measured constraint to review before adoption.

    Rendering
    Client
    Lazy weight
    42.3 kB-gzip
    Measured ·
    Environment
    macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
    Method
    Sum of gzip -9 bytes for the lazy files of module 59057 in .next/server/app/(en)/term/[slug]/page/react-loadable-manifest.json after pnpm build:local at c9f1299.
    Low-end devices
    Degraded
    Measured ·
    Environment
    macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
    Method
    Loaded the 390 x 844 term route in isolated Chromium with 6x CPU throttling and reduced motion, then exercised the first state change; failures are recorded as non-blocking warnings.
    CPU / GPU
    The Select specimen uses a native DOM select; the shared family chunk also carries the scripted Combobox implementation, with no canvas or WebGL.
    Measured ·
    Environment
    macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
    Method
    Static source inspection of the target lab module plus an interaction on the isolated Chromium verification route; checked DOM/React work and absence of canvas or WebGL.
    Reduced motion
    The global reduced-motion contract collapses animation and transition durations; the same states and controls remain available.
    Measured ·
    Environment
    macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
    Method
    Inspected src/app/globals.css prefers-reduced-motion rules and repeated the target interaction with reducedMotion=reduce in Chromium.
    Static fallback
    Without JavaScript, the term route stays on its localized Loading fallback; the profile and initial specimen are not revealed.
    Measured ·
    Environment
    macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
    Method
    Loaded all ten prerendered routes from a local next start build in Chromium with JavaScript disabled; each HTTP 200 remained on the localized Loading fallback, so the profile and specimen were not revealed.
    Server rendering
    Hydrates
    Measured ·
    Environment
    macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140
    Method
    Inspected the prerendered route response, then loaded the same route with JavaScript enabled and exercised the hydrated client specimen.
    Maintenance
    Stable
    Dependencies
    No target-specific runtime dependency

    Good fit

    • A short stable set of predefined form values where native behavior is preferred.

    Avoid when

    • Long or dynamic option sets that users need to search before choosing.

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Choose an available option with the pointer, then choose another using your device’s keyboard controls.

      Expected result

      The displayed value and submitted choice agree for both input methods.

    2. 2. Do this

      Inspect the choices and try to select an unavailable option.

      Expected result

      Only allowed values can be selected; the control makes its single-choice or multiple-choice behavior clear.

    3. 3. Do this

      For a required select, submit its empty placeholder, then choose a valid option.

      Expected result

      A specific error identifies the missing choice, and choosing a valid value lets you recover without losing other fields.

    Full contract
    1. 1A visible label names the value or values being chosen
    2. 2Only predefined values can be committed
    3. 3The single or multiple selection mode is explicit
    4. 4Required and error states are associated with the control

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Select without breaking its behavior

    # Implement Select in your agent
    
    ## Objective
    Implement Select for this verified behavior: A form control for choosing one or more values from predefined options without arbitrary text entry; a single-select commonly appears as a closed picker, while a multiple select may expose a list.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Select matches the need before writing code.
    
    ## Required behavior
    - The control exposes whether one or multiple values can be selected and updates every selected state consistently.
    - Arrow keys navigate according to the declared control model; focus and selection states are exposed consistently, including when selection follows focus.
    
    ## States to cover
    - Single-select specimen collapsed
    - Single-select specimen expanded
    
    ## Accessibility
    - ARIA role: select
    - The primary control or named region for Select has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - The native control delegates focus and option navigation to the platform for its declared single or multiple presentation.
    - For a collapsed single-select, the platform picker closes using its standard commit or cancellation behavior; a list presentation does not imply a dismissible popup.
    - Label, required state, selected value or values, disabled state, selection mode, and validation message are exposed by native semantics.
    - Tab focuses the select
    - Platform keys navigate the current single- or multiple-selection presentation
    - The platform selection command updates the value or selected values
    
    ## When not to use
    - Users need to search a long list
    - Several options must remain visible for comparison
    
    ## Acceptance criteria
    - A visible label names the value or values being chosen
    - Only predefined values can be committed
    - The single or multiple selection mode is explicit
    - Required and error states are associated with the control
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Select on a real journey

    # Verify Select after implementation
    
    ## Objective
    Audit the Select implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:7f5ec94a1eff0fe4b54de25282c803d69dfd581c234a043ee7e714dc6c0870c4

    Diagnose a problem

    Find and fix the Select defect

    # Debug Select in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Select.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - A visible label names the value or values being chosen
    - Only predefined values can be committed
    - The single or multiple selection mode is explicit
    - Required and error states are associated with the control
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Select fix

    # Prevent the Select regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Select with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:72e72bd98a543ef63fc160daad4262a4107a6411f430b5ec85ed55c08260ee0a

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:273b9dcc6fbd6df46feafb0845a2af32f8637fb2c43eb33397ffae145b9831f6

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    select

    NativeThe native picker preserves platform behavior and is preferred unless customization justifies a separately tested pattern.

    Technical details

    Behaviors

    • Declare the selection mode

      The control exposes whether one or multiple values can be selected and updates every selected state consistently.

    • Navigate options

      Arrow keys navigate according to the declared control model; focus and selection states are exposed consistently, including when selection follows focus.

    States

    • Single-select specimen collapsed

      Single-select specimen collapsed

    • Single-select specimen expanded

      Single-select specimen expanded

    State transitions

    • Single-select specimen collapsed → Single-select specimen expanded

      In this collapsed single-select specimen, the control is activated with pointer, touch, Enter, Space, or a platform opening key.

    • Single-select specimen expanded → Single-select specimen 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.

    Visual signals

    • Predefined options supplied by the form
    • A single-select commonly shows the current value in a closed field
    • A multiple select can keep several options and selected states visible

    Behavioral signals

    • Does not accept arbitrary text
    • The declared mode determines whether one or multiple option values are stored
    • A native single-select may use a platform picker on mobile

    Accessibility

    Role
    select
    Accessible name
    The primary control or named region for Select has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    Focus
    The native control delegates focus and option navigation to the platform for its declared single or multiple presentation.
    Dismissal
    For a collapsed single-select, the platform picker closes using its standard commit or cancellation behavior; a list presentation does not imply a dismissible popup.
    Scroll
    A long option collection scrolls without moving the page behind it, and the active or selected option stays visible.
    Announcement
    Label, required state, selected value or values, disabled state, selection mode, and validation message are exposed by native semantics.
    Keyboard
    • Tab focuses the select
    • Platform keys navigate the current single- or multiple-selection presentation
    • The platform selection command updates the value or selected values

    Bindings

    Open the HTML, ARIA, Radix, and shadcn matrix
    • 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
      sourceId
      source-ui-html-select
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: The native picker preserves platform behavior and is preferred unless customization justifies a separately tested pattern.

      Verify binding source

    Sources

    • WHATWG HTML: The select element
      sourceId
      source-ui-html-select
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
      status
      verified

      Claim covered: Select: normative native semantics, states, attributes, and browser behavior for select.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Claim covered: Select: informative WCAG guidance for evaluating visible keyboard focus appearance.

    • WHATWG HTML: Forms
      sourceId
      source-ui-html-forms
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/forms.html
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:730c20c8a823ab6b9a40c77d4731d6aab46895cd98c388fe12c966096d5bdd18
      status
      verified

      Claim covered: Select: normative native semantics, states, attributes, and browser behavior for HTML form controls.

    • WAI-ARIA APG: Listbox Pattern
      sourceId
      source-ui-aria-listbox
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:7d0369bdd2fb3122cb1164a16ea1cb0b36960aaf5cc4e24e9c2bdedd888f050e
      status
      verified

      Claim covered: Select: informative APG guidance for the listbox pattern: roles, states, relationships, and keyboard interaction.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Claim covered: Select: normative ARIA role definitions and constraints for the stated accessible role.