Dropdown

🧭 When to Use a Dropdown

Use a Dropdown when:

• You want users to select one item from a known list

• You need to minimize errors or simplify complex forms

• The list of options is short to medium in length (4–15 items)

Avoid using Dropdowns for long or searchable lists — use Multi-Select Searchable in those cases. Also, avoid Dropdowns for binary choices like Yes/No or On/Off — use a Switch or Radio Buttons instead.

🧩 Component Structure

The Dropdown is a composite component made up of:

• Label – Describes the purpose of the selection

• Field – The container reflecting the input’s current state (hover, focus, disabled, etc.)

• Menu – The list of options that appears when the field is clicked

• Selected Item – The text (and optional icon) shown inside the field after a selection is made

• Caret Icon – A visual indicator that the field is expandable

Each part is controlled via variants and layer properties in Figma. The component expands downwards and adapts to theme tokens automatically.

🎨 Visual Behavior

Dropdowns inherit their styling from the Field component. This means they support:

• Default, Hover, Active, Disabled, and Filled states

• Error state (e.g., when no selection is made in a required form)

• Pre- or Post-elements such as icons, prefixes, or buttons

• Optional subtext or helper text beneath the label or field

The menu uses the standard Menu component styling with item hover and selected states built in.

🎯 Interaction States

• Default – Resting state with no selection made

• Hover – Field becomes highlighted when hovered

• Focused – Focus ring or active border appears when the field is clicked or keyboard-focused

• Expanded – Menu becomes visible; selected item is highlighted

• Selected – Chosen value is shown in the field

• Disabled – Menu cannot be opened and the field is muted visually

• Error – Red outline, optional error icon, and message below the field

All interactions are reflected through Field tokens and Menu variants.

🧠 Behavior & Options

• Close on select – Once a value is chosen, the menu closes

• Default selection – Can include a placeholder or first item as pre-selected

• Keyboard support – Arrow keys navigate the list; Enter selects

• Optional icons – Each menu item can include an icon or avatar

♿ Accessibility Considerations

From a design perspective:

• Use clear labels for each Dropdown

• Make sure the selected state is visually distinct and not color-only

• Keep touch target size above 44x44px

From a code perspective (if implemented):

• Use semantic button for the trigger and ul > li for the menu

• Include aria-haspopup="listbox" on the field

• Add aria-expanded, aria-controls, and aria-activedescendant for screen reader support

• Highlight selected options with aria-selected="true"

✅ Best Practices

• Keep options concise—avoid wrapping text or multiline labels

• Group related options with dividers or categories if needed

• Use placeholder text like “Select one…” when no option has been chosen

• Don’t forget to handle error states gracefully, especially in forms