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.

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.