Components / Forms

SearchInput

A native search field with a localized clear action.

Preview

Install

Run in your project

npx @getweini/cli@latest add search-input

Use cases

Site search

Submit a query with the browser-native search control.

Live filtering

Filter a local list as the model changes and let users clear it quickly.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import SearchInput from './components/ui/search-input/SearchInput.vue'
const query = ref('')
const messages = { clear: 'Clear search' }
function submitSearch() { console.log(query.value) }
</script>

<template>
  <label for="site-search">Search</label>
  <SearchInput
    id="site-search"
    v-model="query"
    name="query"
    :messages="messages"
    @search="submitSearch"
  />
</template>

More examples

Search form

The search event can trigger a query.

Search form

<script setup lang="ts">
import { ref } from 'vue'
import SearchInput from './components/ui/search-input/SearchInput.vue'
const query = ref('')
const messages = { clear: 'Clear search' }
function submitSearch() { console.log(query.value) }
</script>
<template>
  <label for="site-search">Search documentation</label>
  <SearchInput id="site-search" v-model="query" name="query" :messages="messages" @search="submitSearch" />
</template>

Filter names

A computed list responds to the native input model.

Filter names

<script setup lang="ts">
import { computed, ref } from 'vue'
import SearchInput from './components/ui/search-input/SearchInput.vue'
const query = ref('')
const names = ['Ada', 'Grace', 'Linus']
const results = computed(() => names.filter((name) => name.toLowerCase().includes(query.value.toLowerCase())))
const messages = { clear: 'Clear name filter' }
</script>
<template>
  <label for="name-filter">Filter names</label>
  <SearchInput id="name-filter" v-model="query" :messages="messages" />
  <ul><li v-for="name in results" :key="name">{{ name }}</li></ul>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for SearchInput
Name	Type	Default or requirement
`v-model`	string \| undefined	undefined
`messages`	{ clear: string }	required
`size`	sm \| md \| lg	md
`invalid / disabled / readonly`	boolean	false
`clear / search`	events	—

The native type="search" input receives native attributes and events. Escape and the clear button empty the model while retaining focus; disabled and readonly fields cannot be cleared.

Implementation notes

The clear action emits clear and native input/change events; Escape also clears.
Readonly and disabled fields cannot be cleared.

Accessibility and localization

Provide a visible label and localize the clear action through messages.