Dropdown
Dropdown allows users to select one option from a list. Use this component when there are too many options to display them as radio buttons or when it's beneficial to be able to return to a default value.
Configurations
Description
Label as a heading
Optional field
Short fieldLength
Behaviour
Negative validation
Disabled state
Note: we prefer to avoid using disabled states where possible, as they can be challenging for screen readers, but ocassionally it may be neccessary.
Implementation
Props
label
string
A label for the input element.
description
string
Guidance to describe what should be selected.
status
unknown | invalid | valid
The validation state of the field.
errorMessage
string
A descriptive message if the status
is invalid.
labelTypeStep
snail | mouse | otter | dolphin | hippo | mammoth
The font-size of the label
labelIsHeading
boolean
Sets the spacing between the label and the form input to earth if set to true. Defaults to mars,
or the spacing
provided.
spacing
snail | mouse | otter | dolphin | hippo | mammoth
Sets the spacing between the label and the input, if labelIsHeading
is set to false.
fieldLength
short | long
Sets the length of the input to 10rem if shorts, or 24rem if long. Defaults to long.
optional
boolean
Adds the word "optional" to the label.