Text fields
Text fields components are used for collecting user provided information.

Go to api

Examples

Text-fields come in two theme options, dark and light.

The dark theme compliments darker backgrounds.

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

A single line label mimics the display of a placeholder.

Icons can be specified as prepended or appended.

The icon inherits the applications primary color on text-field focus.

A multi-line text-field is useful for larger amounts of text.

Multi-line text-fields can be set to autogrow allowing the field to scale with the input.

Use a counter 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.

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

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.

Light theme

In this example two of the text-fields are required. We utilize the required prop in order to apply an asterisk to the label and rules to validate the fields.

Light theme

Light theme

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.

Textarea text-fields have an alternate style.

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

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.

Text fields can validate against character masks. Using either a pre-made or custom rules, you can optionally format and validate specific character sets.

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

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##:##:##

API