Consider interface density and the select’s position when choosing between the three available sizes. (Sizing itself is controlled by the form modifier component.)

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

Lookup select is ideal for lists with more than 15 items, but be careful not to overdo it. (For a smaller list, try a single select.)

Don'tgive them thousands of items to choose from.

Domake the list a reasonable size for users to filter.

Option content should be familiar to the user–they should have an idea of what’s in the list before opening the select. That familiarity helps them decide what to type.

Don'tframe every item differently in an unhelpful order.

Doprovide a logical list of related items.

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

Lookup select placeholders should read “Find a/an __”. Find implies they can and should take a more active approach by typing to generate results. Just like single selects, the article a/an makes it clear they’re only choosing one.

Lookup select options are typically single words or names. If your options go beyond that, be sure to follow the non-label text guidelines.