Formulário

Input

Campo de entrada de texto com suporte a label, descrição e estado de erro.

Uso

Use o elemento <y-input> no seu HTML:

html
<y-input label="Nome do produto" placeholder="Ex: Camiseta Yampi"></y-input>

Exemplos

Padrão

Padrão

Com descrição

Com descrição

Com erro

Com erro

Propriedades

PropriedadeTipoPadrãoDescrição
labelstringRótulo do campo
placeholderstringTexto placeholder
descriptionstringTexto de ajuda abaixo do campo
errorstringMensagem de erro
typestring"text"Tipo do input HTML
disabledbooleanfalseDesabilita o campo
valuestringValor do campo

Importação

Importe todos os componentes ou apenas este:

typescript
// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/input.js';

Acessibilidade

  • Suporta navegação por teclado
  • Utiliza atributos ARIA apropriados
  • focus-visible para indicação de foco