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 />

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:submit

Props

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

References