For Designer

Components/Inputs

Dropdown

Dropdowns open a list of options under a field, so people can pick one or several without typing

Variants
32
Types
4

Playground

Playground

Pick a variant, then open the menu and choose a row

Payment method

Type=Default · Size=Small · State=Default

Pastes into Figma as editable auto layout layers with Unictive values, the open menu copies as a panel of rows. Click the button or press ⌘C to copy

Types

Types

The lead tells people what kind of option they are picking, an icon, a person, a country or a checkbox for multi-select

Sizes

Sizes

Small rows show the title only, Large rows add a description line and a bigger lead

States

States

Hover and Selected fill the row, Selected adds a check at the end, Disabled greys out the text and lead

Usage

When to use

Use when

  1. People pick from a known list of options, like a country, a person or a payment method
  2. The list has more than five options or space is tight, so radio buttons would take too much room
  3. People pick several options from a long list, use the Checkbox type and keep the menu open

Avoid when

  1. There are five options or fewer and all should be visible, use a Radio Group
  2. The answer is free text or a number, use a Text Input
  3. The value is a date, use a Date Picker

Guidance

Do and don’t

WIB, Jakarta+62, Indonesian rupiahWITA, Makassar+62, Indonesian rupiahWIT, Jayapura+62, Indonesian rupiah
Do

Keep every row in one menu the same type and size, and mark the current choice

WIB, JakartaPay from any Indonesian bank accountWITA, MakassarProduct designer, JakartaWIT, JayapuraA weekly summary of account activity
Don’t

Don’t mix types or sizes in one list, it breaks the scan line and hides which row is picked

Specs

Tokens and specs

PropertyTokenValue
Item width—320 Small, 360 Large
Item height—36 Small, 58 to 60 Large
Padding, Small8 px
Padding, Large12 px sides, 10 px top and bottom
Gap8 px Small, 12 px Large
Corner radius10 px Small, 12 px Large
Fill#FFFFFF
Hover and selected fill#F7F7F7
Title#171717
Description#5C5C5C
Disabled text and icon#D1D1D1
Icon box border#EBEBEB
Lead size—20 px Small, 32 px Large
Selected mark—check-solid, 16 px
Title style, SmallInter Regular 14/20
Title style, LargeInter Medium 14/20
Description styleInter Regular 12/16
Esc