Lumina

Pattern · Lumina

Form Layout

Estrutura de campo: label + input + hint opcional + erro abaixo. Espaço vertical respirado, label sempre presente.

Estrutura de um campo

Como você aparece no Lumina.

Máximo 240 caracteres.

0/240

Email inválido. Falta o domínio.

Receita

Container space-y-6 entre campos, space-y-2 dentro de cada campo. Hint em text-xs muted, erro em text-xs destructive.

TSX

Com react-hook-form

TSX

Tokens

  • Gap entre campos: space-y-6 (24 px). Suficiente pra dar respiro.
  • Gap interno: space-y-2 entre label/input/hint.
  • Hint: text-xs text-muted-foreground.
  • Erro: text-xs text-destructive. Aparece ABAIXO do input.
  • Footer de ações: flex justify-end gap-2 pt-2. Cancelar à esquerda do Salvar.

Anti-padrões

  • Label como placeholder. Some quando digita.
  • Hint cinza demais. muted-foreground é o mínimo legível.
  • Erro escondido em tooltip. Erro tem que estar inline.
  • Botão primário antes do secundário. Salvar é sempre o último (direita).