Select

Structure

The Select trigger is rendered as an HTML <button> element with the combobox role, which tells assistive technology the button controls a separate element that's a list of selectable options. When searchable, the dropdown menu includes a <input type="text"> field with the combobox role that lets users filter the option list by keyword.

Floating UI is used for focus management. The dropdown menu is rendered inside a portal and uses Floating UI's FloatingFocusManager when the dropdown is open. Each option in the dropdown is a <button> with role="option". Group headers render as <div> elements for static groups and <button> elements for collapsible groups.

ARIA

table

Element	Attribute	Description
Clear button	aria-disabled	Set to true when the Select is disabled, preventing interaction with the clear button.
Clear button	aria-label="Clear field"	Provides an accessible name for the icon-only clear button.
Collapsible group header	aria-current	Set to true when the group header is the currently focused item.
Collapsible group header	aria-expanded	Indicates whether the collapsible group is expanded or collapsed.
Collapsible group header	aria-selected	Set to true when the group header is selected.
Group header	aria-level	Indicates the nesting depth of the group within the option hierarchy.
No results region	aria-atomic="true"	Ensures the entire "No results found" message is announced as a single unit.
No results region	aria-live="assertive"	Announces the "No results found" message immediately when the filtered option list is empty.
Option	aria-current	Set to true when the option is the currently focused item.
Option	aria-level	Indicates the nesting depth of the option when options are organized in groups.
Option	aria-posinset	Indicates the option's position within the full set of options.
Option	aria-selected	Set to true when the option is the currently selected value.
Option	aria-setsize	Indicates the total number of options in the list.
Search input	aria-autocomplete="list"	Indicates that typing filters a list of suggestions displayed in the dropdown.
Search input	aria-controls	References the ID of the options list (or no-results region) that the search input controls.
Search input	aria-expanded="true"	Set to true while the dropdown is open and the search input is visible.
Search input	aria-haspopup="listbox"	Indicates the search input controls a listbox popup.
Spinner	aria-label	Set to "Loading..." or "Loading more..." to provide context for the loading indicator.
Trigger	aria-activedescendant	References the ID of the currently active option so assistive technology tracks keyboard focus within the listbox. Moved to the search input when the Select is searchable.
Trigger	aria-describedby	References the description or error message when provided.
Trigger	aria-label	Provides an accessible name when no visible label is rendered.
Trigger	aria-labelledby	References the visible label element's ID to associate it with the trigger.

Placeholders

Placeholders help the user complete a form control by providing a hint on how the control expects its value to be formatted. This gives the user immediate, visual instruction to prevent future errors.

However, it's become commonplace in design trends to use placeholders in place of traditional labels. Never use a placeholder in place of a label. They are not reliably read to assistive technology meaning some users may miss context on what the purpose of the label is.

We highly recommend adding visible labels with the label prop to prevent this lapse in communication. If a visible label is unneeded for the use case, add an ariaLabel or ariaLabelledby so assistive technology will announce the Select to the user. Omitting a label will result in an error.

Keyboard

Clear button

table

Key	Function
Enter/Space	Activates the clear button to clear the selection.

Collapsible groups

table

Key	Function
Enter/Space	Toggles the collapsible group between expanded and collapsed.
→	Expands a collapsed group.
←	Collapses an expanded group.

Trigger

table

Key	Function
Enter/Space	Opens the dropdown menu. When the menu is already open, selects the currently active option.
Escape	Closes the dropdown menu and returns focus to the trigger.
Shift+Tab	Moves focus to the previous focusable element.
Tab	Moves focus to the next focusable element.
Type-ahead	When the menu is closed and the Select is not searchable, typing a character jumps to the first matching option.
↓/↑	When the menu is open, moves focus through the options list. Navigation loops from the last option back to the first. If the trigger is focused, opens the dropdown menu.