Componentes

text input

Text input é um campo de texto para coletar, editar ou visualizar dados utilizando até uma linha de texto.

índice

demo interativa

Uma versão de interativa do componente desenvolvido.

text input

(opcional)
(opcional)
(opcional)

propriedades*

propertydescriptionrequireddefault valuetype

label

Set input label

falseundefinedstring

optionalLabel

Set input optional label

false(opcional)string

helperText

Text bellow the input

falseundefinedstring

feedback

Input feedback style

falseundefinederrorvalid

isLoading

Adds a rotating loading indicator on the right.

falsefalseboolean

disabled

Disables typing on the input

falsefalseboolean

readOnly

Disables typing but improve reading

falsefalseboolean

suffix

Input suffix, a string or a component to be used as a suffix

falseundefinedstring | ComponentClass<any, any> | FunctionComponent<any>

prefix

Input prefix, a string or a component to be used as a prefix

falseundefinedstring | ComponentClass<any, any> | FunctionComponent<any>

*valores gerados automaticamente.

formatação

Ilustração de página web com dois campos de texto. No primeiro, marcações de 1 a 4 destacam partes do campo. No segundo, marcações de 5 a 7.
  1. Input label: pequeno texto que indica a ação executada pelo botão.
  2. Placeholder: é um texto que auxilia no preenchimento certo do campo. Não pode ser impeditivo o entendimento do text input.
  3. Prefix: é um texto que já vem formatado na frente do dado fornecido no campo.
  4. Suffix: é um texto que já vem formatado na após o dado fornecido no campo.
  5. Icon: é uma pequena ilustração que auxilia na identificação do campo ou fornece um feedback.
  6. Value: é o dado inserido no campo de texto.

Uso

Normalmente, o text input aparece dentro de um formulário para solicitar dados fornecidos pela pessoa usuária.

  • Largura: deve ser utilizada com intuíto de auxiliar no entendimento do dado que é esperado dentro dele.
Ilustração de página web com três campos de texto. Na primeira linha o campo de nome completo. Na segunda os campos de código de área e telefone.
certoUse a largura que indique o tipo de dado esperado a ser preenchido.
Ilustração de página web com três campos de texto. Na primeira linha o campo de nome completo. Na segunda o campo de código de área. Na terceira, o campo de telefone.
erradoNão use a mesma largura para todos os campos.

variações

variaçãoutilização
iconQuando existir um ícone relacionado ao campo, essa propriedade pode ser adicionada para facilitar o seu entendimento.
prefix/suffixUtilizados quando existir um dado padrão a ser preenchido antes ou depois do valor inserido no campo.

grupos e alinhamento

Os text inputs normalmente são utilizados empilhados, com excessão quando forem campos complementares.

  • Distância vertical: deve ser utilizado $spacing-stack-medium entre inputs.
  • Distância horizontal: deve ser utilizado $spacing-inline-medium entre inputs.
Ilustração de formulário em página web. Na primeira linha, dois campos estão separados por um espaço horizontal, com marcador de número 1. Os outros campos estão separados por um espaço vertical com marcardor de número 2.
  1. Espaçamento horizontal usando token $spacing-inline-medium.
  2. Espaçamento vertical usando token $spacing-stack-medium.

guia de conteúdo

Input label: deve ser um texto curto e direto sobre o dado que se espera preencher. Exemplo: CPF, nome completo, telefone, razão social.

Placeholder text: quando existir, deve auxiliar no preenchimento do campo com algum exemplo ou máscara.

Helper text: deve ser uma frase curta, utilizando pontuação normal, ajudando o usuário a entender a informação esperada. Exemplo: “Nome igual ao escrito no cartão.”.

guia de design

  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Usa os design tokens.
  • Tem símbolo no Figma.
  • Possui motion.
  • Possui versão web.
  • Possui versão responsiva.
  • Possui versão mobile.
  • É acessível via leitor de tela.
  • Texto possui contraste acessível (WCAG 2.0 - Nível AA).

conteúdo relacionado