Components
Searchbox

Advanced Forms

Tailwind CSS Searchbox

A ComboBox plugin that lets the user enter a search query.

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.

Use these shortcuts in any example:

to select
to close
to navigate

JSON examples

Using JSON example in dropdown.

Preserve selection on empty

Selection is not preserved when the content is empty.

Press K for SearchBox to popup in Modal.

JSON examples with Tab Filter

Tab filtering experience in dropdown.

This example uses a modal popup for a convenient tab filtering experience.

Press \ for SearchBox to popup in Modal.

HTML examples

HTML usage of SearchBox in dropdown with data attributes.

Press : for SearchBox to popup in Modal.

<script>
                        (function () {
                          window.addEventListener("load", () => {
                            const overlay = HSOverlay.getInstance('#html-example-using-modal-popup-with-shortcut-call-trigger', true);
                            const combobox = HSComboBox.getInstance('#html-example-using-modal-popup-with-shortcut-call-trigger [data-hs-combo-box]', true);
                    
                            window.addEventListener("keydown", function (evt) {
                              if (evt.code === "Semicolon" && evt.shiftKey === true) {
                                if (overlay.element && overlay.element.el.classList.contains('open')) return false;
                    
                                overlay.element.open();
                                combobox.element.setCurrent();
                              }
                            });
                          });
                        })();
                      </script>