Prepared Docs

Overview

Select is a single-select dropdown backed by a fixed, predictable list. It enforces valid choices (unlike free text) and is faster to scan than a combobox when the list is short. The mental model is "pick one from a menu you already know": timezones, agencies in a short set, an operator's assigned roles, a preset sort order. Dispatch also uses Select as the responsive collapse target for tab strips—when a tab row no longer fits a narrow rail, the options become a select while the state and labels stay the same.

Flag reason

When to use

For a short, predefined set (~roughly fewer than 50)

When the set is knowable up front and fits inside a menu without scrolling becoming the dominant experience.

For mutually exclusive choices with no typing benefit

Timezone pickers, status filters, language choices, agency pickers in small deployments. Typing adds no speed when the list is short.

For responsive collapse of a tab strip

When a TabMenu or Tabs row wraps awkwardly on narrow screens, render the same options as a Select with hideLabel. The state and accessibility contract stay the same; the control shape adapts to the viewport.

For settings where invalid free text would break integrations

Integration keys, MIME filters, sort orders, protocol versions—places where an arbitrary string could create a downstream error. A select is the simplest way to keep the input within the valid set.

When not to use

For searchable or paginated lists

Use Combobox. When the list is long or dynamic, typeahead is the whole point.

For two to five equally visible modes

Use SegmentedControl. Keeping the options visible is faster than opening a menu when the set is tiny and the change is frequent.

Use links, TabNav, or Sidebar. A select that changes the URL is a link wearing a dropdown's chrome.

For binary toggles

Use Switch or a two-option segmented control. A select for on/off costs an extra click and hides the current value.

Variants

Variant	Purpose	Emphasis
Standard	Labeled select in forms and filter bars	Label above, trigger below, helper text inline
Grouped	Options organized into labelled buckets	Use sentence-case group labels; keep the hierarchy shallow
`hideLabel`	Minimal trigger, responsive tab collapse	Provide `label` for accessibility; trigger becomes icon-minimal
Disabled options	Options retained but not selectable	Keep visible when operators need to see unavailable choices and why

Composition

A select is a trigger (with selected label or placeholder), a listbox menu, and one or more SelectItems. Group headings and separators organize long menus. The trigger sits inside a form field with a label above and optional helper text below; disabling the control disables the whole field. Use hideLabel only where an accessible name is supplied another way (a visible adjacent field, an explicit aria-label).

Content guidelines

Labels. Sentence case, short, localized with formatMessage. Labels describe the field ("Agency"), not the action ("Select an agency").
Placeholders. Describe what to choose ("Select agency") rather than repeating the label. Never rely on placeholder as label.
Options. Parallel phrasing; consistent capitalization; avoid codes-only labels unless operators only know the code.
Group titles. Short, sentence-case, and used only when they add scanability (not one group with "All options").
Helper and error text. Explain valid choices, not the mechanic of selecting them.

Behavior and states

