Search

A focused search field with built-in debounce, search icon and clear button.

Installation

npx alixan-ui-nuxt add search

Usage

Use v-model for the raw value and listen to @search for the debounced value.

Debounced value: empty

<script setup lang="ts">
const value = ref('')
const debouncedValue = ref('')
</script>

<template>
  <Search
    v-model="value"
    placeholder="Search services"
    @search="debouncedValue = $event"
  />
</template>

Debounce

Change the delay with the debounce prop. The default is 300 milliseconds.

Debounced value: empty

<script setup lang="ts">
const value = ref('')
const debouncedValue = ref('')
</script>

<template>
  <Search
    v-model="value"
    :debounce="150"
    placeholder="Fast search"
    @search="debouncedValue = $event"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	string	''	Search input value used by v-model.
placeholder	string	'Search'	Placeholder text inside the search field.
debounce	number	300	Delay in milliseconds before emitting the search event.
autofocus	boolean	false	Focuses the input when it is mounted.
readonly	boolean	false	Makes the field readable but not editable.

Events

Event	Payload	Description
@search	string	Emitted with a trimmed value after debounce.
@clear	-	Emitted when the clear button is clicked.