Dropdown
A dropdown selection component for choosing one option from many. Built on Base UI Select for keyboard navigation and screen reader accessibility.
Consider radio buttons when there are 5 or fewer options or when all options need to be visible at once.
Preview
Examples
Size
Controls the dropdown size.
| Value | Default | Description |
|---|---|---|
small | For forms in tight spaces. | |
medium | ✓ | General form use. |
large | When a larger click area is needed. |
Rounded
Controls the corner radius of the dropdown.
| Value | Default | Description |
|---|---|---|
small | Small corner radius | |
medium | ✓ | Default corner radius |
large | Large corner radius |
Guidelines
Dropdown vs Radio
Use Dropdown when there are many options (6 or more) or when space is limited. Use Radio when there are few options (5 or fewer) and you want all choices visible at once.
Controlled vs Uncontrolled
Use defaultValue for uncontrolled usage. Use value with onValueChange when integrating with form libraries or when the selection needs to drive other UI.
Props
Props
Prop
Default
Type
options—
DropdownOption[]
value?—
string
defaultValue?—
string
onValueChange?—
(value: string | null) => void
placeholder?"Select an option"string
size?"medium""small" | "medium" | "large"
rounded?"medium""small" | "medium" | "large"
intent?"primary""primary" | "secondary" | "success" | "warning" | "danger" | "neutral"
fullWidth?falseboolean
disabled?falseboolean
name?—
string
required?—
boolean
Last updated on