Select allows users to make a single selection from an options menu.
Keep in mind that Select should not be used without the label. We provide SelectField component, which contains label, help or error message if needed.
Table of contents
How to use Select
- Use Select to present many different options in one component
- When you have only a few options try to show them all at once, using Radio buttons.
- Use Select in Forms
- Order the list of options in a logical way, so it make sense for the user
- Don't use Select for a very long list of options, instead for those cases use Autocomplete
- if you use Select component add your custom label to it or use our SelectField instead
Select vs dropdown
- Dropdown menus are typically used for navigation or command menus, where an action is initiated based on the selection.
- Select is a type of input, where the user is choosing one option from the list, typically used in Forms.
Select state (
Select with placeholder
Select with error
- Options should be written in sentence case (the first word capitalized, the rest lowercase).
- Options should be labeled in a clear way, so it's obvious what the option will do
- Select should contain a label, if needed help message and validation message if needed. We provide SelectField component, that contains all of those elements.
- Select should always a