# Text fields

Text field 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

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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.