Campos de formulário Archives

Wireframe comparando um dropdown compacto, opções visíveis e busca para listas longas.

Quando usar dropdown e quando evitar

Lucas Camara 30/08/2026

Dropdowns economizam espaço, mas escondem opções e acrescentam uma etapa. Use-os quando a escolha for única, fechada e contextual.

Wireframe de um editor que compara alterações individuais salvas automaticamente com um conjunto de mudanças aguardando uma ação explícita.

Autosave ou botão Salvar: qual usar?

Lucas Camara 30/08/2026

Autosave e botão Salvar resolvem problemas diferentes. Use o contexto, o risco e a necessidade de revisão para escolher o comportamento mais claro.

Wireframe de checkout com busca por CEP, endereço sugerido, revisão e preenchimento manual

Como usar o CEP para preencher o endereço no checkout

Lucas Camara 25/08/2026

Veja como usar o CEP para reduzir a digitação no checkout sem esconder o endereço, bloquear a edição ou dispensar a validação antes da compra.

Wireframe minimalista que representa a revisão e edição humana de um resultado gerado por IA.

Como permitir que pessoas revisem e editem resultados gerados por IA

Lucas Camara 24/08/2026

Resultados de IA devem poder ser revisados, editados ou descartados antes de afetar uma decisão, uma comunicação ou um fluxo.

Ilustração wireframe de um formulário com preenchimento automático

Quando usar preenchimento automático

Lucas Camara 13/08/2026

Use preenchimento automático para reduzir digitação sem esconder campos, substituir a confirmação ou impedir a correção manual.

Campo de senha ligado a uma confirmação de segurança contextual.

Quando pedir confirmação de senha

Lucas Camara 11/08/2026

Saiba quando repetir uma nova senha, pedir a senha atual ou usar MFA para confirmar ações sensíveis sem criar atrito desnecessário.

Fluxo em wireframe com identificação, código temporário e criação de nova senha.

Como criar uma recuperação de senha clara

Lucas Camara 09/08/2026

Aprenda a criar um fluxo de recuperação de senha claro, seguro e acessível, sem revelar contas nem criar becos sem saída.

Três campos de senha em wireframe com pontos ocultos e ícones de visibilidade

Mostrar ou ocultar senha: como deve funcionar

Lucas Camara 09/08/2026

Como criar um controle de mostrar ou ocultar senha previsível, acessível e seguro.

Campo de senha com indicadores visuais de requisitos

Como informar requisitos de senha

Lucas Camara 09/08/2026

Aprenda a informar requisitos de senha antes do envio, apoiar passphrases e gerenciadores e evitar regras arbitrárias.

Formulário com dois valores preservados e um campo destacado por erro

Como preservar dados após um erro no formulário

Lucas Camara 09/08/2026

Aprenda a preservar dados preenchidos após erros de validação e orientar a correção sem obrigar a pessoa a recomeçar.

Dois estados de um campo mostrando foco e validação no momento adequado

Quando validar campos durante o preenchimento

Lucas Camara 09/08/2026

Saiba quando validar campos ao digitar, sair do campo ou enviar o formulário, sem interromper a tarefa.

Formulário com resumo de erros e mensagem próxima ao campo afetado

Mensagens de erro devem aparecer antes ou depois do campo?

Lucas Camara 09/08/2026

Saiba onde exibir mensagens de erro em formulários: junto ao campo, no resumo da página e no momento adequado.

Ilustração de um formulário organizado em grupos e etapas de preenchimento

Como definir a ordem dos campos em um formulário

Lucas Camara 09/08/2026

Organize os campos pela lógica da tarefa, agrupe informações relacionadas e mantenha a ordem visual, do HTML e do teclado coerentes.

Formulário genérico com labels persistentes e placeholders como apoio

Labels ou placeholders: o que usar em formulários

Lucas Camara 08/08/2026

Use labels visíveis para identificar campos e placeholders apenas como apoio breve, nunca como substitutos.

Formulário genérico com indicação consistente de campos obrigatórios

Campos obrigatórios: como indicar corretamente

Lucas Camara 08/08/2026

Indique campos obrigatórios com texto ou instrução clara, sem depender apenas de cor ou asterisco sem explicação.

Formulário genérico com resumo de erros no topo e mensagem junto ao campo

Onde exibir mensagens de erro em formulários

Lucas Camara 08/08/2026

Aprenda quando usar mensagens inline, resumo de erros e mensagens globais em formulários acessíveis.

Wireframe minimalista de um formulário com erro associado ao campo e orientação de correção.

Como escrever mensagens de erro úteis

Lucas Camara 08/08/2026

Escreva mensagens de erro claras, específicas e acionáveis para ajudar a pessoa a entender o problema e corrigi-lo sem perder o que já preencheu.

Interface genérica com erro de formulário indicado por texto, ícone e cor

Não use apenas cor para comunicar erros

Lucas Camara 08/08/2026

A cor pode reforçar um erro, mas não pode ser o único sinal de que algo está errado. Combine texto, ícones, bordas, posição e estados semânticos para que a informação permaneça compreensível em diferentes condições visuais.

Wireframe de formulário com feedback de erro próximo ao campo afetado

Mensagens de erro em formulários

Lucas Camara 08/08/2026

Mensagens de erro em formulários devem identificar o campo, explicar o problema e indicar como corrigi-lo sem apagar os dados. Esse padrão combina clareza, acessibilidade e recuperação eficiente após uma falha.