Select is an input for selecting a single option from a menu.
On this page
On this page
Use select to allow users to pick a single option from a dropdown menu of predetermined options.
Focused: The input has been navigated to and is ready to accept input.
Disabled: The input cannot accept input or become focused.
Invalid: The value failed validation.
Valid: The value passed validation.
For more information about the "valid" and "invalid" states, see the validation section of the form design pattern guidelines.
- Use a select input for longer lists of options. If there are 6 or fewer options and you don't need to conserve vertical space, consider using a radio group 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.
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.
A text input can be made smaller or larger depending on the context it's being used in.
You could make an input smaller if it is being used in a tight space with other small elements. You could make an input larger if it's in an open space or it feels out of proportion with adjacent large elements.
By default, a select input will be as wide as the text of it's longest option.
You can render a select input to fill the width of it's parent element.
With a placeholder
You may show placeholder text when no option is selected. The placeholder option is hidden from the dropdown menu when a selection is required.
This is just a native select, so the interactions will match the paradigms of the user's OS and browser.
Select placeholders cannot be used in place of labels and should be used sparingly. They also should not convey critical information.
Select options should not be prefixed with emoji, as that disrupts typeahead behavior.