Single Select
We use single selects to allow our users to choose a single option from a list, presented in a dropdown. We typically see these selects on forms.
If you want users to select multiple options, use a multi select, group select, and tiered select if you want users to select from a tiered set of options, use a tiered select.
If you want users to select multiple options, use a multi select, group select, and tiered select if you want users to select from a tiered set of options, use a tiered select.
Demo and Developer GuidelinesAnatomy
There are multiple variations of single select components that can be used. However, all variations include a placeholder value, chevron icon, and options list.
Label
Single select labels are title case without punctuation. See the Field Label Glossary for common labels and their use cases.
Placeholder Text
Single select placeholder text is sentence case without punctuation. All select placeholder text says, “Select [item]”
Options
Options are sentence case without punctuation.
Errors
Please see In-Line Error Validation on Submit.
Types
Single Select
Single select allows users to select one item from a predefined list of options. When the user opens the menu, the first option is selected, and as the user hovers or arrows down the options, selected options are highlighted.
Single Select + Suggested Option
Single select with a suggested option allows users to select one item from a predefined list of options. When the user opens the menu, the system will scroll to a selected suggested option.
Notice the highlighted option is not the first item.
States
Error
Please see In-Line Error Validation on Submit.
Behavior
Truncation
Text in selects should ellipsis when it is longer than the width of the select. A tooltip should be present on hover when text ellipsis, displaying the full value.
Variations
Specifications
Padding
Styling
