Select

Anatomy

Edit in Figma

Label (required): A short title that labels the group of options and helps users understand the relationship between the options in the group

Required indicator: Indicates that a selection is required

Input (required): Displays the selected value and is used to toggle the dropdown menu

Caption: May be used to provide additional context about the options when the label alone is not sufficient. Caption text should be as short as possible. Caption text may be displayed at the same time as a validation message, or it may be hidden if it only provides redundant information.

Validation message: A single validation message may be displayed to provide helpful information for a user to complete their task. It is most commonly used to explain why a value is invalid so they can correct it and submit the form.

Best practices

• Use a Select component for longer lists of options. If there are 6 or fewer options and you don't need to conserve vertical space, consider using a RadioGroup instead.
• Provide a default selected option when possible
• Order the menu options in a logical order to make it easier for users to find the option they're looking for. Default to alphabetical order.

Interactions

This is just a native select, so the interactions will match the paradigms of the user's OS and browser.