A select is a selection tool used in forms, allowing user to choose between multiple predefined options.
Selects are a combination of the following mentions. Please note that you can use four different cases:
- Label only + input
- Label + requirement + input
- Label + requirement + help text + input
- Label + help text + input
- Input only
The label helps the user to understand what information is needed in the select.
This mention allows to specify that this information is mandatory for the select to be valid.
Please note that this mention can also be used to say a specific select is optional when the other ones are mandatory.
Help text corresponds to a relevant piece of information to make sure the user understands what is needed.
In specific use cases, you can use a select without label. For example to sort items in page list or search engine result page.
There are two different elements for validation feedback:
- The color of the input outline.
- A text under the input explains what's wrong with the data entered.
You can use two different sizes to answer different needs. You can use both cases to suit your interface the best. Just keep in mind touch devices when placing smaller elements near each other.
Never use different select sizes together.
Do's and Don'ts
Always use a select with a meaningful label.
Always use a select maximum width in relation to the options line length.
It's recommended to use shorts option texts.
Always Capitalise the first letter of a select option.
Always use '--' before and after the first option used as a placeholder with spaces between the dashes and the text.
Don't use select with very short list of options, if you have less than 7
options, use radio buttons instead.
Don't use select if you have more than 15 values. It's recommended to use an
autocomplete search field inside a dropdown instead.
Never use preselected option, it can create an incorrect user data. Please use
a button group for the popular values, along with a select for the others.
Good to know
Learn more about the good practices of selects on this article.