A compact select for known, shortish lists.
| Prop / event | Type | Notes |
|---|---|---|
| value / onChange | string / (v) => void | Selected option id; controlled |
| multiple | boolean | Checkbox options with a Clear / Confirm footer; value is an array |
| Option sub | ReactNode | Right-aligned secondary text on an option (value, offset, shortcut) |
| placeholder | string | Shown when nothing is chosen |
| disabled | boolean | Trigger inert, opacity 0.42 |
| Enter / Space | — | Open the list; Enter commits the active option |
| ↑ / ↓ · type-ahead | — | Move the active option; typing jumps to a match |
| Esc · outside click | — | Close without changing the value |
Use a Dropdown for a short, known list. When the list is long or needs filtering, use a Combobox; for free-text queries use Search.
Use it for a handful of known, mutually exclusive options.
Don't stuff a huge list behind a plain dropdown. Give it a Combobox filter.
Mark the selected option clearly — warm text and a check.
Don't use a dropdown for a binary choice. That is a Toggle or two Radios.
A labeled select inside a form, matching Input height and radius.
A compact sort control in a list toolbar.
Group labels sort long option sets into scannable sections.
| Token | Value | Role |
|---|---|---|
| --dd-height | 36px | Trigger height (matches Input M) |
| --dd-radius | 8px | Trigger corner |
| --menu-bg | #141519 | Listbox panel |
| --menu-border | #262A30 | Listbox hairline |
| --opt-on | #FF9D45 | Selected option text + check |
| --opt-hover | #1E1F25 | Active / hover row |
<div class="o-dd">
<button class="o-dd__trigger" aria-haspopup="listbox" aria-expanded="false">
<span class="o-dd__value">Banana</span>
<svg class="o-dd__chevron">…</svg>
</button>
<div class="o-menu" role="listbox" hidden>
<button role="option" class="o-menu__opt">Apple</button>
<button role="option" aria-selected="true" class="o-menu__opt is-on">Banana ✓</button>
</div>
</div>