Text fields
Text fields components are used for collecting user provided information.

Examples

#1 With label
edit
Text-fields come in two theme options, dark and light.

#2 Dark theme with label
edit
The dark theme compliments darker backgrounds.

#3 Single line light theme
edit
Single line text-fields do not float their label on focus or with data.

#4 Single line dark theme
edit
A single line label mimics the display of a placeholder.

#5 With Icon
edit
Icons can be specified as prepended or appended.

#6 Dark theme with icon
edit
The icon inherits the applications primary color on text-field focus.

#7 Multi-Line
edit
A multi-line text-field is useful for larger amounts of text.

#8 Dark theme multi-line
edit
Multi-line text-fields can be set to autogrow allowing the field to scale with the input.

#9 Character counter
edit
Use a counter to inform a user of the maximum or minium character limit.

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

#11 Multi-line with character counter
edit
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.

#12 Full-width text field with character counter
edit
Light theme

#13 Required fields
edit
Light theme

#14 Hint text
edit
Light theme

#15 Prefixes & suffixes
edit
Light theme

#16 Custom validation
edit
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.

API

chevron_leftchevron_right