Dropdown

A dropdown lets people choose one or more options from a related list. Use it in forms, filters, menus, and account panels.

Type

Normal

Plain items; width follows the longest line of text.

Basic actions

Type

Group

Subgroup label: Geist 14px regular #94A3B8 (`Menus` / Agent row). Items: Geist 14px regular #020617. Optional top title: Geist 14px medium #020617 (item-base Title).

Grouped options

Type

Rich menu

Figma `item-base` Group: both lines Geist 14px regular — title #020617, subtitle #475569 (2px gap).

Title + description rows

Leading

Icon

16px leading icon in icon-secondary.

Leading icon items

Selection

Checkbox

Multi-select rows use the design-system Checkbox (sm) as the leading control; Radix still owns the menu item.

Checkbox items

Selection

Radio

Single-select rows use the design-system Radio (sm); selection is driven by the menu’s radio group value.

Radio items

Pattern

Search

Figma `Menus` node 198:4725: header `p-1`, border-b, 31× row with 16px search icon + plain text field (placeholder “Search” #94A3B8). List uses leading dashed-circle slots like the file.

Search + list (Figma 198:4725)

Pattern

Search + section labels

Same search header strip as 198:4725, then subgroup labels (#94A3B8) and rows.

Search, headings, items

Structure

Anatomy

Surface

White panel, border #E2E8F0, 8px corner radius, shadow 0 4px 6px and 0 2px 4px at 10% black (Figma `Menus`). Width is max-content up to viewport cap.

Group label

Geist 14px regular, line-height 1.4, text #94A3B8 (`role/text/subtle`), horizontal padding 8px.

Heading (in-menu)

Geist 14px medium #020617 (`role/text/heading`), bottom divider #E2E8F0 — matches top “Group header” row.

Item

Geist 14px regular, line-height 1.4, text #020617; row padding 8×6px, inner radius 4px; data-[highlighted] fill #F1F5F9 (`role/surface/selected`).

Rich description

Second line Geist 14px regular, #475569 (`role/text/body`), 2px below title per `item-base` Group.