Campos de Texto

1. Aplicações e Uso

Não existe uma regra rígida sobre onde utilizá-los, pois são necessários em quase todas as interações que exigem dados do usuário, tais como:

• Páginas de login e cadastro (signup);

• Campos de busca;

• Inserção de datas, valores numéricos ou textos extensos.

2. Anatomia de um Campo de Texto

Um campo de texto bem projetado é composto por vários elementos, alguns obrigatórios e outros opcionais, que auxiliam na clareza e usabilidade:

1. Container: O espaço físico que delimita onde o texto será inserido.

2. Label (Rótulo): Identifica o que deve ser digitado. É crucial em formulários longos para que o usuário não esqueça o propósito do campo após começar a escrever.

3. Placeholder: Texto temporário que indica o tipo de informação esperada (ex: "exemplo@email.com").

4. Leading Icon: Ícone à esquerda, usado para indicar a intenção do campo (ex: uma lupa para busca).

5. Trailing Icon: Ícone à direita, geralmente usado para ações como limpar o campo ou alternar a visibilidade de uma senha.

6. Supporting Text (Texto de Apoio): Fornece instruções específicas, como requisitos de caracteres para senhas, ou exibe mensagens de erro.

7. Input Text e Carrot (Caret): O texto digitado pelo usuário e a barra pulsante que indica a posição atual da digitação.

3. Estados do Componente

Para uma boa experiência do usuário (UX), o campo de texto deve reagir visualmente às interações. Os principais estados são:

1. Default (Padrão): O estado inicial e inativo do campo.

2. Hover: Quando o usuário passa o mouse sobre o campo, geralmente indicado por uma mudança na cor da borda.

3. Focus (Ativo): Quando o campo está pronto para receber digitação. É vital que este estado seja visualmente distinto (com bordas coloridas ou sombras) para auxiliar na acessibilidade, especialmente para quem navega via teclado.

4. Disabled (Desativado): O campo fica acinzentado e não permite interação, geralmente por alguma condição não atendida.

5. Error (Erro): Indicado geralmente pela cor vermelha e, idealmente, acompanhado de um ícone, garantindo que pessoas com deficiências visuais (como daltonismo) identifiquem o problema.

4. Variações e Padrões de Design

Os campos de texto podem variar conforme a necessidade do sistema:

• Prefixos e Sufixos: Informações fixas que não mudam (ex: "R$" ou ".com").

• Máscaras de Senha: Ocultam os caracteres digitados por segurança.

• Text Area: Campos expansíveis para textos longos.

• Tags/Tokens: Quando o sistema transforma uma entrada (como um e-mail) em um bloco visual após o "Enter".

Diferentes empresas adotam estilos variados: o Notion utiliza labels claros; a Superlist integra botões de ação dentro do próprio input; e o Material Design da Google popularizou o "floating label", onde o placeholder se transforma em um rótulo menor ao ser clicado.

5. Melhores Práticas de Construção no Figma

Ao criar esses componentes em ferramentas de design como o Figma, recomenda-se:

1. Auto Layout: Utilizar para garantir que o espaçamento e o tamanho sejam responsivos.

2. Component Sets e Variantes: Criar um conjunto de componentes para organizar todos os estados (hover, focus, error) em um só lugar.

3. Propriedades Booleanas: Configurar o componente para que elementos como "Label" ou "Supporting Text" possam ser ligados ou desligados facilmente na barra lateral.

4. Tamanho de Fonte: Utilizar tamanhos legíveis, sendo 16px um padrão comum para garantir a leitura em desktop e dispositivos móveis.