Um text-field simples com placeholder e/ou label.

Text-fields em linha única não possuem seu label flutuando quando estiver focado ou com dados.

Text fields can be disabled or readonly.

Ícones podem ser especificados como prepended ou appended.

When clearable, you can customize the clear icon with clear-icon.

click:prepend, click:append, click:append-outer, and click:clear will be emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead.

Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.

Text field label can be defined in label slot - that will allow to use HTML content

Use um contador para informar o usuário o limite de caracteres. O contador não realiza nenhuma validação por si só. Você precisará juntá-lo com um sistema de validação interno, ou uma biblioteca de terceiros.

Um campo de senha pode ser usado com um ícone anexado e uma função de retorno (callback) para de controlar sua visibilidade.

Vuetify inclui uma validação simples através da propriedade rules. Esta propriedade aceita um array de funções de retorno (callbacks). Enquanto estiver validando as regras, o valor do v-model atual será passado para a função de retorno. Esta função de retorno deve retornar true ou String, com a mensagem de erro.

Text fields com largura total possibilitam a você criar campos de entrada sem limites. Neste exemplo, nós usamos o v-divider para separar os campos.

A propriedade hint nos text-fields adiciona a string fornecida abaixo do text-field. Usando persistent-hint mantém a sugestão visível quando o text-field não estiver focado.

As propriedades prefix e suffix permitem a você adicionar na mesma linha um texto não modificável próximo ao text-field, no começo ou final

Enquanto o v-form ou plugins de terceiros como vuelidate ou vee-validation podem ajudar a simplificar seu processo de validação, você pode simplesmente escolher controlar você mesmo.

Text-fields podem ser usados com um design em caixa alternativo. As props de ícones append e prepend não são suportadas neste modo.

Text-fields podem ser usados com um design solo alternativo.

Text fields can be used with an alternative outline design.

Você pode opcionalmente modificar um text-field em qualquer cor que a oalheta de cores do Material design contenha. Abaixo é um exemplo de uma implementação de um formulário customizado com validação.

Text fields podem ser validados com máscaras. Usando regras customizadas ou pré-fabricadas, você pode formatar opcionalmente e validar conjuntos específicos de caracteres.

Você pode exibir uma barra de progresso ao invés da linha inferior. Você pode usar o progresso indeterminado padrão que possuirá a mesma cor que o text field ou designar uma cor customizada usando o slot progress