A compact dropdown that displays the currently selected value in its trigger button. Unlike Menu (which uses a static label), the trigger updates to reflect the active selection — ideal for theme pickers, status selectors, and inline configuration controls.
Basic Example
Pass an array of objects with label and value fields. Bind value to track the selection. The trigger label updates automatically when a new
option is chosen. Set disabled: true on any item to make it unselectable.
Highlighting code...
No preview available
Example
Field Mapping
Your data rarely uses text and value as keys. Use the fields prop to remap without transforming your data.
Highlighting code...
No preview available
Example
Sizes
Three size variants — sm, md (default), and lg — let you match
the dropdown to its surrounding context.
No preview available
Example
Props
- items: Array of option objects
- fields: Remap your data keys to component fields
- value (bindable): Currently selected value
- placeholder: Text shown when nothing is selected
- icon: Optional icon class shown in the trigger
- size: Size variant (
sm,md,lg) - align: Panel alignment (
start,end) - direction: Panel direction (
down,up) - showArrow: Show/hide the chevron arrow
- disabled: Disable the entire dropdown
- class: Additional CSS classes on the root element
Data Attributes
data-dropdown: Root containerdata-dropdown-trigger: Trigger buttondata-dropdown-label: Selected value text in triggerdata-dropdown-icon: Optional icon in triggerdata-dropdown-arrow: Chevron icondata-dropdown-panel: Options paneldata-dropdown-option: Each option itemdata-active: Present on the currently selected optiondata-open: Present on root when panel is open
Events
- onchange(value, item): Fired when selection changes — receives the extracted value and the raw item object
Keyboard Navigation
- Enter / Space: Open dropdown or select focused option
- ↑ / ↓: Move between options
- Escape: Close panel and return focus to trigger
- Tab: Close and move focus out