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.
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.
API
Component | Description |
---|---|
v-input | Primary Component |
Caveats
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.
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.
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.
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.
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.
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.
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.
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.
Slots
Append and prepend
v-input
has append
and prepend
slots. You can place custom icons in them.