# Text fields
Text fields components are used for collecting user provided information.
A simple text field with placeholder and/or label.
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. The counter can be customised with the counter-value prop and counter scoped slot.
When clearable, you can customize the clear icon with clear-icon.
# 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.
You can reduce the text field height with dense prop.
# Disabled and readonly
Text fields can be disabled or readonly.
Text fields can be used with an alternative box design.
# Hide details
When hide-details is set to
auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.
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.
You can add icons to the text field with prepend-icon, append-icon and append-outer-icon props.
Text fields can be used with an alternative outlined design.
# Prefixes and suffixes
The prefix and suffix properties allows you to prepend and append inline non-modifiable text next to the text field.
shaped text fields are rounded if they’re outlined and have higher border-radius if filled.
# Single line
single-line text fields do not float their label on focus or with data.
Text fields can be used with an alternative solo design.
Vuetify includes simple validation through the rules prop. The prop accepts a mixed array of types
string. When the input value changes, each element in the array will be validated. Functions pass the current v-model as an argument and must return either
false or a
string containing an error message.
# Icon events
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
append-outer icons you can use slots to extend input’s functionality.
Text field label can be defined in
label slot - that will allow to use HTML content
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
# Custom validation
# Full width with counter
Full width text fields allow you to create boundless inputs. In this example, we use a
v-divider to separate the fields.
# Password input
Using the HTML input type password can be used with an appended icon and callback to control the visibility.