Tailwind CSS Searchbox (Command Palette)
Build searchbox and command palette interfaces with remote JSON or HTML data, modal keyboard shortcuts, grouped results, tab filters, and keyboard navigation.
Requires JS
Note that this component requires the use of our ComboBox plugin, else you can skip this message if you are already using Preline UI as a package.
Heads up!
Theme switching is disabled on this demo page to keep searchbox previews accurate and consistent. This is intentional and applies only to this demo, it does not affect how themes work in real projects.
Use these shortcuts in any example:
-
to select
-
to close
-
to navigate
Dropdown searchbox
Load grouped SearchBox results from JSON inside a dropdown-based interface.
Clear selection on empty
Set preserveSelectionOnEmpty to false so clearing the field also clears the current selection.
Modal search with K shortcut
Press K to open the SearchBox in a modal.
Press K for SearchBox.
Dropdown with tab filters
Use tab filters in a dropdown SearchBox to switch between grouped remote results.
Modal tab-filter search with \ shortcut
Use tab filters inside a modal-based SearchBox experience.
Press \ to open the SearchBox in a modal.
Press \ for SearchBox.
Dropdown with HTML data
Build a SearchBox dropdown from grouped HTML data attributes and inline results.
Modal search with : shortcut
Press : to open the SearchBox in a modal.
Press : for SearchBox.