Text-fields come in two theme options, dark and light.

The dark theme compliments darker backgrounds.

Single line text-fields do not float their label on focus or with data.

A single line label mimics the display of a placeholder.

Icons can be specified as prepended or appended.

The icon inherits the applications primary color on text-field focus.

A multi-line text-field is useful for larger amounts of text.

Multi-line text-fields can be set to autogrow allowing the field to scale with the input.

Use a counter to inform a user of the maximum or minium character limit.

A password input can be used with an appended icon and callback to control the visibility.

The rules 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.

Light theme.

Designates the input as required

Hint text and forces hint visible.

Displays prefix/suffix text.

If you want to skip the built in validation and use your own or a plugin such as vuelidate or vee-validation, you can use the errors or error props. Errors accepts a string or array and error simply places the field in an error state.

Textarea text-fields have an alternate style.