Pular para o conteúdo

Formulários

Dois desenhos de campo. No site, só o filete de baixo e o texto grande: tipografia no lugar da caixa. No produto, a caixa, mais densa. Rótulos em forma de pergunta, sempre visíveis, e mensagens de erro em português que aparecem na hora certa.

Campo com filete

O padrão do site e da captação. O filete tem 3:1 com o fundo; no foco, engrossa na cor do anel. O erro pinta o filete e mostra a mensagem com ícone, na cor de perigo do tema.

Texto, seleção e área de texto

.rq-campos · .rq-campo · __rotulo · __controle · __selecao · __ajuda · __erro

Confira o e-mail: falta o domínio.

A máscara entra enquanto você digita.

Quando usar
Formulários do site: contato, captação, vaga. Poucos campos, um por linha.
Acessibilidade
Todo controle tem <label for>. Ajuda e erro entram no aria-describedby; erro também marca aria-invalid. O contador visível não é lido a cada tecla: o leitor de tela ouve quando faltam 20, 10 e 0.
Tokens
--rq-linha-forte (filete), --rq-anel (foco), --rq-perigo (erro), --rq-campo-gap.

Campo em caixa

Para painel, CRM e formulários longos. Mesmo HTML, com .rq-campos--caixa no grupo. Combina com a densidade compacta. Prefixo e sufixo ficam dentro do campo (.rq-campo__grupo).

Caixa, máscaras e prefixo

.rq-campos--caixa · .rq-campos__linha · __grupo · __prefixo · data-mascara
Máscaras
telefone, cpf, cnpj, cpf-cnpj, cep, data e moeda (centavos a partir dos dígitos). O cursor não pula. A validação confere se o valor está completo.
Prefixo
O "R$" é visual (aria-hidden); o rótulo diz o que é o campo.

Escolhas

Checkbox e rádio

.rq-grupo-campos · .rq-escolha · __controle · __texto
Quais frentes interessam?
Qual sua média de faturamento mensal?

Escolha em cartão

.rq-escolha--cartao · __texto small

A opção inteira é a área de toque. Para quiz e para a escolha de serviço, com uma linha de apoio.

Por onde você quer começar?

Interruptor

.rq-interruptor · role="switch" · .rq-escolha--entre

Liga e desliga algo que vale na hora, sem botão de salvar.

Faixa e número

Faixa com valor ao vivo

.rq-faixa · data-rq="faixa" · data-formato

O módulo preenche a trilha até o valor e escreve o valor formatado no <output> e no aria-valuetext. Formatos: moeda, numero, porcentagem, ou data-sufixo.

Número com passo

.rq-numero · data-rq="numero"

Os botões param no mínimo e no máximo. Sem JS, ficam escondidos e o campo nativo continua.

Upload, data e busca

Upload

.rq-upload · __area · __lista · data-rq="upload" · data-max-mb

Arraste ou clique. A lista mostra nome e tamanho, com botão para remover. Tipo e tamanho fora do permitido viram mensagem de erro do campo.

Arquivos de referência (opcional)

    Data com calendário

    .rq-data · .rq-calendario · data-rq="data" · data-min · data-max

    Digitar continua valendo (máscara dd/mm/aaaa). O calendário abre num popover: setas mudam o dia, Page Up e Page Down o mês, Home e End a semana, Enter escolhe, Esc fecha.

    Busca

    .rq-busca · __limpar · data-rq="busca"

    Validação e formulário em etapas

    A validação usa as regras nativas (required, type, minlength, pattern) e as máscaras, com mensagens em português. Nada aparece enquanto a pessoa digita pela primeira vez; ao sair do campo ou ao seguir, sim. A etapa só avança se estiver certa. Experimente avançar com os campos vazios.

    Três etapas

    .rq-form-etapas · data-rq="formulario-etapas validacao"

    Três etapas

    Sobre você

    Sobre a loja

    Por onde você quer começar?

    Sem JavaScript
    As três etapas aparecem uma embaixo da outra e o formulário envia normalmente, com a validação do navegador.
    Foco e leitura
    Ao avançar, o foco vai para o título da etapa e a contagem ("Etapa 2 de 3") é anunciada. Ao errar, o foco vai para o primeiro campo errado.
    Evento
    Formulário válido dispara rq:valido com o FormData. Com data-validacao-envia, segue o envio nativo.