Text Field

Uso

O Text field deve ser utilizado sempre que for necessário permitir ao usuário inserir informações de forma livre em campos de formulário. É apropriado para dados simples como nomes, emails ou mensagens. Não deve ser usado para buscas ou seleções — que possuem componentes dedicados.

Anatomia

❖. Component

• Agrupa todos os elementos do campo de texto, incluindo label, container, conteúdo digitável e mensagens auxiliares.

1. Label

• Informa o tipo de dado esperado naquele campo.

• Deve sempre estar presente.

• Posicionado acima do container, mantém visibilidade mesmo após o preenchimento.

• Pode ser ocultado apenas em contextos onde a informação já é inferida de forma clara.

2. Container outlined

• Área que contém o conteúdo editável.

• Apresenta bordas de 1px no estado Rest e 2px no estado Error.

• As alterações visuais de estado (ativo, erro, desabilitado) ocorrem aqui.

• Deve se adaptar dinamicamente à largura do conteúdo quando o campo for multilinha.

3. Supporting text

• Mensagem opcional abaixo do container.

• Pode conter:

  • Texto auxiliar

  • Contador de caracteres

  • Ícone de status (ex: erro)

• Não é obrigatório, mas altamente recomendado em casos de validação, limites de entrada ou mensagens contextuais.

4. Content

• Agrupa os elementos internos do campo de texto.

• Pode conter:

  • Icon left (opcional)

  • Input text (obrigatório)

  • Caret (automático, cursor de digitação)

  • Placeholder (opcional)

  • Icon right (opcional)

• Deve se adaptar ao modo de entrada: uma linha ou múltiplas linhas (textarea).

• Em campos multilinha, a altura do campo deve crescer com o conteúdo ou ser limitada por regras definidas de UX.

Variantes

Large

Usado como padrão em formulários principais, telas de autenticação e contextos onde a atenção ao campo de entrada deve ser alta. Apresenta maior altura e espaçamento, seguindo as regras de Framing para o tamanho Large.

Medium

Utilizado em contextos com grande volume de campos, onde o uso da variante Large comprometeria a compactação da interface. Mantém a clareza, porém com dimensões reduzidas conforme o padrão Medium do Framing. Ideal para formulários densos.

Use Cases

Referências

Histórico de Atualizações