Inputs

The v-input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. It is recommended that you extend this component, but it can be used as a standalone.

Usage

v-input has 4 main areas. The prepended slot, the appended slot, the default slot, and messages. These make up the core logic shared between all form components.

v-input/usage.vue

API

Caveats

Examples

Props

Error

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.

Error count

You can add multiple errors to v-input using error-count property.

v-input/prop-error-count.vue
v-input/prop-error.vue

Hide details

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

v-input/prop-hide-details.vue

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.

v-input/prop-hint.vue

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.

v-input/prop-loading.vue

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.

v-input/prop-rules.vue

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.

v-input/prop-success.vue

Events

Slot clicks

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

v-input/event-slot-clicks.vue

Slots

Append and prepend

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

v-input/slot-append-and-prepend.vue

Ready for more?

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