# Dropdown

A dropdown enables the user to choose one or multiple options from a list.


## Overview

### Sizes

*   **Large**
    
*   **Small**: Used in tables and in certain cases where space is very limited. (Custom layouts are not supported.)

### Features

#### Label

All dropdown fields must have a label to ensure clarity and accessibility. Labels help users understand the purpose of the field, including those using assistive technologies.

#### Optional field indicator

We only ask for required information. If some fields are optional, we let users know by adding "(optional)" in brackets next to the field label. The word "(optional)" is shown in regular font weight to distinguish it from the label.

#### Support text

Use this to explain how to fill in the field, for example how to count or what to include.

### Contextual help

If the label and support text aren’t enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.

*   Use a tooltip if space is limited.
    
*   Use a modal for large amounts of text.

#### Leading icon

A leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed.

### Single select

Use this version when users should select only one option from the list.

### Multi select

Use this version when users should be able to select one or multiple options from the list.

### Search

A search field can be used to filter the options.

*   If the list is long (e.g., 10+ items), searching helps users find what they need faster.
    
*   When items are similar or not in a predictable order, searching improves efficiency.
    
*   If users have a specific item in mind, typing is often faster than scrolling.
    
*   Search helps users who navigate with keyboards or screen readers find options more quickly.

### Option groups

If the options can be grouped, this helps users find choices in large lists. The group can include a badge showing the number of options it contains.

### Custom option layout

The text slot for each dropdown and option supports a custom layout with multiple values, typically used for account selection. These layouts can be customised for specific use cases. Note that these fields are taller than a regular dropdown.

#### Combo box

This field allows users to type directly into it, like a standard input field. As they type, a list of matching options appears. If they enter an option that isn’t in the list, it is still accepted as a valid choice.

#### Clearable

To make it easy for users to clear a field, an x-icon button can be placed at the end of the field. This is commonly used in search/filter forms.

#### Error message

Used to indicate that a selection must be made from the dropdown or that there is an error with the selected option.


## UX Guidelines

### Writing UX text for drop-downs

### Use clear and informative words

### Placeholder text

### Capitalisation rules