# Text fields

Text fields components are used for collecting user provided information.

# Usage

A simple text field with placeholder and/or label.


# 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

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.

# Dense

You can reduce the text field height with dense prop.

# Disabled and readonly

Text fields can be disabled or readonly.

# Filled

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.

# 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.

# Outlined

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

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.

# Solo

Text fields can be used with an alternative solo design.

# 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.

# 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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:11/15/2021, 10:04:14 AM