Text field

Text fields components are used for collecting user provided information.

Usage

A simple text field with placeholder and/or label.


API

v-text-field
Name
append-icon
Default
undefined
Type
string

Appends an icon to the component, uses the same syntax as v-icon

Name
append-icon-cb
Default
null
Type
function

Callback for appended icon when clicked

New in — v1.1
Name
append-outer-icon
Default
undefined
Type
string

Appends an icon to the outside of v-text-field's input, uses same syntax as v-icon

New in — v1.1
Name
append-outer-icon-cb
Default
null
Type
function

Callback for appended outer icon when clicked

Name
autofocus
Default
false
Type
boolean

Enables autofocus

Name
background-color
Default
undefined
Type
string

Changes the background-color of the input

Name
box
Default
false
Type
boolean

Applies the alternate box input style

Name
browser-autocomplete
Default
undefined
Type
string

Configures the default <input> autocomplete attribute

Name
clear-icon
Default
'$vuetify.icons.clear'
Type
string

Applied when using clearable and the input is dirty

Name
clear-icon-cb
Default
null
Type
function

Callback for clear icon when clicked

Name
clearable
Default
false
Type
boolean

Add input clear functionality, default icon is Material Icons clear

Name
color
Default
'primary'
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
counter
Default
undefined
Type
boolean | number | string

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean
Name
dont-fill-mask-blanks
Default
false
Type
boolean

Disables the automatic character display when typing

Name
error
Default
false
Type
boolean

Puts the input in a manual error state

Name
error-count
Default
1
Type
number | string

The total number of errors that should display at once

Name
error-messages
Default
[]
Type
string | array

Puts the input in an error state and passes through custom error messsages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation

Name
flat
Default
false
Type
boolean

Removes elevation (shadow) added to element when using the solo or solo-inverted props

Name
full-width
Default
false
Type
boolean

Desginates input type as full-width

Name
height
Default
undefined
Type
number | string

Sets the component height

Name
hide-details
Default
false
Type
boolean

Hides hint, validation errors

Name
hint
Default
undefined
Type
string

Hint text

Name
label
Default
undefined
Type
string

Sets input label

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
loading
Default
false
Type
boolean | string

Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color

Name
mask
Default
undefined
Type
object | string

Apply a custom character mask to the input. See mask table below for more information

Name
messages
Default
[]
Type
string | array

Displays a list of messages or message if using a string

Name
multi-line
Default
false
Type
boolean

Turns into textarea

Name
outline
Default
false
Type
boolean

Applies the outline style to the input

Name
persistent-hint
Default
false
Type
boolean

Forces hint to always be visible

Name
placeholder
Default
undefined
Type
string

Sets the input’s placeholder text

Name
prefix
Default
undefined
Type
string

Displays prefix text

Name
prepend-icon
Default
undefined
Type
string

Prepends an icon to the component, uses the same syntax as v-icon

Name
prepend-icon-cb
Default
null
Type
function

Callback for prepended icon when clicked

New in — v1.1
Name
prepend-inner-icon
Default
undefined
Type
string
New in — v1.1
Name
prepend-inner-icon-cb
Default
null
Type
function
Name
readonly
Default
false
Type
boolean
Name
return-masked-value
Default
false
Type
boolean

Returns the unmodified masked string

New in — v1.1
Name
reverse
Default
false
Type
boolean

Reverses the input orientation

Name
rules
Default
[]
Type
array

Accepts an array of functions that return either True or a String with an error message

Name
single-line
Default
false
Type
boolean

Label does not move on focus/dirty

Name
solo
Default
false
Type
boolean

Changes the style of the input

Name
solo-inverted
Default
false
Type
boolean

Reduces element opacity until focused

New in — v1.1
Name
success
Default
false
Type
boolean

Puts the input in a manual success state

New in — v1.1
Name
success-messages
Default
[]
Type
string | array

Puts the input in a success state and passes through custom success messsages.

Name
suffix
Default
undefined
Type
string

Displays suffix text

Deprecated in — v1.1
Name
textarea
Default
false
Type
boolean

Textarea text field with alternate style

Name
type
Default
'text'
Type
string

Sets input type

Name
validate-on-blur
Default
false
Type
boolean

Delays validation until blur event

Name
value
Default
undefined
Type
any

Input value

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.


Label slot

Text field label can be defined in label slot - that will allow to use HTML content


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