Search Components
Default search
<script>
import { Search } from 'flowbite-svelte'
</script>
<Search />
Simple Search
<script>
import { SimpleSearch } from 'flowbite-svelte'
</script>
<SimpleSearch />
Voice Search
<script>
import { VoiceSearch } from 'flowbite-svelte'
function handleVoiceBtn() {
alert('You clicked voice button');
}
</script>
<VoiceSearch on:handleVoiceBtn={handleVoiceBtn}/>
Event handlers
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: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
| '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...'
|
|---|
Related components
References