Overview

Purpose

The Select component is used as part of a form where users can select an option from a list. Select is different to a dropdown component, which is used for filtering or sorting content as the action of making a selection has an immediate effect to the content on the page.

Select inputs are similar to the Radio component as both components let the user select only one option. If you have six or fewer options, it’s recommended to use the Radio component instead of the Select input, so the user can see all options up front.

The Select input saves screen estate, but requires the user to click to see all available options. It might also require the user to scroll to see all options, which should be avoided on mobile if possible.

Anatomy

The Select component can be broken down into the following elements -

1. Mandatory indicator (optional)
   The asterisk indicates whether making a selection is optional or mandatory.

2. Label
   The text label is used to describe the required selection from the user.

3. Prompt or Selection
   Request the user to make a choice, or display the selection they have made.

4. Select chevron
   Icon to open up the native selection panel.

5. In-line Messaging (optional)
   An optional text field that can be used for further information, clarifying the required selection.

6. Validation Message
   A success or error message after the field has been validated.

Variants & States

There are several states available to visualise the user’s progress. Each status comes with a hover variant.