CodexSearchInput
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.
Demos
Open the console to see emitted events.
Default, with placeholder
The placeholder attribute will be passed down to the <input> element.
| Name | Value |
|---|---|
| View | |
Reading direction | |
With button
This example provides a buttonLabel prop, which enables the submit button.
Clearable
The clearable prop from the TextInput component adds a "clear" button when input is present.
Form field
A SearchInput can be wrapped in the Field component to add features like a semantic label, description and help text, validation messages, and more. See the Field page for more information.
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
modelValue | Value of the search input, provided by v-model binding in the parent component. | string|number | - | '' |
buttonLabel | Submit button text. If this is provided, a submit button with this label will be added. | string | - | '' |
disabled | Whether the search input is disabled. | boolean | - | false |
status | status property of the TextInput component | ValidationStatusType | 'default', 'error' | 'default' |
Methods
| Method name | Description | Signature |
|---|---|---|
focus | Focus the component's input element. | Returns: void |
Events
| Event name | Properties | Description |
|---|---|---|
input | event InputEvent | When the input value changes via direct use of the input |
change | event Event | When an input value change is committed by the user (e.g. on blur) |
focus | event FocusEvent | When the input comes into focus |
blur | event FocusEvent | When the input loses focus |
update:modelValue | value string|number - The new value | When the input value changes |
submit-click | value string|number - The current input | When the submit button is clicked. |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | A 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-buttonclass 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-buttonand.cdx-search-input__end-button