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

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.