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.)

Use a picker to display the results when selecting a single option. If using our React Native component, this is done for you.

A single select works for shorter lists with familiar options, ideally 5-15 items. For fewer options, use a radio. For more than 15, use a lookup select.

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.

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.

List Height

Copy URL

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.