Intro

Input box component for search scenarios.

Install

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

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

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="onClickButton">Search</div>
  </template>
</van-search>

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

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

Props

Attribute	Description	Type	Default
v-model	Input value	number \| string	-
label	Left side label	string	-
name `v3.2.3`	As the identifier when submitting the form	string	-
shape	Shape of field, can be set to `round`	string	`square`
id `v3.2.2`	Input id, the for attribute of the label also will be set	string	`van-search-n-input`
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	string	`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	-
autocomplete `v3.2.3`	autocomplete attribute of native input element	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
click-left-icon `v3.4.0`	Emitted when the left icon is clicked	event: MouseEvent
click-right-icon `v3.4.0`	Emitted when the right icon 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

The component exports the following type definitions:

import type { SearchProps, SearchShape, SearchInstance } from 'vant';

SearchInstance is the type of component instance:

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-background-color-light)	-
--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)	-

Search