Search - Vant 4

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

import { ref } from'vue'; exportdefault { 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.

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const value = ref(''); constonSearch = (val) => showToast(val); constonCancel = () => showToast('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

Disabled

Custom Background Color

Custom Action Button

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

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const value = ref(''); constonSearch = (val) => showToast(val); constonClickButton = () => showToast(value.value); return { value, onSearch, onClickButton, }; }, };

API

Props

Attribute	Description	Type	Default
v-model	Input value	*number	string*
label	Left side label	string	-
name	As the identifier when submitting the form	string	-
shape	Shape of field, can be set to round	string	square
id	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 | 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 | Error message | string | - | | formatter | Input value formatter | (val: string) => string | - | | format-trigger | 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 | 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	Emitted when the left icon is clicked	event: MouseEvent
click-right-icon	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:

importtype { SearchProps, SearchShape, SearchInstance } from'vant';

SearchInstance is the type of component instance:

import { ref } from'vue'; importtype { 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

Theming

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	var(--van-background-2)	-
--van-search-content-background	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)	-