Select: style
The following page outlines visual specifications including colour, typography, structure, and sizing.
| Element | Property | Colour reference | Colour token |
|---|---|---|---|
| Label | text colour |
Text secondary
|
$form-label |
| Assistive / helper text | text colour |
Text muted
|
$form-helper |
| Input text | text colour |
Text primary
|
$form-input-text |
| Input field | background colour |
UI background 01
|
$form-input-background |
| border colour |
UI border 01
|
$form-input-border |
Interactive state colour
| State | Element | Property | Colour reference | Colour token |
|---|---|---|---|---|
| Focus | Input field | border colour |
Focus 01
|
$form-input-border-focus |
| Error | Input field | border colour |
Error 01
|
$form-input-border-error |
| Error message | text colour |
Error 01
|
$form-validation-error | |
| Disabled | Form text | text colour |
Disabled overlay 03
|
$form-text-disabled |
| Input field | background colour |
Disabled overlay 01
|
$form-input-background-disabled | |
| border colour |
Disabled overlay 02
|
$form-input-border-disabled |
Validation message
Validation message
Validation message
Validation message
Typography
Select text should use sentence case, capitalising only the first word and any proper nouns. Labels should be concise, ideally three words or fewer, except when used for data capture questions.
|
Element
|
Size (px/rem)
|
Weight
|
Line height (px/rem)
|
Letter spacing
|
Token
|
|---|---|---|---|---|---|
| Label | 20 / 1.25 | Medium – 500 | 28 / 1.75 | 0.16px | $label-03 |
| Input field text | 16 / 1 | Regular – 400 | 28 / 1.75 | 0.16px | $input-text-02 |
| Assistive / helper text | 12 / 0.75 | Regular – 400 | 16 / 1 | 0.25px | $support-01 |
| Error message | 12 / 0.75 | Regular – 400 | 16 / 1 | 0.25px | $support-01 |
Medium select
Validation message
Assistive text
Validation message