Design
Specifications
- Hint: Hints are optional. Use placeholder to describe expected value
- Labels: Each select must have an associated label.
- Min-Height: Selects should have a minimum height of 48px and 44px on mobile
- Min-Width: The minimum width for selects is 320px and 100vw on mobile
- Placeholder: Placeholders are mandatory and serve as a hint to users as to what input is expected [this could be either a sample value or a short description of the value.]
- By default, all form elements are mandatory; label them as optional only if they are indeed optional.
States
The Select has the following states:
Default
State of select before user interaction
Filled
Default state of select before user interaction
Active/Focus
State of when user interacts with select
Active/Focus when filled
State when select active but already filled
Error
State of select when no value is selected.
Error when filled
State of select when the selected value is invalid.
Disabled
State when select exists but can not be modified.
Read-Only
State when an input exists but can't be changed.
Component Tokens
Colour Tokens
Border Radius
Border Width
Shadows
Spacing
Typography