Input - Loading

v-input has loading state which can be used, e.g. for data loading indication. Note: v-text-field is used just for example.

Input - Hint

v-input can have hint which can tell user how to use the input. persistent-hint prop makes the hint visible always if no messages are displayed.

Input
Input - Success

As any validatable Vuetify component, v-input can be set to success state using success prop, you can add message to it using success-messages prop.

Input
Input - Errors

As any validatable Vuetify component, v-input can be set to error state using error prop, messages can be added using error-messages prop. You can determine error messages count to show using error-count property.

Input
Input
Input - Rules

You can add custom validation rules to v-input, add them as functions returning true/error message. Note: v-text-field is used just for example.

When hide-details is set to auto messages will be rendered only if there's a message (hint, error message etc) to display.

Input - Slots

v-input has append and prepend slots. You can place custom icons in them.

Input - Slot events

v-input can have click:append and click:prepend events for its slots. Note: v-text-field is used just for example.

Default Slot