Uma área de texto permite que um usuário insira uma quantidade maior de texto do que um campo de texto padrão;
Ele pode incluir todas as opções de validação padrão suportadas pelo componente de campo de texto.
Opções
#Etiqueta
Uma área de texto deve 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.
#Posição da etiqueta
As etiquetas podem ser colocadas na parte superior ou na lateral do campo;
Os principais rótulos são a recomendação padrão porque funcionam melhor com textos mais longos, localização e layouts responsivos;
As etiquetas laterais são mais úteis quando o espaço vertical é limitado.
#Valor
O valor mostra o texto inserido de um usuário.
#Largura
A largura de uma área de texto pode ser personalizada adequadamente para seu contexto.
#Tamanho
As áreas 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.
#Silêncio
As áreas de texto raramente devem ser apresentadas no estilo silencioso;
Se a variante de altura do número estiver desativada, uma área de texto poderá usar o estilo silencioso;
A altura do campo crescerá com a altura do valor inserido.
#Obrigatório ou opcional
As áreas de texto podem ser marcadas como opcionais ou obrigatórias, 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;
As áreas de texto opcionais são indicadas 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.
#Número de caracteres
As áreas 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 (por exemplo, ícone de validação, indicadores “opcionais” ou “obrigatórios”) quando necessário.
#Ícone de validação
As áreas 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 na área de texto.
#Erro
Uma área de texto pode ser marcada como tendo um erro para mostrar que um valor precisa ser inserido para avançar ou que um valor inserido é inválido.
#Desativado
Uma área de texto em um estado desabilitado mostra que o campo de entrada existe, mas não está disponível nessa circunstância;
Isso pode ser usado para manter a continuidade do layout e comunicar que uma área de texto pode ficar disponível posteriormente.
#Somente leitura
As áreas 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;
Uma área de texto não tem uma opção somente leitura se não houver nada inserido nela.
#Arraste o ícone
As áreas de texto podem ter um tamanho estático ou podem ser redimensionadas com um ícone de arrastar no canto inferior direito;
O ícone de arrastar deve ficar oculto se a variante fixa estiver desativada ou se a área de texto não puder ser redimensionada.
#Altura
Se indefinida, a altura de uma área de texto é dinâmica e cresce com o texto de entrada.
#Texto de ajuda (descrição e mensagem de erro)
Uma área 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.