UXEm Breve

Formulários & Campos

Formulários normalmente são a fonte de informação de um site convencional. É por meio deles que um usuário faz um cadastro, login, preenche seus dados, concluí um endereço, fecha um pedido de compras em um e-commerce e por ai vai. Um bom formulário precisa ser fácil de ser preenchido pelo usuário. Cada detalhe de UX importa. Esta demo vai demonstrar um pouco do que precisa ter em um bom formulário, modelos de formulários diferentes, tipos de campos e quando devemos utilizá-los, padrões de design, máscaras, validações, textos de ajuda, acessibilidade, progresso que sobrevive a um F5, uploads de arquivo, um editor de texto etc.

Formulário React Hook Form Zod Arrastar e Soltar Editor de Texto Máscaras

Tecnologias

  • React Hook Form
  • Zod
  • TipTap
  • Dnd-kit
  • React-dropzone
  • Imask

Arquitetura

  • Formulários orientados a schema com React Hook Form + Zod
  • Upload de arquivos
  • Form builder que interpreta JSON em tempo real para gerar campos

Conceitos

  • Validação orientada a schema
  • Upload de arquivos com progresso e cancelamento
  • Drag & drop com persistência
  • Serialização e persistência de estado

Área de demonstração

A demonstração interativa deste recurso estará disponível em breve.

Em Breve

A demonstração interativa de Formulários & Campos está em desenvolvimento. A arquitetura e os detalhes técnicos já estão documentados acima.

Seguir no GitHub
Novas demos são adicionadas regularmente