Dropdown List

The dropdown list allows users to select an option from a list of options. The options will only be visible when user clicks on it.

Default
Label
Option 1
Option 2
Option 3
Option 4
Helper text
States
Label
Select an option
Default Empty field, waiting for user interaction. Placeholder is visible.
Label
Select an option
Hover Hover state indicates interactivity when the cursor is on the dropdown field by changing the border colour.
Label
Select an option
Active/Focus Active state: Occurs during the moment an element is being activated by the user's input. Focus state: Indicates that an element is currently selected to receive user input.
Label
Select an option
Disabled Value is visible but not editable.
Label
Option 1
Filled Field contains a user-selected value. Placeholder is replaced by the selected option.
Label
Select an option
Option 1
Option 2
Option 3
Option 4
Open The dropdown list is expanded and all available options are visible. The chevron icon points upward.
Label
Select an option
This field is required
Error Triggered when validation fails. (On form submit) Red border + error message guides user to correct the selection.
Behaviour
With dropdown list
  • Expands on click or tap to reveal the list of options.
  • Closes when an option is selected or when the user clicks outside the dropdown.
  • Scrollbar appears when there are more than 4 options.
  • The selected value replaces the placeholder text upon selection.
Specs
1
Label
  • Describes the purpose of the dropdown field.
  • Recommended max 100 char
2
Trigger field
  • The single interactive field that serves two purposes depending on state.
  • Closed: Shows placeholder text or the selected value. Clicking it opens the dropdown panel.
  • Open: Transforms into a search input. The user types directly here to filter the list. Placeholder changes to "Search…"
  • Max 50 char for search input.
3
Helper text
  • Optional. Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
4
List item
  • Visible only when the dropdown panel is open.
  • Each list item is a selectable option.
  • Recommended max 45 char
Closed state — items 1, 2, 3
1 Label
2 Select an option
3 Helper text
Open state — items 2, 4
2 Select an option
Option 1 4
Option 2
Option 3
Dos and Don'ts
  1. Use the dropdown list for 4 or more options. For 2 to 3 options, use radio buttons instead.
  2. Organise options logically, such as alphabetically, chronologically, or by frequency of use.
  3. Keep option text short to avoid truncation on smaller screens.