LoginForm
O formulário de login completo do ME — e-mail/senha, idioma, lembrar, reCAPTCHA e links de rodapé.
MeLoginForm. Entra montado o fluxo de entrada (campos + validação + locale + reCAPTCHA + rodapé). Não recrie o login à mão.O LoginForm é a tela de entrada do produto, pronta: campos de e-mail e senha com validação, seletor de idioma opcional, "lembrar-me" + "esqueci a senha" na mesma linha, um espaço para o reCAPTCHA e o rodapé com cadastro/ajuda. Combina com o block Login (layout dividido imagem + formulário).
Quando usar
- Na tela de autenticação — não monte campos de login soltos em outra estrutura.
- Quando o acesso é multilíngue, ligue o seletor de idioma (ver i18n abaixo).
Configuração
| Prop | Papel |
|---|---|
title · description | Cabeçalho do formulário (ou use os slots de mesmo nome). |
show-locale-select · locales · locale-placeholder | Seletor de idioma (oculto por padrão; popule locales). |
remember-me-label | Rótulo do "lembrar-me". |
forgot-password-label · forgot-password-href | Link de recuperação de senha. |
sign-up-href · help-href | Links do rodapé (cadastro · ajuda). |
show-recaptcha-placeholder | Mostra o placeholder quando não há reCAPTCHA via slot. |
loading | Desabilita o formulário e indica carregamento no botão. |
Slots: title, description, recaptcha (injeta o widget real), footer, signup-text, help-text. Eventos: submit ({ email, password, rememberMe? }), forgotPassword, signUp, help.
Idioma e i18n
O seletor de idioma alimenta a estratégia multilíngue do ME — ver Voz e conteúdo › Idioma e i18n. Os rótulos são chaves de i18n, não strings cravadas.
No código
MeLoginForm (componente EletroDS) — API e preview ao vivo em eletro.design/components/loginform.
Acessibilidade
- Cada campo tem rótulo associado e erro por validação inline; o foco vai para o primeiro campo inválido no
submit. - O reCAPTCHA recebe nome acessível; o estado
loadingé anunciado no botão. - Contraste e foco visível seguem Foundations › Acessibilidade.