Formulário
Template da tela de cadastro/edição — campos em seções e rodapé de ações.
Tela de cadastro ou edição de um registro. Campos agrupados em seções; as ações ficam sempre no rodapé, nunca soltas no meio. Os controles vêm de Componentes › Formulários.
Informações gerais do questionário
A informação preenchida nesta seção será mostrada aos destinatários do questionário.
Quando usar
- Criar ou editar um registro com vários campos.
- Quando há validação e um submit explícito (Salvar/Cancelar).
Quando NÃO usar: um fluxo longo dividido em etapas com validação por passo — use o Wizard. Só um ou dois campos rápidos — use um modal/inline, não uma tela de formulário.
Anatomia
Três zonas, de cima para baixo:
- Subheader de ações — as ações da tela ficam fixas no subheader (topo), nunca soltas no meio do formulário: Cancelar (secundário) + Salvar (primário); "Visualizar" quando fizer sentido. Até 3 aparentes + "Mais ações" (overflow).
- Seção "Informações gerais" — os campos principais em grid (1 a 4 colunas, conforme a densidade). Cada campo é um FormField (rótulo + ajuda/erro); obrigatórios marcados com
*. - Seções com perguntas — grupos adicionais (ex.: Administrativa, Financeira), cada um com cabeçalho (título + descrição) e suas perguntas configuráveis.
Perguntas configuráveis
Nas seções, cada pergunta declara:
| Recurso | O que é |
|---|---|
| Tipo de resposta | Texto · Numérica · Múltipla escolha (um por pergunta). |
| Obrigatório | Marca a pergunta como obrigatória (*); entra na validação. |
| Significância (peso) | Peso da pergunta quando a resposta é pontuada/avaliada. |
| Anexo | Permite enviar um arquivo como complemento da resposta. |
| Condicional | Mostra a pergunta só quando outra condição é atendida. |
Seções — ações
Cada seção (card) tem ações próprias, e as perguntas são gerenciáveis dentro dela:
- Compartilhar seção — abre um modal para escolher quem vê/edita aquela seção.
- Excluir seção — abre um diálogo de confirmação (remove a seção e suas perguntas).
- Perguntas — adicionar, remover (com confirmação) e reordenar (arraste) dentro da seção.
- No topo do questionário há Compartilhar questionário (o fluxo inteiro), também via modal.
Modais e diálogos
Dois padrões distintos — Modal para tarefa, diálogo para confirmação:
| Ação | Tipo | Estrutura |
|---|---|---|
| Compartilhar (questionário / seção) | Modal | Título + descrição · campo de pessoa em fill + botão + (quadrado) para adicionar · lista de quem tem acesso · rodapé Cancelar / Salvar. |
| Excluir (seção / pergunta) | Diálogo de confirmação | Ícone no header (tom error) + título ("Excluir seção Nome?") + texto de aviso · sem corpo · sem "×" · rodapé Manter / Excluir (Excluir em error). |
- Título do diálogo referencia o nome do item ("Excluir seção Financeira?"); sem nome, usa a posição ("seção 1").
- Os modais/diálogos abrem dentro da área da tela (não sobre o site inteiro).
Validação
- Inline, por campo (mensagem abaixo do campo, via FormField).
- Obrigatórios marcados com
*; o submit ("Salvar") só conclui com os obrigatórios preenchidos. - Mensagens e rótulos seguem Voz e conteúdo.
Responsivo
- Desktop: grid de campos em até 4 colunas; ações inline no subheader.
- Mobile/tablet: o grid empilha (1 coluna); as ações do subheader vão para "Mais ações" / rodapé fixo; o conteúdo rola.
Componentes da tela
Cada zona é um componente oficial — priorize o EletroDS; o Nuxt UI é o fallback.
| Zona | Componente | Papel na tela |
|---|---|---|
| Wrapper do formulário | Form | Agrupa campos, validação e submit. |
| Campo (rótulo + ajuda/erro) | FormField | Moldura de cada campo, com estado de erro. |
| Texto / número | Input | Entrada de texto livre e numérica. |
| Escolha em lista | Select | Opção única a partir de uma lista. |
| Rodapé de ações | Button bar | "Cancelar" (secundário) + "Salvar" (primário), nunca soltos. |
A escrita de rótulos, mensagens e validação segue Voz e conteúdo.
Como montar (Compositor)
No Prompt Builder, a tela é montada por áreas → colunas → peças, com todos os slots (Header, Toolbar, Main, Footer) na mesma estrutura:
- Cada slot vem por padrão com o componente real do ME (Header =
MeHeader; Toolbar =MeButtonBar; Footer =MeNavBar) — selecione o bloco para editar a config do próprio componente. - O corpo (Main) empilha seções (cards) com perguntas configuráveis; cada peça é um componente real (Me* / U*) e usa Código custom só quando não existe componente para o papel.
- Detalhes de construção no repo:
docs/formulario-wizard-real-preview.md.