Components not listed in the sidebar are not available yet.
Vuetify 2 documentation can be found on vuetifyjs.com
# Text fields
Text field components are used for collecting user provided information.
# Usage
A simple text field with placeholder and/or label.
# API
# Examples
# Props
# 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. The counter can be customised with the counter-value prop and counter scoped slot.
# Clearable
The clearable prop appends an icon that clears the text field when clicked. The clearable icon is easily customizable by using clearable in combination with the clear-icon prop.
# Custom colors
The color prop provides an easy way to change the color of your text field.
# Density
The density prop decreases the height of the text field based upon 1 of 3 levels of density; default, comfortable, and compact.
# Disabled and readonly
The state of a text field can be changed by providing the disabled or readonly props.
# 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.
# Hint
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.
# Icons
You can add icons to the text field with prepend-icon, append-icon and append-outer-icon props.
# Prefixes and suffixes
The prefix and suffix properties allows you to prepend and append inline non-modifiable text next to the text field.
# Shaped
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.
# Validation
Vuetify includes simple validation through the rules prop. The prop accepts a mixed array of types function, boolean and 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 true / false or a string containing an error message.
# Variant
The variant prop provides an easy way to customize the style of your text field. The following values are valid options: solo, filled, outlined, plain, and underlined.
# Events
# 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.
# Slots
# Icon slots
Instead of using prepend/append/append-outer icons you can use slots to extend input’s functionality.
# Label
Text field label can be defined in label slot - that will allow to use HTML content
# Progress
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
# Misc
# 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.
# 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.