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.