Search

Vue Bootstrap 5 Search component

The search box is an UI element prepared for creating search engines. Its most important element is search input, but it can also contain icons or buttons. It is also adjusted to be used in various other components such as navbar, dropdown, table, select, sidenav and many more.

Basic example

A basic example with a simple button.

Show code

Variations

Search comes with plenty of variations. Choose from the following as needed:

  • Search with icon
  • Search with button
  • Search without additional elements

Search with icon

See all the available icons in the Icons Docs.

Show code

Search with button

See all the possible input combinations in the Input Group Docs.

Show code

Search without additional elements

Here is an example of how you can make a search component without any element attached:

Show code

Search event

Here is example how you can make search component with event on it which will fire after clicking on search button.

Show code

Autocomplete

By adding extra JS code you can make your search input autocomplete as well.

Learn more about Autocomplete in the Autocomplete Docs

Show code

Navbar

Search is easily integrated with plenty of our components such as navbar.

Learn more about Navbar in the Navbar Docs

Show code

Dropdown

Moreover, you can integrate our search with dropdown component

Learn more about Dropdowns in the Dropdowns Docs

Show code

Datatable

It works perfectly with MDB datatables.

Learn more about Datatables in the Datatables Docs

Show code

Select

You can also find search option in select input by adding to select attribute data-mdb-filter="true"

Learn more about Select in the Select Docs

Show code

Sidenav

You can create your own search in sidenav. Look in to example below.

Learn more about Sidenav in the Sidenav Docs

Show code