Select

Examples

Default

Fluid vs hug

fluid (default) stretches the trigger to the container. Set fluid={false} to hug content.

States

Validation

Figma Validation=Invalid (Negative) — use validation="error".

Multi-select

Multi options use a checkbox-style indicator. Selected values render as chips; set wrapSelected to wrap onto new lines.

Controlled

Allow clear

Hover the trigger to reveal the clear control (replaces the chevron).

TanStack Form

Submit without a selection to see validation. Choosing a plan and submitting again succeeds.

Virtualized (10,000 items)

Pass virtualized with a full items array. Only a window of options mounts in the DOM; keyboard highlight scrolls the window via Base UI’s onItemHighlighted. Requires peer @tanstack/react-virtual. Tune row height with estimateSize, buffer with overscan, and the empty-filter message with emptyText.

RTL

Wrap the control (or a parent) in dir="rtl" / lang="fa". Trigger text, chevron, and menu items follow reading direction. Portaled menus inherit dir so virtualized lists stay RTL too.

API Reference

Select

Requires peer @tanstack/react-virtual when using virtualized.

items option fields

Each entry in the items array (or key/value pair in a record) defines one option:

Record form: { [value: string]: ReactNode } — keys become value, values become label.

Accessibility

WCAG success criteria

Why it matters

Select is one of the most common form controls — and one of the easiest to ship without a usable name, keyboard path, or error association. Keyboard and switch users rely on predictable open/close, arrow navigation, and typeahead. Screen-reader users need the trigger named, the list exposed as options, and selection state announced. A missing label or orphaned error message blocks task completion and fails WCAG at scale.

Keyboard

Focus lands on the trigger (or the filter input when searchable / virtualized). The popup is portaled but stays in the tab order while open; ⎋ Esc always closes and returns focus to the trigger.

Disabled — trigger is removed from the tab order; no open interaction. Read-only — focusable for context but value cannot change. Virtualized — arrow highlight fires onItemHighlighted; the virtual window scrolls so the highlighted row stays visible even when only a slice of DOM nodes exists.

Screen readers & semantics

EDS exposes a props-first API — consumers pass aria-label or aria-labelledby on <Select>; there is no public trigger primitive to wire separately.

Always provide one naming strategy: visible <label htmlFor> paired with aria-labelledby, or aria-label when no visible label exists. Placeholder text is not a substitute for a label.

Focus & visuals

• Focus ring — :focus-visible on .eds-select__trigger uses a token-based box shadow (select.css) so keyboard focus is obvious without shifting layout.
• Open state — trigger shows an open ring; popup is portaled with theme scope inherited from the Select root so light/dark tokens stay correct.
• Error state — validation="error" applies a negative border token; pair with adjacent error copy for color-blind users.
• Contrast — text, borders, and icons use --eds-color-* semantic tokens designed for AA contrast on default surfaces.
• RTL — logical layout (inline-start / inline-end) mirrors trigger content, chevron, chips, and list alignment under dir="rtl". Portaled popups inherit direction.
• Reduced motion — list open/close follows Base UI defaults; no gratuitous motion on selection.

Build with it

Do

• Give every Select a visible label or aria-label / aria-labelledby.
• Set validation="error" when invalid and render error text linked via aria-describedby on a wrapping field group.
• Use disabled for non-interactive fields; use readOnly when the value should be visible but not editable.
• Mark purely decorative option icons with aria-hidden in custom label nodes if you embed SVGs.
• For virtualized, keep the full items array available — filtering and keyboard scroll depend on it.
• Test multi-select chip remove and allowClear with a screen reader.

Don't

• Rely on placeholder alone — it disappears once a value is chosen and is not a accessible name.
• Hide the only copy of a field label inside the trigger without aria-labelledby.
• Use validation="error" without visible, programmatically associated error messaging.
• Disable options without indicating why in surrounding UI when the reason matters.
• Assume portaled popups break RTL — wrap the page or field in dir="rtl" and verify the menu mirrors correctly.

Quick test

Five-minute pass you can run on any Select instance:

1. Keyboard only — Tab to the trigger, Enter to open, ArrowDown through three options, Enter to select, Escape to confirm close. Repeat with multiple and remove one chip via its button.
2. Typeahead — On a non-searchable Select, focus closed and type the first letter of an option; confirm highlight jumps. On virtualized, type to filter and arrow through results.
3. Screen reader — VoiceOver (Mac) or NVDA (Windows): confirm the trigger announces its name and role; open the list and hear option count / selection change.
4. Error — Submit an empty required field: negative border and error text both visible; reader hears the error when focus moves to the field.
5. Zoom & contrast — Browser zoom 200%; confirm focus ring and error border remain visible. Toggle light/dark theme on the portaled popup.
6. RTL — Set dir="rtl" on a parent; confirm chevron, text alignment, and chip order follow reading direction.