Searchable grouped dropdown with keyboard nav
Assignee
Last query: (none)
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | "" | Selected value (bindable via onChange) |
groups | SearchDropdownGroup[] | [] | Grouped option list |
placeholder | string | "Filter…" | Search input placeholder |
variant | "default" | "chip" | "default" | Trigger style — chip renders a compact pill |
size | "sm" | "md" | "md" | Trigger size |
dropup | boolean | false | Open panel above the trigger |
appendToBody | boolean | false | Fixed positioning — escapes overflow/table stacking contexts |
clearable | boolean | false | Show × to clear selection |
displayValue | string | - | Override the trigger's display text |
colorFn | (value) => string | - | Returns a CSS color for the trigger dot |
embedded | boolean | false | Always-visible panel with no trigger button |
disabled | boolean | false | Disable the dropdown |
onChange | (value) => void | - | Called on selection (required) |
onSearch | (query) => void | - | Debounced server-side search hook — bypasses internal filtering; consumer updates groups. Fires on open/clear with ''. |
searchDebounceMs | number | 250 | Debounce applied to onSearch keystrokes |