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.

Utilização

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
Nome
append-icon
Padrão
undefined
Tipos
string

Components.Inputs.

Nome
background-color
Padrão
undefined
Tipos
string

Components.Inputs.

Nome
color
Padrão
undefined
Tipos
string

Components.Inputs.

Nome
dark
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
disabled
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
error
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
error-count
Padrão
1
Tipos
number | string

Components.Inputs.

Nome
error-messages
Padrão
[]
Tipos
string | array

Components.Inputs.

Nome
height
Padrão
undefined
Tipos
number | string

Define a altura do componente

Nome
hide-details
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
hint
Padrão
undefined
Tipos
string

Components.Inputs.

Nome
label
Padrão
undefined
Tipos
string

Components.Inputs.

Nome
light
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
loading
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
messages
Padrão
[]
Tipos
string | array

Components.Inputs.

Nome
persistent-hint
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
prepend-icon
Padrão
undefined
Tipos
string

Components.Inputs.

Nome
readonly
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
rules
Padrão
[]
Tipos
array

Components.Inputs.

Nome
success New in — v1.1
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
success-messages New in — v1.1
Padrão
[]
Tipos
string | array

Components.Inputs.

Nome
validate-on-blur
Padrão
false
Tipos
boolean

Components.Inputs.

Nome
value
Padrão
undefined
Tipos
any

Controla visibilidade

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