Select

Allow a user to select an option from a list.

When to use select?

Select are used to allow a user to select one option inside a list. They are mainly present in form-based component.

- When there is multiple options in a list and the user can only select one.
- To gather multiple options in a same place.

- If you want to allow users to select multiple item
- If you have only 1 option
- If you have less than 3 options, use radio button

Select with label

When you design modal, form, full page layout.

Select without label.

When you design isolated elements or compact components.

DO	DON'T
Sort options in a list logically (e.g., alphabetically, ascending, descending).	Don’t order options in a list randomly.

DO	DON'T
Use option text concise and simple.	If the option selected if wider than the container you shouldn’t be carfeul to don”t have it cropped.

DO	DON'T
Use a safe and representative option as the default selected value, or an option that tells users to choose from the list.	Use by default an option already given in the list as a default value.

DO	DON'T
Use a required to add any other information about the select.	Use a required to add any other information about the select.

DO	DON’T
Use compact size if compact elements are present	Use default size if compact elements are present