Components / Inputs / DropdownOpen in Figma

Dropdown

Ready

A field that opens a list so people choose one option from a known set.

Platforms Phone · TabletGroup InputsUpdated 26 Oct 2026

When to use

  • People choose exactly one option from a list the app already knows: a type, a category, a department.
  • The list has more than three options. For two or three, show them all as option rows.

When not to use

If people need toUse
Type free textText field
Choose several optionsCheckbox, or a picker field for people, sites and animals
Pick a date or a timeDate field
Choose people, sites or animalsPicker field
Filter a listSearch and filter
Run an action on a recordMenu

Anatomy

Option 2keyboard_arrow_down
  1. Label · required
  2. Required mark · when a choice must be made
  3. Container · required
  4. Chosen option or hint text · required
  5. Chevron · required, always on the right

Variants

VariantPurposeFigma
FieldInside forms. Same size and border as the text fieldDesigned
Compact40 tall white box with no border, in tablet list toolbars beside the filter buttonDesigned
InlineNo box: the chosen option and a chevron in the screen header, for screen-wide choices such as a month or a siteDesigned

States

StateWhenWhat changesFigma
EmptyNothing chosen yetHint text "Select" in Hint greyDesigned
FilledAn option is chosenChosen option in Teal inkDesigned
OpenThe list is showingA bottom sheet rises with one option row per choice; the chosen row has a green border, Field fill and a filled radioTemporary rule
ErrorA required choice is missingRed border and a red message 4 belowTemporary rule
DisabledThe choice can't be changed nowDisabled fill; text and chevron in Hint greyTemporary rule

Behaviour

  • Tapping anywhere on the container opens the list as a bottom sheet titled with the field label.
  • Tapping an option chooses it and closes the sheet at once. There is no Save button for a single choice.
  • Closing the sheet with × or by tapping the dimmed area keeps the previous choice.
  • With more than seven options, a search sits at the top of the sheet body.
  • A dropdown never holds actions. Edit, delete and other actions go in a menu.

Phone and tablet

PhoneTablet
Label to field812
Field widthFull width of the sectionTwo fields side by side when they belong together, gap 16
Compact variantAllowed in list toolbars; the field is preferredIn list toolbars, right side, gap 8 to the filter button

Content

PartRule
LabelA noun in sentence case, no colon: what is being chosen
Hint text"Select" on its own. The label already names the thing
OptionsSentence case, short, no ending punctuation; ordered as people expect (by size, time or alphabet), never at random
Error messageSays what to do in one line, starting with a verb: "Choose an option"

Do and don't

Option 2keyboard_arrow_down
DoUse the same Line border as every other field.
Option 2keyboard_arrow_down
Don'tGive the dropdown a darker or double border to set it apart.
Option 1radio_button_checked
Option 2radio_button_unchecked
DoShow two or three options as rows people can see at once.
Selectkeyboard_arrow_down
Don'tHide a two-option choice behind a dropdown.
Text fieldPicker fieldBottom sheetMenuForm layout
← Text fieldDate field →