Skip to content
On this page

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

Configurable

NameValue
Props
startIcon
endIcon
clearable
disabled
placeholder
Note: For icon properties, the relevant icon also needs to be imported from the @wikimedia/codex-icons package. See the usage documentation for more information.

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.

Open up the browser console to see events emitted on input, change, focus, and blur.

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 icons

A TextInput can have a startIcon, an endIcon, or both. Any Codex icon can be used.

Note that a clearable TextInput with an endIcon will display both the clear button and the endIcon when the input is not empty. To see this behavior, type in the input below.

With placeholder

To add placeholder text, add a placeholder attribute.

Disabled

To disable the input, add the disabled attribute.

Usage

Props

Prop nameDescriptionTypeValuesDefault
modelValueCurrent value of the input.

Provided by v-model binding in the parent component.
string|number-''
inputTypetype attribute of the input.TextInputType'text', 'search''text'
disabledWhether the input is disabled.boolean-false
startIconAn icon at the start of the input element. Similar to a ::before pseudo-element.Icon | undefined-undefined
endIconAn icon at the end of the input element. Similar to an ::after pseudo-element.Icon | undefined-undefined
clearableAdd 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

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

Events

Event namePropertiesDescription
update:modelValuemodelValue string | number - The new model valueWhen the input value changes
inputevent InputEventWhen the input value changes via direct use of the input
changeevent EventWhen an input value change is committed by the user (e.g. on blur)
focusevent FocusEventWhen the input comes into focus
blurevent FocusEventWhen the input loses focus