Skip to content
On this page


Search input with optional button.

This component contains a TextInput component with a preset start icon and input type. A button can be added by providing the buttonLabel prop.

The default slot allows you to pass in an options menu that can be absolutely positioned to line up with the text input, e.g. a list of autocomplete options. See TypeaheadSearch for an example.

TextInput props apply

This component contains a TextInput component. You can bind TextInput props to this component and they will be passed to the TextInput within.

Attributes passed to input

This component will pass any HTML attributes applied to it, except for CSS class, to the <input> element within the component.


Open the console to see emitted events.


This example has placeholder text.

With button

This example provides a buttonLabel prop, which enables the submit button.


The clearable prop from the TextInput component adds a "clear" button when input is present.



Prop nameDescriptionTypeDefault
modelValueValue of the search input, provided by v-model binding in the parent component.string|number''
buttonLabelSubmit button text.

If this is provided, a submit button with this label will be added.


Method nameDescriptionSignature
focusFocus the component's input element.Returns: void


Event namePropertiesDescription
update:modelValuevalue string | number - The new valueWhen the input value changes
submit-clickvalue string | number - The current inputWhen the submit button is clicked.


defaultA slot for passing in an options menu that needs to be positioned
relatively to the text input. See TypeaheadSearch for sample usage.