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.
Pré-visualização 1:1
Dashboard
Transações
Fornecedores
Catálogos
Usuários
Mais
CancelarSalvarVisualizar
Informações gerais do questionário
A informação preenchida nesta seção será mostrada aos destinatários do questionário.
ML
Nome*
Importação
Categoria
Importação
Modelo de cálculo
Média ponderada
Fórmula de cálculo
((PS1 x (10 x A/B)) + …)
Descrição
Descrição exemplo para o questionário
Seção 1 *
Administrativa
Significância *
1
Tempo de empresa*
Preencha…
Descreva a experiência no segmento
Preencha…
Seção 2 *
Financeira
Significância *
1
Tempo de empresa*
Preencha…
Descreva a experiência no segmento
Preencha…
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. |
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.