SearchInput

Search field with a clear button; fires onSearch on Enter. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiSearchInput } from '@ziyarago/ui/vue'

Empty

Vue
<UiSearchInput placeholder="Search hotels, tours, guests" v-model="value" />

With query

Vue
<UiSearchInput v-model="value" />

Sizes

Vue
<UiSearchInput size="xs" v-model="value" />

<UiSearchInput size="sm" v-model="value" />

<UiSearchInput size="md" v-model="value" />

<UiSearchInput size="lg" v-model="value" />

<UiSearchInput size="xl" v-model="value" />

API reference

Compact search field with a clear button and an Enter-to-search event. Use above lists and tables.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring''Current query.
placeholderstring—Placeholder text. Defaults to "Search".
sizexssmmdlgxl'md'Field height and font size.

Events

Vue: @name. React: onName.

changeCalled with the new query on every keystroke and with "" when cleared.
searchCalled with the current query when Enter is pressed.

Notes

  • Filtering is up to you: react to change for live search or to search for submit-on-enter.