estrutura

01

1 coluna · labels acima · seções com título quando >5 campos · ações no rodapé alinhadas à esquerda.

// dados pessoais
// preferências

validação

02

ações

03

Primary à esquerda (ação principal), ghost à direita (cancelar). Em flows multi-step, usar "voltar" (ghost) à esquerda e "próximo" (primary) à direita.

quando usar

04

use

  • Single column como default
  • Agrupamento em seções com título quando >5 campos
  • Helper text antecipando dúvidas

não use

  • Two-column em forms longos — quebra fluxo de leitura
  • Validar a cada keystroke — irritante
  • Esconder requirements até o erro