Controlled vs. uncontrolled. Uncontrolled for static form fields; controlled when other UI (URL params, validation, cross-panel state) depends on the value.
Keyboard typeahead. Radix supports first-character jump; labels should start with meaningful characters (don't prefix every option with a shared word).
Disabled state. Disable with aria-disabled. Keep disabled options visible when the rationale matters; hide them when the list is long and the rationale is obvious.
Responsive collapse. When used in place of a tab strip, keep the underlying value and URL behavior identical to the tab version; only the shape changes.

Best practices

Order options predictably (alphabetical or frequency-based—pick one rule per dataset and keep it).
Provide stable test ids on triggers for dispatch flows covered by regression tests.
Truncate long labels in the trigger with a visible ellipsis; keep the full string available to screen readers via the accessible name.
Pre-select a sensible default (the operator's current agency, the last-used timezone) rather than starting empty when the context supports it.

Don't

Nest a select inside a tiny table cell without a truncation strategy. When inline editing is the task, consider opening a drawer or modal.
Use select for two choices. Switch or a two-option SegmentedControl is faster.
Mix navigation and form-input selects in the same row. Operators stop trusting the shape to predict the behavior.
Rely on hideLabel without providing an accessible name elsewhere.

Accessibility

Radix handles the listbox semantics, keyboard model, and ARIA attributes. The app still owns the label association, hideLabel accessible-name fallback, and error messaging. See Accessibility for the full keyboard map, announcement sequences, and grouped-options behavior.

Combobox for searchable or paginated single-select.
Segmented control for small, always-visible exclusive choices.
Input with select for composite fields where a unit or prefix lives next to the input.
Label for labelling standards shared across fields.

Segmented Control / Accessibility

Select / API and Development

Overview

When to use

For a short, predefined set (~roughly fewer than 50)

For mutually exclusive choices with no typing benefit

For responsive collapse of a tab strip

For settings where invalid free text would break integrations

When not to use

For searchable or paginated lists

For two to five equally visible modes

For pure route navigation

Overview

Flag reason

When to use

For a short, predefined set (~roughly fewer than 50)

When the set is knowable up front and fits inside a menu without scrolling becoming the dominant experience.

For mutually exclusive choices with no typing benefit

Timezone pickers, status filters, language choices, agency pickers in small deployments. Typing adds no speed when the list is short.

For responsive collapse of a tab strip

For settings where invalid free text would break integrations

Integration keys, MIME filters, sort orders, protocol versions—places where an arbitrary string could create a downstream error. A select is the simplest way to keep the input within the valid set.

When not to use

For searchable or paginated lists

Use Combobox. When the list is long or dynamic, typeahead is the whole point.

For two to five equally visible modes

Use SegmentedControl. Keeping the options visible is faster than opening a menu when the set is tiny and the change is frequent.

Use links, TabNav, or Sidebar. A select that changes the URL is a link wearing a dropdown's chrome.

For binary toggles

Use Switch or a two-option segmented control. A select for on/off costs an extra click and hides the current value.

Variants

Variant	Purpose	Emphasis
Standard	Labeled select in forms and filter bars	Label above, trigger below, helper text inline
Grouped	Options organized into labelled buckets	Use sentence-case group labels; keep the hierarchy shallow
`hideLabel`	Minimal trigger, responsive tab collapse	Provide `label` for accessibility; trigger becomes icon-minimal
Disabled options	Options retained but not selectable	Keep visible when operators need to see unavailable choices and why

Composition

Content guidelines

Labels. Sentence case, short, localized with formatMessage. Labels describe the field ("Agency"), not the action ("Select an agency").
Placeholders. Describe what to choose ("Select agency") rather than repeating the label. Never rely on placeholder as label.
Options. Parallel phrasing; consistent capitalization; avoid codes-only labels unless operators only know the code.
Group titles. Short, sentence-case, and used only when they add scanability (not one group with "All options").
Helper and error text. Explain valid choices, not the mechanic of selecting them.

Behavior and states

Controlled vs. uncontrolled. Uncontrolled for static form fields; controlled when other UI (URL params, validation, cross-panel state) depends on the value.
Keyboard typeahead. Radix supports first-character jump; labels should start with meaningful characters (don't prefix every option with a shared word).
Disabled state. Disable with aria-disabled. Keep disabled options visible when the rationale matters; hide them when the list is long and the rationale is obvious.
Responsive collapse. When used in place of a tab strip, keep the underlying value and URL behavior identical to the tab version; only the shape changes.

Best practices

Order options predictably (alphabetical or frequency-based—pick one rule per dataset and keep it).
Provide stable test ids on triggers for dispatch flows covered by regression tests.
Truncate long labels in the trigger with a visible ellipsis; keep the full string available to screen readers via the accessible name.
Pre-select a sensible default (the operator's current agency, the last-used timezone) rather than starting empty when the context supports it.

Don't

Nest a select inside a tiny table cell without a truncation strategy. When inline editing is the task, consider opening a drawer or modal.
Use select for two choices. Switch or a two-option SegmentedControl is faster.
Mix navigation and form-input selects in the same row. Operators stop trusting the shape to predict the behavior.
Rely on hideLabel without providing an accessible name elsewhere.

Accessibility

Combobox for searchable or paginated single-select.
Segmented control for small, always-visible exclusive choices.
Input with select for composite fields where a unit or prefix lives next to the input.
Label for labelling standards shared across fields.