packages/docs/src/pages/en/components/inputs.md
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.
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.
| Component | Description |
|---|---|
| v-input | Primary Component |
::: warning
The v-input component is used as a wrapper for all of the Vuetify form controls. It does NOT inherit attributes as they are expected to be passed down to inner inputs.
:::
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.
You can add multiple errors to v-input using error-count property.
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 can have hint which can tell user how to use the input (when focused). persistent-hint prop makes the hint visible always if no error-messages are displayed.
v-input has loading state which can be used, e.g. for data loading indication. Note: v-text-field is used just for example.
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 can have click:append and click:prepend events for its slots. Note: v-text-field is used just for example.
v-input has append and prepend slots. You can place custom icons in them.