Pular para o conte√ļdo principal

Text field

Vis√£o geral#

O Text field √© um componente de entrada de dados que possibilita √† pessoa que est√° interagindo com a interface insira e edite informa√ß√Ķes. Esse tipo de campo possui uma √ļnica linha e √© bastante comum em formul√°rios.

Tipos#

Pensando na modularidade do Design system, o text field possui duas composi√ß√Ķes distintas:

  • Text field: vers√£o padr√£o do componente, com todos os elementos;
  • Text field (Single): apenas o campo de entrada em sua forma m√≠nima.
Dois tipos de text field: padr√£o e unit√°rio.

Anatomia#

Estruturalmente, o text field pode conter label, field, help text e text error. Já o campo em si, possui suas partes específicas, como border e input text.

Text Field#

Demonstrativo das 4 partes do text field completo

1. Label (ani-label)

2. Field (single)

3. Help text

4. Text error (error)

Text Field (Single)#

Text field na vers√£o single, indicando as 5 partes

1. Placeholder

2. Border

3. Background

4. Input text

5. Outline (focus)

O componente é estruturado e estilizado por meio dos design tokens. Os tokens que podem ser alterados pelas marcas estão listados na seção de propriedades customizáveis.

note

A label √© tratada como um componente √† parte no Design System (ani-label). Voc√™ pode consultar suas varia√ß√Ķes e customiza√ß√Ķes na documenta√ß√£o espec√≠fica desse componente.

ūüĒó Label

Boas pr√°ticas#

O componente foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG 2.1). Tamb√©m foi estruturado com base em padr√Ķes de usabilidade para contribuir com uma boa experi√™ncia. Por isso, ao aplicar esse componente, √© muito importante que sejam levados em considera√ß√£o alguns crit√©rios e pr√°ticas:

  • Use label com textos auto-explicativos, com instru√ß√Ķes claras e objetivas, para que seja poss√≠vel identificar com facilidade qual informa√ß√£o precisa ser inserida no campo;
  • Mantenha a largura do campo adequada ao conte√ļdo esperado, evitando com que sejam muito maiores ou muito menores do que o necess√°rio;
  • Nunca use o placeholder para substituir a label do componente. Use-o para trazer mais contexto sobre o tipo de informa√ß√£o que precisa ser adicionada;
Dois inputs, CPF e email, identificados pela labelFazer

Use labels curtas e objetivas, identificando com clareza o campo a qual est√° relacionada.

Dois inputs, CPF e email, sem label, com a identificação dos campos no placeholderNão fazer

Usar o placeholder como substituto da label compromete a identifica√ß√£o do campo ap√≥s a inser√ß√£o do conte√ļdo e √© ruim para acessibilidade, pois alguns leitores de tela ignoram o placeholder.

  • Um text field pode receber diversos tipos de informa√ß√£o, sendo o tipo texto o padr√£o. No desenvolvimento, use o atributo adequado para o tipo de dado esperado, pois tornam o formul√°rio mais acess√≠vel (Exemplo: para um campo de e-mail, <input type="email">);
  • Sempre que poss√≠vel, utilize m√°scara no campo para ajudar a identificar o padr√£o de conte√ļdo esperado.

Erro, validação e ajuda#

  • Sempre que poss√≠vel, opte por fazer a valida√ß√£o dos dados antes que seja feito o envio formul√°rio;
  • Sinalize a obrigatoriedade do campo de acordo com o contexto. Quando a maioria dos campos for opcional, indique todos que s√£o obrigat√≥rios. Quando a maioria dos campos for obrigat√≥rio, sinalize os campos que s√£o opcionais;
Inputs Nome, CPF e Email, sendo que apenas o email est√° sinalizado como opcionalFazer

Indique a obrigatoriedade do campo, conforme o contexto, evitando a carga de informação nos campos.

Inputs Nome, CPF e Email, com os dois primeiros marcados como obrigatório.Não fazer

Repetir a informa√ß√£o que √© a maioria no formul√°rio gera redund√Ęncia.

  • Se apenas um erro for poss√≠vel, utilize o help text para descrever como evit√°-lo. Quando v√°rios erros forem poss√≠veis, a mensagem deve ser escrita pensando no erro mais prov√°vel;
  • Em caso de um erro, sinalize o item a ser corrigido, com uma mensagem que auxilie na sua corre√ß√£o.
Campo nova senha sinalizado com erro e mensagem informando que precisa ter pelo menos 5 caracteresFazer

Escreva mensagens de erro que ajudem a corrigi-los.

Campo nova senha sinalizado com erro e mensagem senha inv√°lidaN√£o fazer

Evite mensagens de erro genéricas.

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente, internamente, e n√£o podem ser alteradas. S√£o elas:

  • O text-field foi desenvolvido com uso de controles padr√Ķes HTML, o que permite a identifica√ß√£o do mesmo na interface por tecnologias assistivas. (WCAG 4.1.2: Name, Role, Value)
  • O foco √© vis√≠vel e possui uma espessura superior a 2 pixels CSS, n√£o ficando escondido por outros elementos da tela. (WCAG 2.4.12: Focus Appearance)
  • Inclus√£o do ARIA-DESCRIBEDBY na tag do campo, mantendo uma sequ√™ncia l√≥gica dos itens: label, campo de input, error text/ help text.
  • A identifica√ß√£o do erro acontece tamb√©m atrav√©s da mudan√ßa de cor do campo, mas tamb√©m de um √≠cone junto da mensagem (WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification)