Dropdown
Three composable patterns built on the same primitives: Dropdown (button + action menu), Select (single-value picker), and ComboBox (searchable select).
Dropdown
A Button paired with a DropdownMenu panel. Click to open — selecting an item or clicking outside closes it.
Text header
Avatar header
Menu panel anatomy
Mix and match headers, separators, icons, checkboxes, and shortcuts using the five panel sub-components.
No header
Header + shortcuts
Avatar header + icons
Checkboxes
Select
A form-style single-value picker. The trigger reflects the selected item including its leading icon, avatar, or status dot. Click to open and pick a member.
Sizes
Select — leading slot variants
Each option can carry an icon, avatar initials, a live online-status dot, or a username handle — all reflected in the trigger once selected.
Labels only
With icons
With avatars
Online status
With usernames
Disabled
Select — controlled
Pass value and onChangeto drive the component from state. The trigger updates to show the chosen member's avatar and online indicator.
ComboBox
Add isSearchable to any Select to enable ComboBox mode — the panel gains a search input that filters options in real time.
Labels only
With icons
With avatars
Online status
With usernames
Disabled