Logo

Login Screen

Pré-requisitos

  • Conhecer input para campos de e-mail e senha.
  • Definir rotas de suporte como recuperação de senha ou cadastro.
  • Configurar ações de navegação (@[Entrar], @ghost[Esqueci]) para conduzir o fluxo.

Passo a passo

  1. Estruture a tela com container e card para delimitar o formulário.
  2. Adicione campos obrigatórios (___email, ___password) com placeholders claros e validações.
  3. Crie links auxiliares para recuperação e criação de conta.
  4. Configure o botão principal para redirecionar ao dashboard ou próxima etapa segura.

Tela de login completa

Proto-Typed
Loading DSL editor...

Por quê: organiza credenciais, links auxiliares e fluxos de suporte em uma única experiência.

Depuração rápida

  • Botão principal não navega → confirme o slug Dashboard no destino.
  • Placeholder ausente → garanta {placeholder} em todos os inputs.
  • Validação mínima ignorada → inclua required ou atributos como minlength="8".
  • Link de recuperação não retorna → ajuste @ghost[Cancelar](Login) para voltar à tela de login.
  • Checkbox desalinhado → coloque [X] dentro do mesmo stack dos inputs.

Próximos passos

  • Revise Input para cobrir campos adicionais (2FA, selects).
  • Explore Modal Flow se precisar autenticação em múltiplas etapas.
  • Consulte Button para definir variantes coerentes nas ações.
  • Avalie Themes para aplicar branding à tela de login.