You are reading docs for v1.3.1, click here for the latest version.

This is an overview of the most common usage of TextField. For more information about the available properties, methods, or events, head over to the complete API documentation for TextField.

<TextField> is an input component that creates an editable single-line box.

<TextField> extends TextBase and EditableTextBase which provide additional properties and events.

<TextField :text="textFieldValue" hint="Enter text..." />

<TextField> provdes two-way data binding using v-model.

<TextField v-model="textFieldValue" />


textStringGets or sets the value of the field.
hintStringGets or sets the placeholder text.
editableBooleanWhen true, indicates that the user can edit the value of the field.
maxLengthNumberLimits input to the spcified number of characters.
secureBooleanHides the entered text when true. Use this property to create password input fields.
Default value: false.
keyboardTypeKeyboardTypeShows a custom keyboard for easier text input.
Valid values: datetime, phone, number, url, or email.
returnKeyTypeReturnKeyTypeGets or sets the label of the return key.
Valid values: done, next, go, search, or send.
autocorrectBooleanEnables or disables autocorrect.


textChangeEmitted when the text changes.
returnPressEmitted when the return key is pressed.
focusEmitted when the field is in focus.
blurEmitted when the field loses focus.

Native component