O campo de e-mail abaixo implementa a decisão B4 (reward early, punish late): nada acontece enquanto você digita pela primeira vez; o erro só aparece quando o foco SAI do campo com conteúdo inválido; a partir daí, cada tecla revalida — e o erro some no instante em que é corrigido (vira sucesso, B6, porque e-mail é campo onde a confirmação carrega informação). O erro SUBSTITUI a ajuda (B2) e contém a instrução completa.
Enviamos a proposta para este endereço.
Erro: E-mail incompleto — inclua o @ e o domínio (ex.: nome@empresa.com.br).
E-mail válido.
Política v0.10 (supersede): sem maxlength — cole além do limite e veja o excesso virar erro em vez de truncar.
Cada estado usa MECANISMO próprio (teste 2 do §1.12): foco = anel (nunca borda engrossada); erro = borda + ícone + mensagem (3 sinais, WCAG 1.4.1); readonly REMOVE a borda e muda o fundo; disabled muda fundo, texto e cursor. Passe o mouse e navegue por Tab para ver hover e foco.
Somente números — a máscara formata sozinha.
Está na sua fatura de energia, no canto superior.
Erro: CPF incompleto — digite os 11 números.
E-mail válido.
Gerado pelo sistema — não editável.
Preferir readonly ou campo habilitado com validação.
Princípios: máscara é apresentação (o canônico viaja limpo: dígitos puros / E.164); tolerante na entrada (cole com ou sem pontuação — funciona); registry aberto (nova máscara não altera o componente). O valor canônico aparece abaixo de cada campo em tempo real, em JetBrains Mono, provando a separação exibição × dado.
Usamos seu documento apenas para emitir a proposta.
canônico: —Preenchemos o endereço automaticamente.
canônico: —Sem DDD — categoria própria, fora do E.164 de assinante.
canônico: —Trocar o país mantém o número digitado (regra Evil Martians).
canônico (E.164): —Em kWh — está na sua fatura de energia.
Guarda-corpo duro: warning é SÓ plausibilidade — dado válido, mas incomum. Nunca marca obrigatoriedade, nunca bloqueia o envio. Mecanismo próprio: ▲ dourado ≠ ⚠ vermelho (distinguíveis também em grayscale, abaixo).
Valor 10× acima da média desta UC — confira antes de salvar.
Erro: Somente números — use ponto para milhar (ex.: 1.250).
Slots sempre no DOM (armadilha Ant); foco no wrapper (focus-within); afixo é aria-hidden e a unidade mora no rótulo; clear devolve o foco ao campo; senha segue WCAG 3.3.8 + NIST (colar SEMPRE livre — teste: cole algo no campo).
Está na sua fatura de energia.
Cole do seu gerenciador — nunca bloqueamos (WCAG 3.3.8 / NIST).
Variante busca-filtro funcionando sobre um dataset de exemplo: digite (ex.: "fazenda", "sítio", "granja" ou algo sem match). A contagem visível é espelhada numa live region role="status" com debounce de 300ms (só a frase, nunca a lista — caso GOV.UK/Léonie Watson). Zero resultados declara, ecoa a query e oferece recuperação de escopo. Esc limpa. O clear nativo do WebKit está suprimido — o nosso (C2) assume.
6 resultados
Nenhum resultado para "" em Clientes.
Zero resultados no site oferece "Fale com a engenharia" — beco sem saída vira lead (D9/Baymard).
No toque, a busca global expande em superfície full-screen ao focar (D7/M3); o chip some — não há Cmd no celular.
Teste o parsing tolerante (E3): no campo de kWh, digite 1.234,56 ou 1234.56 ou cole "R$ 1.234,56" — o canônico normaliza. Na moeda (E6/E7): digite cru, saia do campo (blur) e veja a formatação pt-BR + o canônico em CENTAVOS INTEIROS; digite "2k" e saia para ver o atalho expandir. No stepper (E2/E8): setas ↑↓ funcionam no campo (Shift = passo 2×), botões +/− ficam fora do Tab, e nos limites o botão desabilita sem sumir.
Use vírgula ou ponto para decimais — os dois funcionam.
canônico: —Atalho power-user: "2k" vira 2.000,00 ao sair do campo.
canônico: —Entre 1 e 24 parcelas.
O campo cresce sozinho de 3 até 8 linhas (F1 — arraste o handle se quiser: é complemento, não função exclusiva, WCAG 2.5.7). O contador só aparece aos 75% do limite de 200 (F2 — threshold); cole um texto ENORME: nada é truncado — o excesso vira erro com a contagem ("ultrapassou em N"). O canal falado (região oculta) anuncia só na pausa da digitação (F3).
Essas notas entram no relatório técnico da proposta.
Erro: Você ultrapassou o limite em 0 caracteres.
O trigger é 100% SEED (tokens, 44px, chevron próprio); o PAINEL aberto é do sistema — e isso é proposital: no celular abre o picker do OS, a melhor experiência de toque que existe (G2/Higley). O placeholder "Selecione…" fica na cor de placeholder até você escolher (G3). A régua abaixo governa os 5 componentes da família de escolha (G1).
A concessionária define as regras de compensação.
Pré-selecionamos a modalidade mais comum dos nossos clientes.
Este é só o VISUAL do trigger custom — o componente real é Radix/React e roda nos produtos (Lovable), não neste preview HTML. Os dois selects acima são os funcionais.
Custom só quando a opção exige conteúdo rico (ícone/metadado) — e no toque degrada pro nativo (G2).
Erro:Não foi possível ativar a sincronização. Tente novamente.
Dois consentimentos, dois checkboxes, nenhum pré-marcado (LGPD art. 8).
Se o município não estiver na lista, você pode criá-lo.
Arraste para um valor aproximado ou digite o valor exato (R$).
Por exemplo: 15/03/2026 — pode digitar 1/8/26 que a gente completa.
No produto desktop: input + botão calendário (react-day-picker). Aqui, o nativo do seu dispositivo.
PDF, JPG ou PNG · até 10 MB · usamos sua fatura só para dimensionar o sistema.
Etiqueta de honestidade: o PROGRESSO aqui é simulado (não há servidor neste preview) — a anatomia, os anúncios e o retry são os reais.
Moldura de 360px (Android mais comum no Brasil — pior caso). Dentro dela: coluna única, campos full-width, fonte 16px, alvos com hit-area da altura do campo. Prova complementar: dê zoom de 200% no navegador — os títulos fluidos (tokens v1.2) e os campos devem crescer junto, sem quebra.
Usamos seu documento apenas para emitir a proposta.
↑ botão full-width (§1.4 v0.7): CTA único em toque estica ao container
Os estados continuam distinguíveis sem matiz: erro carrega ícone ⚠ + mensagem + borda; sucesso carrega ✓; readonly é a ausência de borda com fundo rebaixado. Se dependesse só do vermelho/verde, reprovava.
CPF incompleto — digite os 11 números.
Valor 10× acima da média — confira.
E-mail válido.
Alterne o tema para conferir os dois lados da tabela nos próprios campos acima. Piso: 4.5:1 texto · 3:1 não-texto (borda, WCAG 1.4.11).
| Par | Light | Dark | Piso |
|---|---|---|---|
| Rótulo / valor | 13.86:1 | 14.16 / 12.61:1 | 4.5 |
| Texto auxiliar | 6.55:1 | 8.92:1 | 4.5 |
| Placeholder | 4.74:1 | 6.01:1 | 4.5 |
| Texto de erro | 7.18:1 | 8.49:1 | 4.5 |
| Texto de sucesso | 6.32:1 | 9.32:1 | 4.5 |
| Borda default | 4.74:1 | 4.50:1 | 3.0 |
| Borda erro | 5.19:1 | 5.52:1 | 3.0 |
| Texto warning (v0.7) | 6.68:1 | 9.22:1 | 4.5 |
| Borda warning (v0.7) | 4.82:1 | 8.21:1 | 3.0 |
| Borda sucesso | 4.60:1 | 8.31:1 | 3.0 |
| Readonly (texto) | 12.75:1 | 14.16:1 | 4.5 |