Select

Select offers multiple choices in a compact way.

Select displays a list of options for users to choose from. It provides the option to let users select a single option or multiple.

The custom button for select comes with a few variants -

The standard variant consists of just text which changes its state when one or more options are selected.

This variant comes with an icon in the left, preceding the text to provide additional cues regarding the type of the options.

This variant comes with a label preceding the text and can be used at places where there is a space crunch.

The options in a select can be single select or multi-select. They come with a few variants -

This variant comes with just text.

This variant comes with an icon preceding the text.

This variant comes with sub-info beneath the text.

This variant comes with the support of checkboxes to select multiple options. The options here can also have sub info just like the previous variant.

This variant allows you to add an option to the list in select.

Select trigger comes in 2 sizes - small and regular.

The custom button comes in 5 states - default, hover, focus, active and disabled.

Option items come in 5 states - default, hover, active, focus and disabled. In addition to the aforementioned states, option items also have the selected-default, selected-hover, selected-active, selected-focus and selected-disabled state.

Note: Users can also use the up/down arrow key to traverse the options.

Select is made up of 2 key components - a custom button which acts as a trigger and a popover which acts as a container for the options.

Select can be offered with a search functionality. In that case, the search input appears at the top.

If the label exceeds the available space, it will be truncated and can be seen in a tooltip upon hovering.

Overflow behavior of trigger

If the label exceeds the available space, it will be truncated and can be seen in a tooltip upon hovering.

Overflow behavior of option Items

While the popover’s width is flexible and can vary, it is advisable to maintain a size that is equal to or larger than the trigger of select.

Width of popover

The select popover can showcase an unlimited number of items. However, for better user experience when dealing with a large number of items, it’s advisable to adopt best practices such as integrating a search feature for effortless navigation to handle a large number of options efficiently.

Select options can be grouped under a section using a sub header, if needed.

Grouping options under a sub heading

The label provides a better understanding of what kind of selection is expected. Labels can be placed either on the top of the select or can be placed inline with the value or placeholder of the select.

Help text can be provided beneath the select trigger to add context regarding the type of input required just like the input fields.

Using network resources on each checkbox selection in a select can be quite expensive. Select offers the option of incorporating actions in the footer in case of multiple selection, thereby facilitating a single API call upon clicking the Add/Apply button.

Select can also accommodate custom options inside it.

Custom options in select

It is recommended to use select if the number of multi-select options exceeds 5 or if the space is limited, to better utilize the space. Checkboxes should be used if the options are fewer than 5 and there are no space restrictions.

In certain cases select allows you to add your own option to the list, even if it isn’t available yet but will be needed in the future.

Adding option in select

It is recommended to use select when the users are encouraged to exercise caution and be mindful when adding options whereas in combobox the users are allowed to type in their value without any obstruction.

Note: Using select is a preferable choice when adding medication to a database to ensure accuracy and discourage users from creating their own abbreviations or names, promoting mindful selection.

Created option in select vs Input in combobox

These states are used to inform users about the status of the data that is being loaded in the select. Note: It is recommended to avoid using an image or illustration in these states due to the limited real estate available within the select.

Select having error in loading the options

[Left] No options vs [Right] No results found after search

Select can also be triggered by other components, primarily by buttons and icon buttons. The basic behavior of the select remains the same.

Examples of custom triggers in select