Action Search Bar
アクションサーチバー
A field that opens a list of actions underneath itself as you type. It is not the Combobox, which holds a value in a popover, and not the Command Palette, which takes over the page on ⌘K — this one stays in the layout and hands the chosen action back to you. Filtering runs on a copy of the query held back by a timer, so the list stops reshuffling under a fast typist, and aria-activedescendant↗↗ moves the highlight while the input keeps real focus, which is what lets arrow keys work without the caret ever leaving the field. Adapted from Kokonut UI↗↗ under the MIT licence.
Installation
Copy and paste the following code into a new component file:1
How to use it2
Props
ActionSearchBar
| Name | Default | Description |
|---|---|---|
| actions | — | SearchAction[] Rows to search through |
| label | "Search commands" | string Label above the field |
| placeholder | "What do you need?" | string Placeholder inside the field |
| delay | 200 | number Milliseconds the filter lags the input by |
| onSelect | — | (action: SearchAction) => void Fired when a row is chosen |
| dark | false | boolean Render the dark palette |
SearchAction
| Name | Default | Description |
|---|---|---|
| id | — | string Unique key, also used for the option id |
| label | — | string Row title, matched against the query |
| icon | — | ReactNode Leading glyph |
| description | — | string Secondary text, also matched |
| shortcut | — | string Keys shown on the right |
| category | — | string Trailing tag, also matched |