Campo de texto

Os campos de texto permitem que os usuários insiram entradas de texto personalizadas com um teclado;

Várias opções podem ser mostradas com o campo para comunicar os requisitos de entrada.

Os campos de texto devem sempre ter um rótulo;
Em casos raros em que o contexto é suficiente e um especialista em acessibilidade revisou o design, o rótulo pode ficar indefinido.

As etiquetas podem ser colocadas na parte superior ou na lateral;
Os rótulos superiores são o padrão e são recomendados porque funcionam melhor com textos longos, localização e layouts responsivos;
As etiquetas laterais são mais úteis quando o espaço vertical é limitado.

A largura de um campo de texto pode ser personalizada adequadamente para seu contexto.

Os campos de texto vêm em quatro tamanhos diferentes: pequeno, médio, grande e extragrande;
O tamanho médio é a opção padrão e mais usada;
Use os outros tamanhos com moderação; eles devem ser usados para criar uma hierarquia de importância dentro da página.

Por padrão, os campos de texto têm um plano de fundo visível;
Esse estilo funciona melhor em uma matriz densa de controles em que o plano de fundo ajuda a separar a entrada do contêiner ao redor ou a dar visibilidade a botões isolados;
Como alternativa, os campos de texto silencioso não podem ter plano de fundo visível;
Esse estilo funciona melhor quando um layout claro (pilha vertical, tabela, grade) facilita a análise dos botões. Muitos componentes silenciosos em um espaço pequeno podem ser difíceis de ler.

Os campos de texto podem ser marcados como opcionais ou obrigatórios, dependendo da situação;
Para campos de texto obrigatórios, há duas opções de estilo: um rótulo “(obrigatório)” ou um asterisco;
Se você usar um asterisco, certifique-se de incluir um texto de dica para explicar o que o asterisco significa;
Os campos de texto opcionais são indicados com texto adicionado ao final do rótulo — “(opcional)” — ou não têm nenhuma indicação;
O asterisco usado neste componente é um ícone que possui espaçamento específico do texto do rótulo — não faz parte do próprio texto do rótulo.

Os campos de texto podem exibir um indicador de contagem de caracteres quando o comprimento da entrada de texto precisa ser mantido abaixo de um valor predefinido;
Os indicadores de contagem de caracteres podem ser usados em conjunto com outros indicadores (ícone de validação, indicadores “opcionais” ou “obrigatórios”) quando necessário.

Os campos de texto podem exibir um ícone de validação quando se espera que a entrada de texto esteja em conformidade com um formato específico (por exemplo, endereço de e-mail, número de cartão de crédito, requisitos de criação de senha etc.);
O ícone aparece assim que um usuário digita uma entrada válida no campo.

Um campo de texto pode ser marcado como tendo um erro para mostrar que um valor precisa ser inserido para avançar ou que um valor inserido é inválido;
Se existir um erro, o ícone de erro sempre substitui o ícone de validação.

Um campo de texto em um estado desabilitado mostra que existe um campo de entrada, mas não está disponível nessa circunstância;
Isso pode ser usado para manter a continuidade do layout e comunicar que um campo pode ficar disponível posteriormente.

Os campos de texto têm uma opção somente leitura para quando o conteúdo no estado desabilitado ainda precisa ser exibido;
Isso permite que o conteúdo seja copiado, mas não interagido ou alterado. Um campo de texto não tem uma opção somente leitura se não houver nada inserido nele.

Um campo de texto pode ter um texto de ajuda abaixo do campo para fornecer contexto ou instruções extras sobre o que um usuário deve inserir no campo;
A área de texto de ajuda tem duas opções: uma descrição e uma mensagem de erro;
A descrição comunica uma dica ou informação útil, como requisitos específicos para o preenchimento correto do campo;
A mensagem de erro comunica um erro para quando os requisitos de campo não são atendidos, solicitando que o usuário ajuste o que foi inserido originalmente.

Um campo de texto pode ter vários tipos de entrada, dependendo da necessidade e do caso de uso. Os campos de texto têm um tipo de entrada de texto por padrão;
Use esses tipos de entrada para os seguintes casos de uso:
- Texto define um campo de texto de linha única;
- URL define um campo para inserir uma URL;
- Telefone define um campo para inserir um número de telefone;
- Email define um campo para inserir um endereço de email;
- Senha define um campo de senha. Conforme um usuário insere um valor, o texto muda para pontos.

A largura mínima de um campo de texto é 1,5× a altura do campo, tanto para o estilo padrão quanto para o estilo silencioso;
Em casos raros em que o contexto é suficiente e um especialista em acessibilidade revisou o design, o rótulo pode ficar indefinido.

Quando o rótulo do campo é muito longo para o espaço horizontal disponível, ele é quebrado para formar outra linha;
O próprio texto do campo é truncado.

Quando um campo de texto apresenta vários valores que não são idênticos, o campo deve mostrar dois traços (--).

Quando o texto de ajuda é muito longo para o espaço horizontal disponível, ele é quebrado para formar outra linha.

Em casos raros em que o contexto é suficiente e um rótulo pode estar ausente, certifique-se de que o projeto seja revisado e aprovado por um especialista em acessibilidade.