IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Select

/

Design

Provide a list of options as a dropdown menu.

When the list of choices grows too long for a radio or checkbox , use one of our selects. They're great for progressively disclosing a lot of information at once.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Select and Creatable Select documentation and examples.

Type

We have three different types of selection when selecting items.

Find an athlete
IconUiExpandCollapseDown

Single: The single select functions similarly to a radio in that the options are mutually exclusive

  • Single: Functioning similarly to a radio, the single select is 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.
  • Lookup: Working best with long, preloaded lists, the lookup select, gives the user a good idea of how to filter its contents.
  • Lookup Multi: If a list is 15+ items long, a lookup multi-select works best.

Size

Consider the interface's density and the select's position when choosing between the three available sizes. The density (standard, compact) is dictated by the form modifier component. Check those guidelines for more detailed recommendations.

Select an athlete
IconUiExpandCollapseDown

X-Small: Ideal for dense interfaces.

Pills

Pills visually display selected items when a multi-select or lookup multi-select is used. They can filter content, list a large number of selections, and may be edited or removed.

  • Backspace: In creatable selects, you can hit backspace to remove the last item listed.
  • Dismiss a pill: Each pill can be removed by clicking the dismiss specific to that item or by tabbing to that pill's dismiss icon and using the enter key in creatable selects.
  • Dismiss all pills: The entire multi-select has its own dismiss positioned on the right. Clicking that will remove all selected items at once.
  • Edit a pill: Enable editing for a single pill by double-clicking into or hitting enter within the content area in creatable selects.
Al Attles
IconUiDismissSmall
Red Auerbach
IconUiDismissSmall
Elgin Baylor
IconUiDismissSmall
IconUiExpandCollapseDown

Backspace: You can hit backspace to remove the last item listed.

Microcopy

Sometimes forms can be lengthy. Users benefit from being provided additional detail about what information is required. In some cases, the information input doesn't meet the criteria of the form element. It's our job to guide them through successful completion of their task.

Placeholder Text

  • 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 and lookup multi-select placeholders should read “Select items,” making it clear that the user can and should choose more than one.

Help and Error Text

  • Help text: Give additional context to convey how the information will be used.
  • Error text: When validation fails, error text should replace the form's help text. The help text must be updated explaining why an error occurred and how to fix it.
  • Single item error: In some cases, validation may fail on a single item due to formatting or another reason. In these cases, highlight the incorrect item and replace the form's help text with steps to repair it.

Options

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

Don't allow errors without displaying help text.

Don'tallow errors without displaying help text.

Do use help text to explain why an error occurred and how it's fixed.

Douse help text to explain why an error occurred and how it's fixed.

Don't provide generic error text when it doesn't apply to all items.

Don'tprovide generic error text when it doesn't apply to all items.

Do write error text to help resolve a single error.

Dowrite error text to help resolve a single error.

Mobile

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

Usage

List Length

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

Don't make the list too long with options the user may not predict.

Don'tmake the list too long with options the user may not predict.

Do keep the list short so typeahead is not needed.

Dokeep the list short so typeahead is not needed.

Options

Option content should be familiar to the user–they should have an idea of what's in store before opening the select.

Don't frame every item differently in an unhelpful order.

Don'tframe every item differently in an unhelpful order.

Do provide a logical list of related items.

Doprovide a logical list of related items.

Option Groups

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.

Select...
IconUiExpandCollapseDown

Custom Options

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.

For complex lists, use option groups to divide items into logical sections, like putting the most popular items at the top. You can also add labels for increased clarity.

Select...
IconUiExpandCollapseDown

If you do include additional text and/or images, the closed height cannot change once an option is selected.

Don't expand the closed state for large selected options.

Don'texpand the closed state for large selected options.

Do modify the selected item preview to match the placeholder size.

Domodify the selected item preview to match the placeholder size.

List Height

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't allow overflow to land between options and give the impression all options are visible.

Don'tallow overflow to land between options and give the impression all options are visible.

Do size the maximum height to split an option and make scrolling obvious.

Dosize the maximum height to split an option and make scrolling obvious.

Max Height

Should the selected items exceed one line, the default max is set to 2.5rem. If you need something larger, we suggest the half-line to indicate more items are listed and the user can scroll. The sole exception is using the lookup multi-select type. The input should grow to accomodate all selected items in the pill list.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconCritical ViolationIconCritical ViolationIconWarning Warning
  • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
  • IconCriticalComponent contains an interactive div or span with no associated role.
  • IconWarningCSS outline property is used unexpectedly. (Stylelint)
React NativeIconCritical ViolationIconWarning WarningIconWarning N/A
  • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
  • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
Android