Text field
Text fields components are used for collecting user provided information.
API
Appends an icon to the component, uses the same syntax as v-icon
Appends an icon to the outside the component's input, uses same syntax as v-icon
Enables autofocus
Changes the background-color of the input
Applies the alternate box input style
Configures the default <input> autocomplete attribute
Applied when using clearable and the input is dirty
Add input clear functionality, default icon is Material Icons clear
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))
Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
Applies the dark theme variant
Disable the input
Disables the automatic character display when typing
Puts the input in a manual error state
The total number of errors that should display at once
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
Removes elevation (shadow) added to element when using the solo or solo-inverted props
Designates input type as full-width
Sets the component height
Hides hint, validation errors
Hint text
Sets input label
Applies the light theme variant
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
Apply a custom character mask to the input. See mask table below for more information
Displays a list of messages or message if using a string
Applies the outline style to the input
Forces hint to always be visible
Sets the input’s placeholder text
Displays prefix text
Prepends an icon to the component, uses the same syntax as v-icon
Prepends an icon inside the component's input, uses the same syntax as v-icon
Puts input in readonly state
Returns the unmodified masked string
Reverses the input orientation
Accepts an array of functions that return either True or a String with an error message
Label does not move on focus/dirty
Changes the style of the input
Reduces element opacity until focused
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
Displays suffix text
Sets input type
Delays validation until blur event
Input value
Supplemental
| Mask | Description |
|---|---|
| Masks | |
| # | Any digit |
| A | Any capital letter |
| a | Any small letter |
| N | Any capital alphanumeric character |
| n | Any small alphanumeric character |
| X | Any 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
Text fields can be disabled or 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