Components/Select

The select component is commonly used to enable users to select an item from a predefined list. It should be used when there are less than 12 items to choose from.

**Use select if:** - Users need to select one item exclusively from a short list of options (for example, fewer than 12 items). - The values of the option list are of secondary importance and do not need to be displayed right away. **Do not use select if:** - Users need to choose between two options, such as _On_ or _Off_ and _Yes_ or _No_. In this case, consider using a **Switch** instead. - Users need to pick one item from a very large set of options. In this case, consider using the **Combobox Input** instead. - Your use case requires all available options to be displayed right away, without any user interaction. In this case, consider using **radio buttons or a radio button group** instead. **Use select if:** - Users need to select one item exclusively from a short list of options (for example, fewer than 12 items). - The values of the option list are of secondary importance and do not need to be displayed right away. - Users need to choose between two options, such as _On_ or _Off_ and _Yes_ or _No_. In this case, consider using a **Switch** instead. - Users need to pick one item from a very large set of options. In this case, consider using the **Combobox Input** instead. - Your use case requires all available options to be displayed right away, without any user interaction. In this case, consider using **radio buttons or a radio button group** instead.

Select displays a predefined option and a button that triggers a dropdown menu to view more options (list items). By default, it is displayed in cozy mode.

Select is displayed in a full-screen dialog when viewed on mobile (and some tablet screens). The dialog displays a list where the first list item is pre-selected. To display select in mobile mode, wrap the select component in **Dialog** and **Bar** components.

Select can be displayed in semantic states to communicate *Success*, *Error*, *Warning* or *Information* to the users. They can be displayed as either messages within the dropdown list, or by itself as a static message. To display select in various semantic states, add the class (shown below) to the \

When displaying select within a form, you can apply the \

Select can be displayed with two columns in the dropdown list view. The column width should be adjusted depending on the use case, but always with a default ration of 60% (first column) to 40% (second column). To display a second column, add the \

Not only can select be displayed with two columns, but also with icons. To display icons, add the \

Select can be displayed with headers that group the list items in the dropdown menu. To display group headers, add the \

The select component wraps text by default, and there is virtually no limit to the text length. However, it is recommended to keep the length to a minimum for readability. The second column will always remain center-aligned, despite the length of the list item.

Although select wraps text by default, it is possible to prevent wrapping. To achieve this, add the \

Select can be displayed as a popover, using all of its specifications. The default size for the popover body is often longer than the text length. The body can be adjusted to match the text length by adding the \

There is a way to make larger select select body, To achieve it, add \

Select can be disabled to communicate to the user that the control cannot be selected. To disable select, add the \

Select can be displayed as read-only, meaning the value in the input field cannot be changed via typing. To display select as read-only, add the \

The select component can display a blank list item instead of a pre-selected list item, prompting the user to select the dropdown button to see more. To display a blank list item, simply enter a few spaces in the title of the list item.