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

v-input
Name
append-icon
Default
undefined
Type
string

Appends an icon to the component, uses the same syntax as v-icon

Name
background-color
Default
undefined
Type
string

Changes the background-color of the input

Name
color
Default
undefined
Type
string

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))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean

Disable the input

Name
error
Default
false
Type
boolean

Puts the input in a manual error state

Name
error-count
Default
1
Type
number | string

The total number of errors that should display at once

Name
error-messages
Default
[]
Type
string | array

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

Name
height
Default
undefined
Type
number | string

Sets the component height

Name
hide-details
Default
false
Type
boolean

Hides hint, validation errors

Name
hint
Default
undefined
Type
string

Hint text

Name
label
Default
undefined
Type
string

Sets input label

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
loading
Default
false
Type
boolean

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

Name
messages
Default
[]
Type
string | array

Displays a list of messages or message if using a string

Name
persistent-hint
Default
false
Type
boolean

Forces hint to always be visible

Name
prepend-icon
Default
undefined
Type
string

Prepends an icon to the component, uses the same syntax as v-icon

Name
readonly
Default
false
Type
boolean

Puts input in readonly state

Name
rules
Default
[]
Type
array

Accepts an array of functions that return either True or a String with an error message

Name
success New in — v1.1
Default
false
Type
boolean

Puts the input in a manual success state

Name
success-messages New in — v1.1
Default
[]
Type
string | array

Puts the input in a success state and passes through custom success messages.

Name
validate-on-blur
Default
false
Type
boolean

Delays validation until blur event

Name
value
Default
undefined
Type
any

Input value

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore