Pular para conteúdo
6amDesign
v0.7.0 · PilotoUsar com IA
6am/Design system/Formulários
Revisão da seçãoPrecisa de ajustes1 atendidos · 1 a ajustar · 1 a revisar

O que já existe, o que precisa melhorar e o que ainda merece uma avaliação. Cada estado se refere apenas ao critério abaixo; não é aprovação da seção inteira.

  • Atende ao critério
    O exemplo de formulário demonstra validação e resultado claro.

    A demonstração local inclui campos obrigatórios, validação e sucesso; não envia dados.

    Ver material relacionado ↗
  • Precisa de ajustes
    Formulários reais tratam envio, falha e nova tentativa com consistência.

    Documentar e compartilhar padrão de envio real, incluindo preservação dos valores e recuperação.

  • Aguardando revisão
    Instruções e erros são claros com teclado e leitores de tela.

    Revisar rótulos, anúncio de erros, ordem de foco e recuperação nos fluxos reais.

Ver todas as revisões · JSON ↗

06 / Formulários

Pedir só o necessário. Explicar o próximo passo.

Labels visíveis, ajuda junto ao campo e erros que mostram como continuar. O exemplo abaixo funciona no navegador e não envia dados.

Neste exemplo, nenhum e-mail será enviado.

Demonstração local. Experimente enviar com campos vazios.

Como este formulário se comporta

  1. Identifica campos obrigatórios antes do envio.
  2. Explica o erro junto ao campo e leva o foco ao primeiro problema.
  3. Preserva as respostas enquanto a pessoa corrige.
  4. Confirma o resultado e permite testar novamente.

No produto, o estado de envio também deve impedir duplicações, informar falhas do servidor e oferecer uma nova tentativa.

<DsField
  id="email" name="email" type="email"
  label="E-mail" required autoComplete="email"
  hint="Enviaremos a proposta para este endereço."
  error={errors.email}
/>