A select is a selection tool used in forms, allowing user to choose between multiple predefined options.
Overview
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
Label
The label helps the user to understand what information is needed in the select.
Requirement
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
Help text corresponds to a relevant piece of information to make sure the user understands what is needed.
Input only
In specific use cases, you can use a select without label. For example to sort items in page list or search engine result page.
Validation
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.
Sizes
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 '--' before and after the first option used as a placeholder with spaces between the dashes and the text.
Good to know
Learn more about the good practices of selects on this article.