TextInput
HTML <input> element with type "text" or "search", wrapped in a <div>.
v-model is used to track the current value of the input. See the events docs for details on emitted events and their properties.
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 up the browser console to see events emitted on input, change, focus, and blur.
Default
This simple example demonstrates how to bind a reactive reference to the input's value via v-model. The reactive reference will automatically update when the input value changes.
Input value:
In this example, the parent component sets an initial value and has a reset button that will restore that initial value on click.
Input value: Initial value
Clearable
Including the clearable prop will add a clear button to the end of the icon when the input is not empty. On click, the clear button will set the input value to an empty string.
Input value:
With start icon
Any Codex icon can be set to the start icon.
With end icon
Any Codex icon can be set to the start icon. Note that if you include both an end icon and the clearable prop, the latter will override the end icon with the clear button.
With placeholder
To add placeholder text, add a placeholder attribute.
Disabled
To disable the input, add the disabled attribute.
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| modelValue | Value provided by v-model binding in the parent component. | string|number | - | '' |
| inputType | type attribute of the input. | TextInputType | 'text', 'search' | 'text' |
| disabled | Whether the input is disabled. | boolean | - | false |
| startIcon | An icon at the start of the input element. Similar to a ::before pseudo-element. | Icon | undefined | - | undefined |
| endIcon | An icon at the end of the input element. Similar to an ::after pseudo-element. | Icon | undefined | - | undefined |
| clearable | Add a clear button at the end of the input element. When the clear button is pressed, the input's value is set to an empty string. The clear button is displayed when input text is present. | boolean | - | false |
Methods
focus
Focus the component's input element.
Return
| Type | Description |
|---|---|
| void |
Events
| Event name | Properties | Description |
|---|---|---|
| update:modelValue | value string | number - The new value | When the input value changes |
| input | event InputEvent - The InputEvent object | When the input value changes via direct use of the input |
| change | event Event - The Event object | When an input value change is committed by the user (e.g. on blur) |
| focus | event FocusEvent - The FocusEvent object | When the input comes into focus |
| blur | event FocusEvent - The FocusEvent object | When the input loses focus |