Ark Logo
Reat
Components
Select

Select

Displays a list of options for the user to pick from.

You can explore the Select component in the following curated examples.

Anatomy

To set up the select correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Select component in your project. Let's take a look at the most basic example:

Advanced Customization

For advanced customizations and item properties like disabled:

Multiple Selection

To enable multiple item selection:

Controlled Component

For scenarios where you want to control the Select component's state:

Usage with a Form Library

See how to use the Select component with popular form libraries:

Using the Field Component

The Field component helps manage form-related state and accessibility attributes of a select. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.

API Reference

Accessibility

Complies with the Listbox WAI-ARIA design pattern.

Keyboard Support

KeyDescription
Space
When focus is on trigger, opens the select and focuses the first selected item.
When focus is on the content, selects the highlighted item.
Enter
When focus is on trigger, opens the select and focuses the first selected item.
When focus is on content, selects the focused item.
ArrowDown
When focus is on trigger, opens the select.
When focus is on content, moves focus to the next item.
ArrowUp
When focus is on trigger, opens the select.
When focus is on content, moves focus to the previous item.
Esc
Closes the select and moves focus to trigger.
A-Za-z
When focus is on trigger, selects the item whose label starts with the typed character.
When focus is on the listbox, moves focus to the next item with a label that starts with the typed character.