Chapter 4 › Lesson 18

18. Build a Dropdown Select Component

Skills: Closed state: field with chevron icon; Open state: list of options with highlighting; Component variants for open/closed; Instance swap for selected option text

A dropdown select has a closed state (showing the current selection with a chevron) and an open state (showing the list of options). You'll build this as a component with two variants.

18. Build a Dropdown Select Component
Figure: Closed state shows the selected option with a downward chevron. Open state expands a list of options below the field.

Step-by-step

  1. Press F and create a frame 320 wide × 44 tall — this is the dropdown field
  2. Enable Auto Layout, Horizontal, with padding: 12 left, 12 right, gap between items set to Space Between (or add a filler frame)
  3. Add a text layer for the selected option (e.g. "Select option...") — set colour to #8a8a82 for a placeholder look
  4. Add a text layer for the chevron icon (use ▼, ▼, or an actual chevron icon) on the right
  5. Select the whole field and press Ctrl + Alt + K to make it a component
  6. Add a variant property "State" with values "Closed" and "Open"
  7. In the Closed variant, keep the border default and the chevron pointing down
  8. Click the Open variant cell. Flip the chevron to point up. Optionally change the border to blue. Add an options list below the field: create 3–4 text items (Checking, Savings, Credit Card) as a vertical auto layout list
  9. Add a text property for the selected option text — so instances can show different selections
  10. Duplicate the component and change the text to test the text property

Pro tip

For the options list in the Open variant: make sure it's a separate frame grouped below the input field. Use a vertical auto layout for the list with gap: 0 and items that highlight on selection.