Select

Guidelines React

The Select component is a form control that allows users to choose a single option from a predefined list of options, typically presented in a dropdown menu. It is commonly used in forms to capture user input efficiently without overwhelming the interface with visible options.

When to use

• In forms where users need to select one option from a list of three or more predefined choices.
• When space is limited, and displaying all options at once (e.g., via radio buttons) would clutter the UI.

When NOT to use

• For fewer than three options; use radio buttons instead to make choices more visible and accessible.
• For lists exceeding 15 options, where a searchable combobox or autocomplete might be better to reduce cognitive load.
• For site navigation or actions like sorting/filtering.

Properties

Anatomy

Element	Description
Label	A concise text (1-3 words) describing the purpose of the selection, positioned above or inside the field.
Helper Text	Optional instructional text below the label to guide the user.
Field	The interactive box displaying the selected value or placeholder, which persists whether the dropdown is open or closed.
Chevron Icon	An arrow indicator that toggles the dropdown list.
Dropdown	The dropdown menu containing individual options, displayed on interaction.
Dropdown Items	Individual selectable items in the list, often with a checkmark for the selected one.
Status Icon	Icon for errors (e.g., red exclamation).
Status Description	Description of the error state.

States

State	Description	Visual Indicators
Default	Default interactive state	Standard border and text color
Hover	Cursor over object	Subtle background or border change
Focus	Keyboard focus (visible on Tab or arrow key navigation)	Outline or glow around the field
Open	Dropdown list is expanded	List visible below the field
Selected	An option has been chosen	Selected value displayed in the field
Error	Invalid input or required field empty	Red border, error icon, and message
Disabled	Non-interactive, e.g., for unavailable options	Grayed out, no hover/focus

Content Guidelines

• Order options logically: alphabetically, by frequency of use, or numerically for better scan-ability.
• Use a default placeholder like “Select” or preselect a common option if appropriate, but never replace the label with it.

Accessibility

• Use native <select> element when possible for maximum built-in accessibility.
• Associate label with aria-labelledby or native <label for>.
• Ensure visible focus indicator on trigger and highlighted option.
• Announce selected value and open/closed state to screen readers.
• Disabled state: use aria-disabled="true" and prevent focus.

Support standard keyboard navigation

• Tab: Focus the trigger field.
• Space/Enter: Open/close dropdown or select highlighted option.
• Arrow Up/Down: Navigate options.
• Esc: Close dropdown.
• Type-ahead: Jump to options matching typed characters.