Basic Dropdown
Simple dropdown with options
With Placeholder
Dropdown with custom placeholder
Browse components
Dropdown
Menu anchored to your own trigger snippet, with arrow-key focus and four placements.
molecules
Live example
Default usage you can copy and adapt.
Props
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| trigger | Snippet<[DropdownTriggerProps]> | Yes | — | The control that opens the menu. Spread the ARIA props it receives onto your button. |
| options | Array<{ value, label, disabled? }> | No | [] | Menu items, when not supplying children. |
| isOpen | boolean | No | false | Open state. Bindable. |
| menuRole | 'menu' | 'listbox' | No | menu | Role for the popup; listbox for Select-style pickers. |
| placement | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | No | bottom-start | Where the popup sits relative to the trigger. |
| onOptionClick | (value: string | number) => void | No | — | Runs when an option is chosen. |