Search
Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes
The search input component can be used to let your users search through your website using string queries and it comes in multiple styles, variants, and sizes built with the utility classes from Tailwind CSS.
You will also find more advanced search components on this page including dropdown category selections, search buttons positioned inside the input field, voice search fields and more.
Setup
<script>
import { Search, SimpleSearch, VoiceSearch } from 'flowbite-svelte'
</script>Search bar example
<Search />Voice Search
Get started with this example if you would like to enable voice search for your website and users.
<script>
...
function handleVoiceBtn() {
alert('You clicked voice button');
}
</script>
<VoiceSearch on:handleVoiceBtn={handleVoiceBtn}/>Events
on:submitProps
The component has the following props, type, and default values. See types page for type information.
Search
| Name | Type | Default |
|---|---|---|
| id | string | '' |
| labelClass | string | 'mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300' |
| inputClass | string | 'block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500' |
| btnClass | string | 'text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800' |
| placeholder | string | 'Search' |
Simple Search
| Name | Type | Default |
|---|---|---|
| id | string | '' |
| labelClass | string | 'sr-only' |
| iconClass | string | 'w-5 h-5 text-gray-500 dark:text-gray-400' |
| iconDivClass | string | 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none' |
| inputClass | string | 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500' |
| btnClass | string | 'p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800' |
| placeholder | string | 'Search' |
Voice Search
| Name | Type | Default |
|---|---|---|
| id | string | '' |
| labelClass | string | 'sr-only' |
| iconClass | string | 'w-5 h-5 text-gray-500 dark:text-gray-400' |
| iconDivClass | string | 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none' |
| inputClass | string | 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500' |
| btnClass | string | 'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800' |
| voiceBtnClass | string | 'flex absolute inset-y-0 right-0 items-center pr-3' |
| voiceIconClass | string | 'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white' |
| placeholder | string | 'Search Mockups, Logos, Design Templates...' |
Forwarded Events: Search, SimpleSearch
on:blur
on:change
on:click
on:focus
on:keydown
on:keypress
on:keyup
on:mouseenter
on:mouseleave
on:mouseover
on:paste