Anatomy
Our select field containers are outlined with rounded corners. The label text is placed outside of the container for accessibility reasons and is used to inform the user about the requested information. Additionally, a select can contain different optional elements to assist the user the best way possible. For further guidelines on how to apply a select, please continue with the Usage page.
- Label
- Hint text (optional): short copy to assist the user
- Leading icon (optional): to add weight to it and indicate the type of input
- Selected value or placeholder: selected or pre-filled value. Could also be a placeholder when no value is selected
- Select icon: indicates the type of interaction
- Dropdown menu: the type of menu is platform dependent. For Web it could have our own styling or the native variant. For other devices, like phones, it switches to a platform specific, native, picker.
States
