Search

Search input for page content, with clear, loading, and search button support.

Basic Usage

<ASearch placeholder="Search components..." />

Size

<ASearch size="sm" placeholder="Small search" />
<ASearch size="md" placeholder="Default search" />
<ASearch size="lg" placeholder="Large search" />

Clearable

Clear button appears after text is entered.

<script setup lang="ts">
import { ref } from 'vue'
const searchVal = ref('Clearable text')
</script>

<ASearch v-model="searchVal" />

Search Button

Set searchButton to show a search button. Pass a string to customize the button text.

<ASearch search-button placeholder="Icon search button" />
<ASearch search-button="Search" placeholder="Text search button" />

Loading State

<ASearch loading model-value="Searching..." />

Disabled

<ASearch disabled model-value="Disabled" />

API

Props

Name	Type	Default	Description
modelValue	string	''	Bound value
placeholder	string	'Search...'	Placeholder text
disabled	boolean	false	Disabled
clearable	boolean	true	Clearable
loading	boolean	false	Loading state
size	'sm' | 'md' | 'lg'	'md'	Size
searchButton	boolean | string	false	Show search button; pass string to customize

Events

Name	Parameters	Description
update:modelValue	value: string	Triggered on input
search	value: string	Triggered on Enter or search button click
clear	—	Triggered on clear button click
focus	event: FocusEvent	Triggered on focus
blur	event: FocusEvent	Triggered on blur

Expose

Name	Description
focus	Manually focus the input