Text field

Text fields components are used for collecting user provided information.

Usage

A simple text field with placeholder and/or label.

A simple text field with placeholder and/or label.


API

v-text-field

Supplemental

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

Examples

Single line

Single line text fields do not float their label on focus or with data.


Disabled and readonly


Icons

You can add icons to the text field with prepend-icon, append-icon and append-outer-icon props.


Clearable

When clearable, you can customize the clear icon with clear-icon.


Icon events

click:prepend, click:append, click:append-outer, and click:clear will be emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead.


Icon slots

Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.


Character counter

Use a counter prop to inform a user of the character limit. The counter does not perform any validation by itself. You will need to pair it with either the internal validation system, or a 3rd party library. You can use it on regular, box or outline text fields.


Password input

A password input can be used with an appended icon and callback to control the visibility.


Validation

Vuetify includes simple validation through the rules prop. The prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either true or a String, the error message.


Full-width text field with character counter

Full width text fields allow you to create boundless inputs. In this example, we use a v-divider to separate the fields.


Hint text

The hint property on text fields adds the provided string beneath the text field. Using persistent-hint keeps the hint visible when the text field is not focused. Hint prop is not supported in solo mode.


Prefixes & suffixes

The prefix and suffix properties allows you to prepend and append inline non-modifiable text next to the text field.


Custom validation

While the built in v-form or 3rd party plugin such as vuelidate or vee-validation can help streamline your validation process, you can choose to simply control it yourself.


Box style

Text fields can be used with an alternative box design. Append and prepend icon props are not supported in this mode.


Solo style

Text fields can be used with an alternative solo design.


Outline style

Text fields can be used with an alternative outline design.


Custom colors

You can optionally change a text field into any color in the Material design palette. Below is an example implementation of a custom form with validation.


Masks

Text fields can validate against character masks. Using either a pre-made or custom rules, you can optionally format and validate specific character sets. Note that masks work only with text fields, using them with date/number/file etc inputs may end up in unexpected behaviour or exception.


Progress bar

You can display a progress bar instead of the bottom line. You can use the default indeterminate progress having same color as the text field or designate a custom one using the progress slot