vant/src/search

Search

Intro

Input box component for search scenarios.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Search } from 'vant';

const app = createApp();
app.use(Search);

Usage

Basic Usage

<van-search v-model="value" placeholder="Placeholder" />

import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    return { value };
  },
};

Listen to Events

search event will be Emitted when click the search button on the keyboard, cancel event will be Emitted when click the cancel button.

<form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="Placeholder"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref('');
    const onSearch = (val) => Toast(val);
    const onCancel = () => Toast('Cancel');
    return {
      value,
      onSearch,
      onCancel,
    };
  },
};

Tips: There will be a search button on the keyboard when Search is inside a form in iOS.

Input Align

<van-search v-model="value" input-align="center" placeholder="Placeholder" />

Disabled

<van-search v-model="value" disabled placeholder="Placeholder" />

Custom Background Color

<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="Placeholder"
/>

Custom Action Button

Use action slot to custom right button, cancel event will no longer be Emitted when use this slot.

<van-search
  v-model="value"
  show-action
  label="Address"
  placeholder="Placeholder"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">Search</div>
  </template>
</van-search>

API

Props

Attribute	Description	Type	Default
label	Left side label	string	-
shape	Shape of field, can be set to round	string	square
background	Background color of field	string	#f2f2f2
maxlength	Max length of value	number | string	-
placeholder	Placeholder	string	-
clearable	Whether to be clearable	boolean	true
clear-icon v3.0.12	Clear icon name	string	clear
clear-trigger	When to display the clear icon, always means to display the icon when value is not empty, focus means to display the icon when input is focused	string	focus
autofocus	Whether to auto focus, unsupported in iOS	boolean	false
show-action	Whether to show right action button	boolean	false
action-text	Text of action button	boolean	Cancel
disabled	Whether to disable field	boolean	false
readonly	Whether to be readonly	boolean	false
error	Whether to mark the input content in red	boolean	false
error-message v3.0.12	Error message	string	-
formatter v3.0.12	Input value formatter	(val: string) => string	-
format-trigger v3.0.12	When to format value，can be set to onBlur	string	onChange
input-align	Text align of field, can be set to center right	string	left
left-icon	Left icon name	string	search
right-icon	Right icon name	string	-

Events

Event	Description	Arguments
search	Emitted when confirming search	value: string
update:model-value	Emitted when input value changed	value: string
focus	Emitted when input is focused	event: Event
blur	Emitted when input is blurred	event: Event
click-input	Emitted when the input is clicked	event: MouseEvent
clear	Emitted when the clear icon is clicked	event: MouseEvent
cancel	Emitted when the cancel button is clicked	-

Methods

Use ref to get Search instance and call instance methods.

Name	Description	Attribute	Return value
focus	Trigger input focus	-	-
blur	Trigger input blur	-	-

Types

Get the type definition of the Search instance through SearchInstance.

import { ref } from 'vue';
import type { SearchInstance } from 'vant';

const searchRef = ref<SearchInstance>();

searchRef.value?.focus();

Slots

Name	Description
left	Custom left side content
action	Custom right button, displayed when show-action is true
label	Custom Search label
left-icon	Custom left icon
right-icon	Custom right icon

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-search-padding	10px var(--van-padding-sm)	-
--van-search-background-color	var(--van-white)	-
--van-search-content-background-color	var(--van-gray-1)	-
--van-search-input-height	34px	-
--van-search-label-padding	0 5px	-
--van-search-label-color	var(--van-text-color)	-
--van-search-label-font-size	var(--van-font-size-md)	-
--van-search-left-icon-color	var(--van-gray-6)	-
--van-search-action-padding	0 var(--van-padding-xs)	-
--van-search-action-text-color	var(--van-text-color)	-
--van-search-action-font-size	var(--van-font-size-md)	-