---
title: "Dropdown"
url: "https://developer.incode.com/design-and-ux/dropdown/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Dropdown

Dropdowns allow users to select a single option from a collapsible list. Used for document types, country selection, and other enumerated choices where a radio group would be too long.

<div class="dh-rule"><span>Anatomy</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-field"><span style="color:#82879a">Select country</span><i></i></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">Closed</span><code>.dropdown</code><p>The field shows the placeholder or the current selection, with a chevron affordance.</p></div></div><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><span class="dh-pz-menu"><span>Mexico</span><span class="is-selected">Colombia</span><span>Brazil</span></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Open</span><code>.dropdown.is-open</code><p>The menu lists the options; the selected item is highlighted.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-field"><span>Colombia</span><i></i></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#189f6014;color:#189f60">Selected</span><code>.dropdown.has-value</code><p>After choosing, the field shows the value in full text color.</p></div></div></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--dropdown-surface | Field background | Component
--dropdown-border-default | Border — rest | Component
--dropdown-border-open | Border — open state | Component
--dropdown-text-default | Selected text color | Component
--dropdown-text-placeholder | Placeholder text color | Component
--dropdown-chevron | Chevron icon color | Component
--radius-dropdown | Corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.