Default single select

The select component, also known as a select or dropdown menu, is a widget which displays a list of selectable items from which the user can select one value.

Having the same functionality as a Radio button but relatively more UI friendly from a screen real estate perspective, when there is a large (usually 5 or more) number of list items. These are hidden in a container that is made is available on interaction.

Do's

• allow placeholder text to indicate type of input desired
• use the select component to limit the number of choices that the user can make
• use appropriate size (small, medium, large) depending on the situation you are using the component in
• use dropdown select menu labels as click targets (clicking the label will trigger the action)
• ensure that the clickable area of the select component is large enough to be easily selectable with a cursor or finger

Don'ts

• don't use the select component for large items or data that requires complex analysis

When to use

• use when you have 5 or more items that are mutually exclusive

When not to use

• do not use when you have 5 or more items from which users can select more than one - use Multi-select instead

Multi-select

The multi-select component, is a variation of the select component, which displays a list of selectable items from which the user can select multiple values.

It offers the same functionality as a Checkbox but it is more UI friendly from a screen real estate perspective, when there is a large (usually 5+) number of list items. These are hidden in a container that is made is available on interaction.

Do's

• allow placeholder text to indicate type of input desired
• use the select component to limit the number of choices that the user can make
• use appropriate size (small, medium, large) depending on the situation you are using the component in
• use dropdown select menu labels as click targets (clicking the label will trigger the action)
• ensure that the clickable area of the select component is large enough to be easily selectable with a cursor or finger
• keep in mind that the order is based on the HTML structure, for this reason group select options into logical categories and provide a clear label for each group

Don'ts

• don't use the select component for large items or data that requires complex analysis
• don’t use the multi-select component to limit the number of choices that the user can make, use default instead

When to use

• use when you have 5 or more items that are not mutually exclusive

When not to use

• do not use when you have 5 or more items where you want to restrict selection to a single one - use Select instead