Codex Direction:
SearchInput
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.
Demos
Open the console to see emitted events.
Default
This example has placeholder text.
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.
Usage
Props
| Prop name | Description | Type | 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 | '' |
Methods
| Method name | Description | Signature |
|---|---|---|
focus | Focus the component's input element. | Returns: void |
Events
| Event name | Properties | Description |
|---|---|---|
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. |