Input
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.
API
Appends an icon to the component, uses the same syntax as v-icon
Changes the background-color of the input
Applies specified color to the control - it can be the name of material color (for example success
or purple
) or css color (#033
or rgba(255, 0, 0, 0.5)
)
Applies the dark theme variant
Disable the input
Puts the input in a manual error state
The total number of errors that should display at once
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
Sets the component height
Hides hint, validation errors
Hint text
Sets input label
Applies the light theme variant
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color
Displays a list of messages or message if using a string
Forces hint to always be visible
Prepends an icon to the component, uses the same syntax as v-icon
Puts input in readonly state
Accepts an array of functions that return either True or a String with an error message
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
Delays validation until blur event
Input value