DS MS.GOV V2.0.0

Diretrizes de design

Formulários

Intro

O componente Formulário é responsável pela coleta estruturada de dados do usuário dentro da plataforma. Ele organiza campos, validações, agrupamentos e ações de forma consistente, garantindo clareza, previsibilidade e eficiência na interação.

Os formulários do sistema podem assumir diferentes formatos:

  • Formulário simples de página única
  • Formulário multi-etapas (Stepper/Wizard)
  • Formulário com agrupamento por seções
  • Formulário com resumo e confirmação
  • Formulário de configurações
  • Formulário com seleção múltipla e listas

Apesar das variações, todos seguem os mesmos princípios estruturais e visuais.

Estrutura Base do Formulário

Todo formulário deve ser composto por:

  1. Título da página
  2. Indicador de status (ex: Rascunho)
  3. Estrutura de navegação (quando multi-step)
  4. Agrupamento de campos
  5. Ações primárias e secundárias
  6. Feedback de validação

Container de Seção

Cada etapa ou agrupamento deve estar dentro de um container visual.

Elementos:

  • Título da seção (H2 ou H3)
  • Fundo diferenciado sutil
  • Espaçamento interno consistente
  • Agrupamento lógico de campos

Exemplos nas telas:

  • Dados pessoais
  • Endereço
  • Dados complementares
  • Configurações
  • Resumo

Tipos de Estrutura

Formulário Multi-Etapas (Wizard)

Usado em:

  • Cadastro do cidadão
  • Fluxos administrativos
  • Processos complexos

Padrão:

  • Stepper horizontal
  • Uma etapa visível por vez
  • Botões: Voltar / Continuar
  • Salvamento automático (quando aplicável)

Boas práticas:

  • Evitar mais de 7 etapas
  • Manter títulos claros
  • Exibir progresso visual

Formulário com Seções Colapsáveis

Utilizado para:

  • Configurações de conta
  • Perfis de usuário
  • Painéis administrativos

Padrão:

  • Blocos independentes
  • Botão “Editar” por seção
  • Dados exibidos em modo leitura
  • Edição contextual

Formulário com Resumo

Usado para:

  • Confirmação final
  • Revisão de dados antes de envio

Estrutura:

  • Agrupamento por seção
  • Exibição Label + Valor
  • Botão “Editar” por grupo

Não deve permitir edição direta sem entrar na seção.

Tipos de Campos Suportados

Com base nas telas apresentadas:

Campos de Texto

  • Text
  • Number
  • Password
  • URL
  • Hour

Campos de Seleção

  • Select
  • Multi-select
  • Autocomplete
  • Radio
  • Checkbox
  • Toggle

Campos Especiais

  • Date
  • Upload de arquivo
  • Range Slider
  • Moeda
  • Busca com ícone

Campo Obrigatório

Indicador:

  • Asterisco (*)

Validação:

  • Mensagem clara abaixo do campo
  • Não usar apenas cor vermelha como indicador

Campo com Erro

Deve conter:

  • Borda de erro
  • Ícone opcional
  • Texto explicativo

Exemplo:
“Este campo é obrigatório.”

Campo com Sucesso

  • Borda verde
  • Ícone de confirmação
  • Feedback claro e objetivo

Padrões de Layout

Grid

  • Máximo de 2 a 3 colunas
  • Priorizar leitura vertical
  • Evitar sobrecarregar linha com muitos campos

Espaçamento

  • Espaço consistente entre campos
  • Separação clara entre grupos
  • Hierarquia visual evidente

Ações do Formulário

Botões padrão:

  • Cancelar (secundário)
  • Salvar rascunho
  • Voltar
  • Continuar
  • Salvar

Regras:

  • Ação primária deve estar à direita
  • Cancelar à esquerda
  • Não usar mais de uma ação primária

Salvamento Automático

Quando aplicado:

  • Indicar estado visual (ex: “Salvamento automático…”)
  • Não bloquear navegação
  • Exibir confirmação sutil

Upload de Arquivo

Padrão:

  • Área drag and drop
  • Texto de instrução
  • Lista de formatos aceitos
  • Tamanho máximo

Exemplo apresentado:
“Arraste ou selecione um arquivo”

Validação e Feedback

Validação deve ocorrer:

  • Em blur (saída do campo)
  • Em submit
  • Em mudança crítica

Nunca:

  • Bloquear digitação prematuramente
  • Exibir múltiplos erros agressivamente

Acessibilidade

Formulários devem garantir:

  • Labels associadas via for e id
  • Ordem de tabulação correta
  • Mensagens de erro anunciadas por leitor de tela
  • Contraste mínimo 4.5:1
  • Não depender apenas de cor para estado

Boas Práticas

✅Faça

  • Agrupe campos relacionados
  • Use linguagem simples
  • Use exemplos claros no placeholder
  • Use máscara quando necessário
  • Permita revisão antes do envio

❌Não Faça

  • Não sobrecarregue com campos desnecessários
  • Não use placeholder como substituto de label
  • Não esconda erros críticos
  • Não misture múltiplos padrões de layout

Quando Usar Multi-Step vs Página Única

Use Multi-Step quando:

  • Mais de 15 campos
  • Dados divididos por contexto
  • Processo obrigatório sequencial

Use Página Única quando:

  • Até 10–12 campos
  • Dados simples
  • Baixa complexidade

Resumo

O componente Formulário deve:

  • Garantir clareza estrutural
  • Manter consistência visual
  • Oferecer feedback imediato
  • Suportar validações robustas
  • Manter previsibilidade na interação

Independentemente da variação apresentada nas telas, todos os formulários devem seguir a mesma base estrutural, garantindo unidade dentro do Design System.