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. Each step stays visibly distinct at every size.
In the game theme, rounded steps the corners of the pixel frame instead of curving them: small is square, medium cuts a one-step notch, and large cuts a two-step corner.
| Value | Default | Description |
|---|---|---|
small | Small corner radius | |
medium | ✓ | Default corner radius |
large | Fully rounded (pill) |
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
optionsvalue?defaultValue?onValueChange?placeholder?"Select an option"size?"medium"rounded?"medium"intent?"primary"fullWidth?falsedisabled?falsename?required?side?"bottom"align?"start"sideOffset?4