Text field
Text field components are used for collecting user provided information.
Basic
Text fields components are used for collecting user provided information.
Density
The density prop decreases the height of the text field based upon 1 of 3 levels of density; default, comfortable, and compact.
Variant
Use solo, filled, outlined, plain and underlined option of variant prop to change the look of the textfield.
State
Text fields components are used for collecting user provided information.
Counter
Use a counter prop to inform a user of the character limit.
Clearable
When clearable, you can customize the clear icon with clear-icon.
Custom Colors
Text fields components are used for collecting user provided information.
Icons
You can add icons to the text field with prepend-icon, append-icon and append-inner-icon and prepend-inner-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.
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.
Icon events
click:prepend, click:append, click:append-inner, and click:clear will be emitted when you click on the respective icon
Password input
Using the HTML input type password can be used with an appended icon and callback to control the visibility.
CONTENTS
Introduction
Basic
Density
Variant
State
Counter
Clearable
Custom Colors
Icons
Prefixes and suffixes
Single line
Validation
Icon events
Password input