Text fields components are used for collecting user provided information.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
Single line text fields do not float their label on focus or with data.
shaped
text fields are rounded if they're outlined
and have higher border-radius
if filled
.
Text fields can be disabled
or readonly
.
You can reduces the text field height with dense
prop.
You can add icons to the text field with prepend-icon
, append-icon
and append-outer-icon
props.
When clearable
, you can customize the clear icon with clear-icon
.
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 outlined text fields.
A password input can be used with an appended icon and callback to control the visibility.
Text fields can be used with an alternative box design. Append and prepend icon props are not supported in this mode.
Text fields can be used with an alternative solo design.
Text fields can be used with an alternative outlined design.
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 add masking functionality using a 3rd party library such as vue-the-mask.
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.
The prefix
and suffix
properties allows you to prepend and append inline non-modifiable text next to the text field.
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.
Instead of using prepend / append / 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
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 fields allow you to create boundless inputs. In this example, we use a v-divider
to separate the fields.
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
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.
Ready for more? Continue reading with: