Overview

Dropdowns (select boxes) are a type of input used in forms, where a user is submitting data and chooses one option from a list.

In context: https://www.ft.com/register

Usage

Do

✅ Use inside a form where users are selecting from a list of options and submitting data.

Don't

❌ Use for filtering or sorting content on a page.

Design

Anatomy

Select Boxes comprise of:

• Control: A button that may contain an icon, or be labeled with text.
• Trigger: Used if the button is labeled with text.
• Menu: Container for options and action items.

Behaviour

• By default, the dropdown displays placeholder text in the field when closed.
• Clicking on a closed field opens a menu of options.

Dropdowns are able to