Selects

A select is a custom form element used to choose one or more items from a collapsible list.

Select Anatomy


Types

A select can be implemented one of three ways. Each depends on the select’s options and how we want the user to interact.

Single Select

A single select dropdown with no typeahead or search functionality; ideal for shorter lists with familiar options

Single Select

Lookup

A single select dropdown with typeahead to filter a long but finite list

Lookup

Multi-Lookup

A multi-select dropdown with typeahead to filter and add options

Example coming soon.


General Usage

Selects should be used in a form scenario where the user is choosing from a group of options.

Only use selects with content familiar to the user–they should have an idea of what’s in store before opening the Select.

Do and Don't: Familiar Content

Ideally, every select should have at least five items. For fewer than five, use a radio or checklist.

Do and Don't: Five Items

The select’s placeholder should always read as a CTA with sentence case and no punctuation.

Do and Don't: Placeholder

Always allow enough space for several options to appear below. If space is tight, try a different layout or form element.

Do and Don't: Flow Off Screen


Option Guidelines

Options are not limited to a single line of text. Additional text and images are allowed, just be consistent.

Options with Layout

One common example for a custom option 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. Size your placeholder accordingly.

Do and Don't: Placeholder Size

To distinguish a selected item from the rest of the list, color according to our selection guidelines.

Selected States

Option Groups

Use option groups for easier navigation in larger lists, e.g., putting the “most popular” items at the top.

Option Groups

Option groups are separated with space and dividers.

Organize and order groups logically. Use the optional group label for increased clarity.

Options within a group cannot be mass-selected by clicking the label.


Sizes

Select sizing is dictated by the field sizes listed under Forms.

Select Sizes

Regardless of size, the default maximum height is set to expose 6.5 text options.

Select Maxium Height

  • This maximum height can be adjusted for cases where 6.5 options may either be too tall (near the bottom of the screen) or too short (near the top).

  • Any Select with custom options should have an adjusted maximum height.

  • The maximum height should always split an overflow item to hint that scrolling is available.

Select Maxium Overflow


Color

Selects support both light and dark environments. All colors correspond directly, with the exception of adding a border in DE.

Selects Environments


Single Select Guidelines

A single select dropdown with no typeahead or search functionality; ideal for shorter lists with familiar options

Use Single Selects for lists around 5-15 items long.

Selects Too Long

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.


Lookup Guidelines

A single select dropdown with typeahead to filter longer lists

Use lookups for lists containing more than 15 items, but don’t overdo it with 1,000+ options.

Typeahead allows the user to quickly find an item in the larger list, creating a smaller list of all possible matches.

Select Lookup

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


Multi-Lookup Guidelines

A multi-select dropdown with typeahead to filter and add options

Additional guidelines coming soon.


Implementation

To implement all selects as React components, head to Uniform-UI-Components Github.

Note: We moved and updated the component guidelines. Be sure to use the link above for all future selects.