← Voltar para todos os desafios

Dia 5: Campos de formulário

A porta de entrada para os dados do usuário. Vamos projetar inputs, selects e checkboxes que sejam claros, úteis e acessíveis.

A conversa silenciosa: o que é um bom formulário?

Formulários são, essencialmente, uma conversa entre a interface e o usuário. Um bom formulário é como um bom entrevistador: ele faz perguntas claras, uma de cada vez, e ajuda o usuário a responder corretamente. Os princípios são simples: peça apenas o essencial, agrupe informações relacionadas (ex: dados pessoais, endereço) e, o mais importante, forneça feedback claro a cada passo.

Anatomia dos campos mais comuns

Vamos dissecar os componentes que formam a maioria dos formulários na web:

  • Input de texto: O campo básico para coletar textos curtos, como nome, e-mail ou senha. É composto por uma `Label` (o rótulo, essencial para acessibilidade), o campo em si e, opcionalmente, um `Placeholder` (texto de dica, que some ao digitar).
  • Checkbox: Usado quando o usuário pode selecionar várias opções de uma lista (ex: "Quais são seus hobbies?").
  • Radio button: Usado quando o usuário deve escolher apenas uma opção de uma lista (ex: "Qual seu nível de experiência?").
  • Select (Dropdown): Um menu suspenso, ideal para economizar espaço quando há uma lista longa de opções a serem escolhidas (ex: selecionar um país).

Os estados dos inputs (sim, eles também têm!)

Assim como os botões, os campos de formulário reagem à interação do usuário. Projetar esses estados é crucial para uma boa experiência.

  1. Default (Padrão): O campo vazio, pronto para receber informação.
  2. Focus (Em foco): Quando o usuário clica no campo para digitar. É vital ter um indicador visual (como uma borda colorida) para mostrar onde o usuário está.
  3. Error (Erro): Como o campo se parece quando a informação inserida é inválida. Geralmente com uma borda vermelha e uma mensagem de ajuda abaixo.
  4. Disabled (Desabilitado): Quando o campo não está disponível para interação.
Os diferentes estados de um campo de formulário

Vídeos para preencher seu conhecimento

Veja como designers profissionais abordam a criação de formulários e seus componentes no Figma.

Como criar um INPUT FIELD para seu FORMULÁRIO no Figma (Canal Crafting UX: Design, Usabilidade e IA)

Seu desafio de hoje: montando as peças de um formulário

Hoje você não vai montar um formulário inteiro, mas sim os seus componentes essenciais. Isso te ajudará a criar uma biblioteca para usar no futuro.

Checklist do desafio:

  1. Desenhe um campo de Input de Texto para "Nome de usuário", mostrando seu estado de Foco
  2. Crie um conjunto de Checkboxes para uma pergunta como "Quais notificações deseja receber?".
  3. Desenhe um menu Dropdown (Select) para o usuário escolher um item de uma lista.
  4. Crie uma variante de Input de texto com estado de Erro, incluindo uma mensagem de ajuda abaixo (ex: "Formato de e-mail inválido").

Concluiu? Compartilhe seus componentes!

Um bom formulário é a base de muitas interações. Mostre como você pensou nos detalhes.