Dropdown (with search)

The Dropdown List with Search allows users to quickly find and select an option from a long list. A search field appears at the top of the dropdown so users can filter options by typing keywords.

Default
Label
UOB 1
UOB 2
UOB 3
UOB 4
Singapore
Malaysia
Thailand
Indonesia
Helper text
States
Label
Search
Default Unselected state, waiting for user interaction. Placeholder is visible.
Label
Search
Hover Hover state indicates interactivity when the cursor is on the input field by changing the border color.
Label
Search
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, whether from a keyboard, mouse, or voice.
Label
Search
Disabled Value is visible but not editable.
Label
UOB 1
Filled Field contains user input. Placeholder is replaced by entered value.
Label
U
UOB 1
UOB 2
UOB 3
UOB 4
Search/Typing When users type in the search field, the list dynamically filters to show matching results.
Label
Search
UOB 1
UOB 2
UOB 3
UOB 4
Open Dropdown menu is expanded, displaying the full list of selectable options.
Label
Search
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.
  • On selection, the selected value replaces the placeholder text.
  • Supports scrolling if the number of options exceeds the visible area.
Search
  • The search field appears at the top of the dropdown component.
  • As the user types in the search field, the list dynamically filters to show matching results.
  • Matching is not case-sensitive.
  • If no matching results are found, a "No results found" message is displayed.
Specs
1
Label
  • Describes the purpose of the input 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
Field icon
  • 14×14, SVG (same asset as country phone search)
  • 24px-wide column on the left; icon vertically centered
4
Helper text
  • Optional. Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
5
List item
  • Displays the available options for the user to select.
  • When the user types in the search field, only matching list items are shown.
  • Clicking a list item selects it, closes the panel, and updates the search field with the selected value.
  • Recommended max 45 char
Closed state — items 1, 2, 3, 4
1 Label
2 Search 3
4 Helper text
Open state — items 2, 3, 5
2 Search 3
UOB 1 5
UOB 2
UOB 3
Dos and Don'ts
  1. Use the dropdown list with search when the list contains many options.
  2. Provide clear and concise list items so the user can search efficiently.
  3. Keep option text short to avoid truncation on smaller screens.
  4. Do not use the search dropdown for short lists of 2 to 3 options. Use the standard dropdown list instead.
  5. Do not use long or unclear list items that are difficult to search for.