Overview
The select component collects user-provided information from a list of options. Selects are usually used in forms where a user submits data and chooses one option from a list.
When to Use
- Use the select component inside a form where users are selecting from a list of options and submitting data.
- When the experience is mostly form-based.
When Not to Use
It is best practice not to use a select if there are fewer than three options for selection. In this case, use a radio button group instead.
Select vs Dropdown
While the select and dropdown components look similar, they have different functions.
- A select presents a list of options from which the users can select only one item from that list. It works best in forms when users choose an option from the select list and submit data.
- A dropdown presents a list of options that users can select one or several options from that list. Dropdown options are used for taking an action, filtering, or sorting existing content.
Another important difference between the two components is the underlying code. The select list appearance will be determined by the browser being used, while the dropdown list can be styled as needed.
Formatting
Anatomy
- Labels: Text that informs the user what to expect in the list of dropdown options.
- Default option: An empty option selected by default. The user can decide whether to choose a different option from the list. Depending on the use case, this defaulted behavior can be modified to be a prefilled selection to the first option in the list, which is typically shown in alphabetical order, or the prefilled selection could be a frequent or commonly used option that is on the list.
- Helper text (optional, except for error and warning): Assistive text to help the user choose the right selection.
- Field: Persists when the dropdown is open or closed.
- Option: A choice for the user, shown with other choices in a list.
- List: A list of options to choose from, displayed as an open state.
- Status icon: Indicates the state of the select, either error or warning.
- Error or Warning text: Replaces the helper text when an error or warning state appears.
Content
Main Elements
Concise labels for text and data inputs help users understand what information is being requested of them.
- Labels inform users what to expect in the list of select options.
- Labels are not helper text; be succinct. Use one to three words only.
- Helper text is pertinent information that assists the user in choosing the right selection from the select list.
- Helper text is optional but replaced with warning or error text when these states appear.
Behaviors
States
The select has multiple interactive states: enabled, hover, selected, focus, open, error, warning, and disabled.
State | When to Use |
|---|---|
Enabled | When the select is live and a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. An enabled select field should contain a default value. |
Hover | When a user’s mouse cursor is hovering over the field. |
Selected | When a user opens the list and selects an option within the list. |
Focus | When a user tabs to or clicks on the select field, the field becomes focused, indicating the user has successfully navigated to the component. |
Open | When a user opens the list. |
Error | When a select component marked as “required” has not had an option selected. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved. |
Warning | When you need to call the user’s attention to an exception condition. The condition might not be an error but can cause problems if not resolved. |
Disabled | When the user cannot interact with a component and all interactive functions have been removed. Disabled states are not focusable, are not read by screen readers, and do not need to pass visual contrast, making them inaccessible if they need to be interpreted. |
Interactions
Mouse
Users can open and close the list by clicking the chevron icon or clicking anywhere within the field. To select an option, the user can click anywhere inside an option list.
Keyboard
- The dropdown field is the element that receives focus. All keyboard interactions happen from this element.
- Users can open the list by pressing Space, Enter, the Down arrow, or the Up arrow.
- Users can move the highlighted option to the next option by pressing the Down arrow.
- Users can move the highlighted option to the previous option by pressing the Up arrow.
- Users can close the list by pressing Escape, Space, or Enter.
Validation
Invalid
Real-time validation helps to streamline the process of filling out a form. The error state is triggered if the data is invalid or a required field is left empty. The error state has three visual indicators to signify invalid content: a red border, an error icon indicator, and an error message.
