1. Components
  2. Searchbox

Advanced Forms

Tailwind CSS Searchbox

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

Attention

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.

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

Dropdown

Using JSON example in dropdown.

Preserve selection on empty

Selection is not preserved when the content is empty.

Using Modal popup with shortcut call

Press K for SearchBox to popup in Modal.

Press K for SearchBox.

Dropdown

Tab filtering experience in dropdown.

Using Modal popup with shortcut call

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

Press \ for SearchBox to popup in Modal.

Press \ for SearchBox.

Dropdown

HTML usage of SearchBox in dropdown with data attributes.

Using Modal popup with shortcut call

Press : for SearchBox to popup in Modal.