Skip to content
On this page


An input for text search.

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.

Default, with placeholder

The placeholder attribute will be passed down to the <input> element.

Reading direction

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 nameDescriptionTypeValuesDefault
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.
statusstatus property of the TextInput componentValidationStatusType'default', 'error''default'


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.

CSS-only version

Markup structure

The basic CSS-only SearchInput component is a CSS-only TextInput with type="search" and a start icon, wrapped in a <div> with the CSS class .cdx-search-input. The CSS-only search icon is set up for you, so you do not need to include it in your Less code.

With button

To add a button to the CSS-only SearchInput, do the following:

  • Add the .cdx-search-input--has-end-button class to the root element
  • Wrap the CSS-only TextInput component in a div with the class .cdx-search-input__input-wrapper
  • Add a CSS-only button with the classes .cdx-button and .cdx-search-input__end-button