The single select functions similarly to a radio in that the options are mutually exclusive. Unlike the radio, it’s more space efficient—especially as the number of options (and each option’s length) increases. If the list grows too large, consider a lookup select.
Consider the interface’s density and the select’s position when choosing between the three available sizes. (Sizing itself is controlled by the form modifier component.)
X-Small: Ideal for dense interfaces.
Use a picker to display the results when selecting a single option. If using our React Native component, this is done for you.
Don'tmake the list too long with options the user may not predict.
Dokeep the list short so typeahead is not needed.
Option content should be familiar to the user–they should have an idea of what’s in store before opening the select.
Don'tframe every item differently in an unhelpful order.
Doprovide a logical list of related items.
Use option groups to divide larger lists into logical sections, like putting the most popular items at the top. You can also add labels for increased clarity.
Options are not limited to a single line of text. Additional text and images are allowed, just be consistent with the content.
A common custom option example is listing athletes with avatars–it should always be for the sake of helping users find what they’re looking for.
If you do include additional text and/or images, the closed height cannot change once an option is selected.
Don'texpand the closed state for large selected options.
Domodify the selected item preview to match the placeholder size.
Allow enough space in your interface or adjust the max-height to prevent the option list from expanding beyond the screen.
By default, 6.5 items will show when the option list is expanded. If you use option groups or custom options, adjust the max-height to ensure it falls on a ½ item to signal the user can scroll.
Don'tallow overflow to land between options and give the impression all options are visible.
Dosize the maximum height to split an option and make scrolling obvious.
Single select placeholders should read “Select a/an __”. By limiting the CTA to select, we’re suggesting there is a list to choose from. The article a/an makes it clear they can only choose one.
Single select options are typically single words or names. If your options go beyond that, be sure to follow the non-label text guidelines.
|No guidelines exist for other platforms (yet).|