SW Core
SW Core / JavaScript / Campo de formulário

Campo de formulário JavaScript

Todo campo de formulário do SW Core: caixa de texto, lista de opções, caixa de marcar, bolinha, interruptor, régua, envio de arquivo e a montagem do formulário — tudo com a mesma lógica.

O que é

É a base de qualquer formulário do site: contato, cadastro, login, orçamento, busca, filtros do painel. A lógica é sempre a mesma: <div sw-fld> é a caixa do campo (junta o rótulo, o campo e a mensagem de ajuda ou de erro, um embaixo do outro) e sw-inp vai no próprio <input>, <select> ou <textarea>. Os outros tipos têm atributo próprio, sempre na tag <label> que envolve o input: sw-chk (caixa de marcar), sw-rdo (bolinha de escolha), sw-swt (interruptor liga/desliga), sw-rng (régua de arrastar) e sw-fle (área de soltar arquivo). Para mudar o jeito, escreva palavras dentro do atributo: sw-inp="g soft", sw-fld="float", sw-chk="suc card".

É só CSS: aparência, foco, rótulo que flutua, estados de erro e sucesso. Tudo segue o tema claro e o escuro. Os estados (erro, sucesso, atenção) são classes que você coloca — ou que a validação coloca sozinha: Validação de formulário (sw-valid) confere o formulário inteiro no envio e Validação inline (sw-matinp) confere campo por campo. Para formatar enquanto digita (CPF, telefone), veja Máscara.

Quando usar

  • Qualquer campo de texto (nome, e-mail, telefone): <div sw-fld> com <label> + <input sw-inp>.
  • Formulário curto e elegante (contato, login): rótulo que flutua — sw-fld="float".
  • Aceitar termos, escolher vários itens: caixa de marcar — <label sw-chk>.
  • Escolher uma opção entre poucas (forma de pagamento): bolinha — <label sw-rdo>; em cartões grandes — sw-rdo="card".
  • Ligar/desligar uma preferência (receber avisos): interruptor — <label sw-swt>.
  • Formulário grande (cadastro, painel): monte com sw-frm, linhas sw-frm-row e blocos sw-frm-set.

Comece aqui

  1. 1

    Coloque o SW Core no <head> da página (uma vez só). Os campos são só CSS. O segundo arquivo traz os ícones swi-* (lupa, cadeado…), se for usar.

    <link rel="stylesheet" href="swcore/swcore.min.css">
    <link rel="stylesheet" href="swcore/swcore.compl.min.css">
  2. 2

    Escreva a caixa do campo com o rótulo e o input. O for do rótulo é igual ao id do input (clicar no rótulo leva ao campo).

    <div sw-fld>
      <label for="nome">Seu nome</label>
      <input sw-inp id="nome" name="nome" placeholder="Ex.: Maria Souza">
    </div>
  3. 3

    Quer o rótulo dentro do campo, subindo quando a pessoa digita? Use sw-fld="float", ponha o <label> depois do input e escreva placeholder=" " (com um espaço).

    <div sw-fld="float">
      <input sw-inp id="email" name="email" type="email" placeholder=" ">
      <label for="email">Seu e-mail</label>
    </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Jeitos de montar o campo (sw-fld)

A caixa sw-fld organiza rótulo, campo e textos de apoio. Escolha como o rótulo aparece.

Padrão — rótulo em cima <div sw-fld> <label for="fld-a1">Nome completo</label> <input sw-inp id="fld-a1" placeholder="Maria Souza"> </div>
Só para emitir a nota fiscal.
Com texto de ajuda (sw-fld-hint) <div sw-fld> <label for="fld-a2">CPF</label> <input sw-inp id="fld-a2" placeholder="000.000.000-00"> <span class="sw-fld-hint">Só para emitir a nota fiscal.</span> </div>
Obrigatório — asterisco (is-req no rótulo) <div sw-fld> <label class="is-req" for="fld-a3">E-mail</label> <input sw-inp id="fld-a3" type="email" placeholder="voce@email.com"> </div>
float — rótulo flutuante <div sw-fld="float"><input sw-inp id="fld-a4" placeholder=" "><label for="fld-a4">Cidade</label></div>
float under — flutuante com sublinhado <div sw-fld="float under"><input sw-inp id="fld-a5" placeholder=" "><label for="fld-a5">Cidade</label></div>
row — rótulo ao lado <div sw-fld="row"><label for="fld-a6">CEP</label><input sw-inp id="fld-a6" placeholder="00000-000"></div>

2. Tipos de campo (sw-inp)

sw-inp funciona em <input> de qualquer tipo, em <select> e em <textarea>. O tipo do navegador (type="email", type="date"…) continua valendo: no celular ele abre o teclado certo.

Texto <div sw-fld> <label for="fld-b1">Nome</label> <input sw-inp id="fld-b1" type="text" placeholder="Maria Souza"> </div>
E-mail <div sw-fld> <label for="fld-b2">E-mail</label> <input sw-inp id="fld-b2" type="email" placeholder="voce@email.com"> </div>
Senha <div sw-fld> <label for="fld-b3">Senha</label> <input sw-inp id="fld-b3" type="password" value="segredo123"> </div>
Número <div sw-fld> <label for="fld-b4">Quantidade</label> <input sw-inp id="fld-b4" type="number" value="2" min="1"> </div>
Data <div sw-fld><label for="fld-b5">Data da visita</label><input sw-inp id="fld-b5" type="date"></div>
Lista (select) <div sw-fld> <label for="fld-b6">Estado</label> <select sw-inp id="fld-b6"> <option value="">Selecione…</option> <option>Pernambuco</option> <option>Bahia</option> </select> </div>
Lista com vários (select multiple) <div sw-fld> <label for="fld-b7">Interesses</label> <select sw-inp id="fld-b7" multiple> <option selected>Sites</option> <option>Lojas</option> <option selected>Sistemas</option> </select> </div>
Texto longo (textarea) <div sw-fld> <label for="fld-b8">Mensagem</label> <textarea sw-inp id="fld-b8" placeholder="Conte o que precisa…"></textarea> </div>
search — busca (lupa + cápsula) <input sw-inp="search" type="search" placeholder="Buscar produtos…" aria-label="Buscar">
color — escolher cor <div sw-fld> <label for="fld-b10">Cor da marca</label> <input sw-inp="color" id="fld-b10" type="color" value="#2563eb"> </div>

3. Superfícies (o "jeito" da caixa)

Sem palavra: borda fina e fundo da página. As outras mudam o peso visual do campo.

Padrão — com borda <input sw-inp placeholder="Padrão" aria-label="Exemplo">
soft — relevo suave <input sw-inp="soft" placeholder="Soft" aria-label="Exemplo">
fill — fundo cheio, sem borda <input sw-inp="fill" placeholder="Fill" aria-label="Exemplo">
min — só a linha de baixo <input sw-inp="min" placeholder="Min" aria-label="Exemplo">

4. Vidro (glass)

Campo de vidro fosco com texto branco: feito para ficar sobre foto ou vídeo escuro (busca num banner, cadastro de newsletter sobre imagem). O fundo colorido destes quadros representa a sua foto.

glass <input sw-inp="glass" placeholder="Seu melhor e-mail" aria-label="E-mail">
glass + search <input sw-inp="glass search" type="search" placeholder="Buscar imóveis…" aria-label="Buscar">

5. Tamanhos

Sem palavra de tamanho, o médio. Vale para input, select e textarea. No textarea, fix tira a alça de redimensionar e free deixa redimensionar para os lados também.

p — pequeno <input sw-inp="p" placeholder="Pequeno" aria-label="Exemplo">
Padrão — médio <input sw-inp placeholder="Médio" aria-label="Exemplo">
g — grande <input sw-inp="g" placeholder="Grande" aria-label="Exemplo">
textarea p <textarea sw-inp="p" placeholder="Textarea pequeno" aria-label="Exemplo"></textarea>
textarea fix — sem alça <textarea sw-inp="fix" placeholder="Não redimensiona" aria-label="Exemplo"></textarea>
textarea free — alça livre <textarea sw-inp="free" placeholder="Redimensiona para todos os lados" aria-label="Exemplo"></textarea>

6. Estados

Erro, sucesso e atenção são classes (is-err, is-ok, is-ale) na caixa sw-fld ou no próprio campo. A mensagem vai num <span class="sw-fld-msg"> (erro, com ⚠) ou <span class="sw-fld-ok"> (sucesso, com ✓), que aparece embaixo, à direita. Desativado e somente leitura são atributos normais do HTML.

E-mail incompleto
is-err — erro + mensagem <div sw-fld class="is-err"> <label for="fld-e1">E-mail</label> <input sw-inp id="fld-e1" type="email" value="maria@"> <span class="sw-fld-msg">E-mail incompleto</span> </div>
Disponível
is-ok — sucesso + mensagem <div sw-fld class="is-ok"> <label for="fld-e2">Usuário</label> <input sw-inp id="fld-e2" value="mariasouza"> <span class="sw-fld-ok">Disponível</span> </div>
Senha fraca: use letras e números.
is-ale — atenção <div sw-fld class="is-ale"> <label for="fld-e3">Senha</label> <input sw-inp id="fld-e3" type="password" value="123456"> <span class="sw-fld-hint">Senha fraca: use letras e números.</span> </div>
Número incompleto
float + is-err — rótulo também fica vermelho <div sw-fld="float" class="is-err"> <input sw-inp id="fld-e4" placeholder=" " value="(81) 9999"> <label for="fld-e4">Celular</label> <span class="sw-fld-msg">Número incompleto</span> </div>
disabled — desativado <div sw-fld><label for="fld-e5">Plano</label><input sw-inp id="fld-e5" value="Básico" disabled></div>
readonly — só leitura (borda tracejada) <div sw-fld> <label for="fld-e6">Código do pedido</label> <input sw-inp id="fld-e6" value="#1042" readonly> </div>
is-ldg — carregando (girando) <div sw-fld><label for="fld-e7">CEP</label><input sw-inp id="fld-e7" class="is-ldg" value="50030-000"></div>
35/40
sw-fld-cnt — contador de letras <div sw-fld> <label for="fld-e8">Título do anúncio</label> <input sw-inp id="fld-e8" value="Apartamento 2 quartos em Boa Viagem"> <span class="sw-fld-cnt is-ale">35/40</span> </div>

7. Grupos: prefixo, sufixo e ícone (sw-grp)

Coloque o campo dentro de <div sw-grp> para colar um pedaço fixo antes ou depois (<span sw-adn>) ou um ícone dentro (sw-ico-l à esquerda, sw-ico-r à direita).

R$
Prefixo (R$) <div sw-fld> <label for="fld-g1">Preço</label> <div sw-grp> <span sw-adn>R$</span> <input sw-inp id="fld-g1" value="199,90"> </div> </div>
@empresa.com.br
Sufixo (@empresa) <div sw-fld> <label for="fld-g2">E-mail corporativo</label> <div sw-grp> <input sw-inp id="fld-g2" value="maria"> <span sw-adn>@empresa.com.br</span> </div> </div>
Botão colado (sw-adn="btn") <div sw-fld> <label for="fld-g3">Cupom</label> <div sw-grp> <input sw-inp id="fld-g3" placeholder="PROMO10"> <button sw-adn="btn" type="button">Aplicar</button> </div> </div>
Ícone à esquerda (sw-ico-l) <div sw-fld> <label for="fld-g4">Buscar</label> <div sw-grp> <i class="sw-ico-l swi-search"></i> <input sw-inp id="fld-g4" placeholder="Nome do produto"> </div> </div>
Ícone clicável à direita (sw-ico-r is-btn) <div sw-fld> <label for="fld-g5">Senha</label> <div sw-grp> <input sw-inp id="fld-g5" type="password" value="segredo123"> <i class="sw-ico-r is-btn swi-show" role="button" aria-label="Mostrar senha" onclick="var i=document.getElementById('fld-g5');i.type=i.type==='password'?'text':'password';"></i> </div> </div>
Número com − e + (sw-grp="num") <div sw-fld> <label for="fld-g6">Quantidade</label> <div sw-grp="num"> <button class="sw-num-btn" type="button">−</button> <input sw-inp id="fld-g6" type="number" value="1" min="1"> <button class="sw-num-btn" type="button">+</button> </div> </div>

8. Caixa de marcar (sw-chk)

O atributo vai no <label> que envolve o <input type="checkbox"> e o texto. Cor: suc, err, ale (sem palavra: cor primária). Várias juntas: <div class="sw-chk-grp">.

Padrão <label sw-chk><input type="checkbox"> Quero receber novidades</label>
Marcado (checked) <label sw-chk><input type="checkbox" checked> Aceito os termos de uso</label>
suc — verde <label sw-chk="suc"><input type="checkbox" checked> Tarefa concluída</label>
err — vermelho <label sw-chk="err"><input type="checkbox" checked> Excluir também os anexos</label>
ale — amarelo <label sw-chk="ale"><input type="checkbox" checked> Marcar como urgente</label>
Meio marcado (indeterminado) <label sw-chk><input type="checkbox" id="todos"> Selecionar todos</label> <script>document.getElementById('todos').indeterminate = true;</script>
disabled — desativado <label sw-chk><input type="checkbox" disabled> Opção indisponível</label>
card — em cartão <label sw-chk="card"><input type="checkbox" checked> Embalar para presente (+ R$ 9,90)</label>
clean — só o texto muda de cor <label sw-chk="clean"><input type="checkbox" checked> Frete grátis</label>
Grupo em pé (sw-chk-grp) <div class="sw-chk-grp"> <label sw-chk><input type="checkbox" checked> Sites</label> <label sw-chk><input type="checkbox"> Lojas</label> <label sw-chk><input type="checkbox"> Sistemas</label> </div>
Grupo deitado (sw-chk-grp is-row) <div class="sw-chk-grp is-row"> <label sw-chk><input type="checkbox" checked> P</label> <label sw-chk><input type="checkbox"> M</label> <label sw-chk><input type="checkbox"> G</label> </div>
Obrigatório para continuar
Erro (is-err no sw-fld) <div sw-fld class="is-err"> <label sw-chk> <input type="checkbox"> Li e aceito os termos </label> <span class="sw-fld-msg">Obrigatório para continuar</span> </div>

9. Bolinha de escolha (sw-rdo)

Igual à caixa de marcar, com <input type="radio">. Todas do mesmo grupo têm o mesmo name — só uma fica marcada.

Grupo em pé (sw-rdo-grp) <div class="sw-rdo-grp"> <label sw-rdo><input type="radio" name="pagamento" checked> Pix</label> <label sw-rdo><input type="radio" name="pagamento"> Cartão de crédito</label> <label sw-rdo><input type="radio" name="pagamento"> Boleto</label> </div>
Grupo deitado (is-row) <div class="sw-rdo-grp is-row"> <label sw-rdo><input type="radio" name="resposta" checked> Sim</label> <label sw-rdo><input type="radio" name="resposta"> Não</label> </div>
Cores: suc / err / ale <label sw-rdo="suc"><input type="radio" name="status" checked> Aprovado</label> <label sw-rdo="ale"><input type="radio" name="status"> Em análise</label> <label sw-rdo="err"><input type="radio" name="status"> Recusado</label>
card — escolha em cartões <div class="sw-rdo-grp"> <label sw-rdo="card"><input type="radio" name="entrega" checked> Entrega normal — grátis</label> <label sw-rdo="card"><input type="radio" name="entrega"> Entrega expressa — R$ 19,90</label> </div>
clean — só o texto <div class="sw-rdo-grp is-row"> <label sw-rdo="clean"><input type="radio" name="ordem" checked> Mais vendidos</label> <label sw-rdo="clean"><input type="radio" name="ordem"> Menor preço</label> </div>
disabled — opção desativada <label sw-rdo><input type="radio" name="recebimento" checked> Retirar na loja</label> <label sw-rdo><input type="radio" name="recebimento" disabled> Entrega (indisponível)</label>

10. Interruptor liga/desliga (sw-swt)

Um <input type="checkbox"> dentro de <label sw-swt>. Tamanho: p ou g. Cor quando ligado: suc, err, ale (sem palavra: primária).

Padrão — desligado <label sw-swt><input type="checkbox"> Modo escuro</label>
Ligado (checked) <label sw-swt><input type="checkbox" checked> Receber avisos</label>
p — pequeno <label sw-swt="p"><input type="checkbox" checked> Compacto</label>
g — grande <label sw-swt="g"><input type="checkbox" checked> Loja aberta</label>
suc — verde <label sw-swt="suc"><input type="checkbox" checked> Site no ar</label>
err — vermelho <label sw-swt="err"><input type="checkbox" checked> Bloquear acesso</label>
ale — amarelo <label sw-swt="ale"><input type="checkbox" checked> Modo manutenção</label>
disabled — travado <label sw-swt><input type="checkbox" checked disabled> Backup diário (plano Pro)</label>

11. Régua de arrastar (sw-rng)

<input type="range" sw-rng>. A parte pintada do trilho acompanha a bolinha sozinha (respeita min/max), já ao abrir a página e ao arrastar. Cor: suc, err, ale; mais grossa: g.

Padrão <input type="range" sw-rng value="50" aria-label="Volume">
g — grossa <input type="range" sw-rng="g" value="50" aria-label="Volume">
suc — verde <input type="range" sw-rng="suc" value="50" aria-label="Meta">
err — vermelha <input type="range" sw-rng="err" value="50" aria-label="Limite">
ale — amarela <input type="range" sw-rng="ale" value="50" aria-label="Alerta">
50%
Com o valor ao lado (sw-rng-row + sw-rng-val) <div class="sw-rng-row"> <input type="range" sw-rng value="50" aria-label="Desconto" oninput="this.nextElementSibling.textContent=this.value+'%'"> <span class="sw-rng-val">50%</span> </div>

12. Enviar arquivo (sw-fle)

Área de soltar arquivo feita só com CSS: o <input type="file"> fica invisível por cima da área inteira, então clicar ou arrastar em qualquer ponto funciona. Para prévia de imagem e limite de tamanho, use o componente Upload.

Padrão — área grande <label sw-fle> <input type="file"> <i class="sw-fle-ico swi-cloud-upload"></i> <span class="sw-fle-ttl">Arraste o arquivo aqui</span> <span class="sw-fle-sub">ou clique · PDF até 5 MB</span> <span class="sw-fle-btn">Escolher arquivo</span> </label>
p — compacta, em uma linha <label sw-fle="p"> <input type="file"> <i class="sw-fle-ico swi-cloud-upload"></i> <span> <span class="sw-fle-ttl">Anexar currículo</span><br> <span class="sw-fle-sub">PDF ou DOC</span> </span> </label>
is-act — arquivo já escolhido <label sw-fle="p" class="is-act"> <input type="file"> <i class="sw-fle-ico swi-check-circle"></i> <span class="sw-fle-ttl">curriculo.pdf</span> </label>

13. Montando o formulário (sw-frm)

<form sw-frm> empilha os campos com espaço certo. sw-frm-row põe campos lado a lado (2 iguais por padrão; 1-2, 2-1, 3, 4) e vira 1 coluna abaixo de 768 px. sw-frm-set agrupa num bloco com título. sw-frm-act é a barra dos botões (à direita; ctr no centro, lft à esquerda).

Dados pessoais
endereço
Cadastro com bloco, linhas e barra de botões
<form sw-frm>
  <fieldset sw-frm-set>
    <legend>Dados pessoais</legend>
    <div sw-frm-row>
      <div sw-fld><label for="nome">Nome</label><input sw-inp id="nome"></div>
      <div sw-fld><label for="sobrenome">Sobrenome</label><input sw-inp id="sobrenome"></div>
    </div>
    <div sw-frm-row="2-1">
      <div sw-fld><label for="email">E-mail</label><input sw-inp id="email" type="email"></div>
      <div sw-fld><label for="nasc">Nascimento</label><input sw-inp id="nasc" type="date"></div>
    </div>
  </fieldset>

  <div class="sw-frm-div">endereço</div>

  <div sw-frm-row="3">
    <div sw-fld><label for="cep">CEP</label><input sw-inp id="cep"></div>
    <div sw-fld><label for="cidade">Cidade</label><input sw-inp id="cidade"></div>
    <div sw-fld><label for="uf">UF</label><input sw-inp id="uf"></div>
  </div>

  <label sw-swt><input type="checkbox" checked> Receber ofertas por e-mail</label>

  <div sw-frm-act>
    <button sw-btn="ghost sec" type="reset">Limpar</button>
    <button sw-btn="pri" type="submit">Criar conta</button>
  </div>
</form>
Linhas: 1-2, 4 e barra de botões no centro (ctr)
<form sw-frm>
  <div sw-frm-row="1-2">
    <div sw-fld><label for="ddd">DDD</label><input sw-inp id="ddd"></div>
    <div sw-fld><label for="tel">Telefone</label><input sw-inp id="tel"></div>
  </div>
  <div sw-frm-row="4">
    <div sw-fld><label for="adultos">Adultos</label><input sw-inp id="adultos" type="number" value="2"></div>
    <div sw-fld><label for="criancas">Crianças</label><input sw-inp id="criancas" type="number" value="0"></div>
    <div sw-fld><label for="entrada">Entrada</label><input sw-inp id="entrada" type="date"></div>
    <div sw-fld><label for="saida">Saída</label><input sw-inp id="saida" type="date"></div>
  </div>
  <div sw-frm-act="ctr"><button sw-btn="pri" type="submit">Ver disponibilidade</button></div>
</form>

Tabela de opções

PalavraO que fazExemplo
Caixa do campo — sw-fld
sw-fldRótulo em cima, campo embaixo, ajuda/erro no fim.<div sw-fld>
floatRótulo dentro do campo que sobe ao digitar. O <label> vem DEPOIS do input e o input precisa de placeholder=" ".<div sw-fld="float">
underJunto de float: sem contorno, só uma linha embaixo que acende no foco.<div sw-fld="float under">
rowRótulo ao lado do campo (vira em cima abaixo de 560 px). Para alinhar vários rótulos numa coluna, defina --fm-row-lbl no CSS.<div sw-fld="row">
Textos de apoio (classes dentro do sw-fld)
is-reqNo <label>: mostra o asterisco vermelho de obrigatório.<label class="is-req">
sw-fld-hintTexto de ajuda, cinza, embaixo do campo.<span class="sw-fld-hint">…</span>
sw-fld-msgMensagem de erro (vermelha, com ⚠), embaixo à direita. Vazia, não aparece.<span class="sw-fld-msg">…</span>
sw-fld-okMensagem de sucesso (verde, com ✓).<span class="sw-fld-ok">…</span>
sw-fld-cntContador de letras que você escreve (ex.: 35/40); is-ale amarelo, is-err vermelho. Para contar sozinho, use Contador.<span class="sw-fld-cnt is-ale">35/40</span>
Campo — sw-inp (em input, select e textarea)
(nenhum)Borda fina, fundo da página.<input sw-inp>
softRelevo suave, sem borda marcada.sw-inp="soft"
fillFundo cheio, sem borda.sw-inp="fill"
minSó a linha de baixo.sw-inp="min"
glassVidro fosco com texto branco — sobre foto escura.sw-inp="glass"
pPequeno.sw-inp="p"
gGrande.sw-inp="g"
searchBusca: cápsula com lupa à esquerda.<input sw-inp="search" type="search">
colorEscolher cor (use com type="color").<input sw-inp="color" type="color">
fixSó textarea: sem alça de redimensionar.<textarea sw-inp="fix">
freeSó textarea: redimensiona em todas as direções.<textarea sw-inp="free">
Estados (classe no sw-fld ou no próprio campo)
is-errErro: borda e fundo vermelhos (no float, o rótulo também).<div sw-fld class="is-err">
is-okSucesso: borda e fundo verdes.<div sw-fld class="is-ok">
is-aleAtenção: borda amarela.<div sw-fld class="is-ale">
is-ldgNo campo: carregando (ícone girando à direita, não aceita clique).<input sw-inp class="is-ldg">
disabledAtributo do HTML: apagado e bloqueado.<input sw-inp disabled>
readonlyAtributo do HTML: só leitura, borda tracejada.<input sw-inp readonly>
Grupo — sw-grp
sw-grpCola peças ao campo, numa linha só.<div sw-grp>…</div>
sw-adnPedaço fixo antes ou depois do campo (R$, kg, @dominio).<span sw-adn>R$</span>
sw-adn="btn"O pedaço vira botão na cor primária.<button sw-adn="btn">Aplicar</button>
sw-ico-lÍcone dentro do campo, à esquerda (classe no <i>).<i class="sw-ico-l swi-search"></i>
sw-ico-rÍcone dentro do campo, à direita. Com is-btn ele aceita clique.<i class="sw-ico-r is-btn swi-show"></i>
sw-grp="num"Número centralizado com botões − e + (class="sw-num-btn") dos lados. O botão antes do input diminui, o depois aumenta — respeitando min, max e step, e disparando input e change. Botão com onclick próprio é deixado em paz.<div sw-grp="num">…</div>
Caixa de marcar — sw-chk / bolinha — sw-rdo (no label)
(nenhum)Cor primária ao marcar.<label sw-chk><input type="checkbox"> Texto</label>
suc / err / aleVerde / vermelho / amarelo ao marcar.<label sw-chk="suc">
cardVira um cartão com borda; o cartão marcado fica destacado.<label sw-rdo="card">
cleanEsconde a caixinha: só o texto fica na cor primária ao marcar.<label sw-chk="clean">
sw-chk-grp / sw-rdo-grpClasse da caixa que junta várias opções, uma embaixo da outra.<div class="sw-rdo-grp">
is-rowJunto do grupo: opções lado a lado.<div class="sw-chk-grp is-row">
Interruptor — sw-swt (no label)
(nenhum)Médio, cor primária quando ligado.<label sw-swt><input type="checkbox"> Texto</label>
p / gPequeno / grande.<label sw-swt="g">
suc / err / aleCor quando ligado.<label sw-swt="suc">
Régua — sw-rng (no input type="range")
(nenhum)Trilho fino, cor primária.<input type="range" sw-rng>
gTrilho e bolinha maiores.sw-rng="g"
suc / err / aleCor da parte pintada e da bolinha.sw-rng="suc"
--_pctQuanto do trilho fica pintado. O SW Core calcula sozinho a partir do valor (e do min/max). Mudou o valor pelo código? Chame SW.Fld.sync(regua) (ou SW.reinit()).regua.value = 70; SW.Fld.sync(regua);
sw-rng-row / sw-rng-valClasses: régua e valor lado a lado.<div class="sw-rng-row">…<span class="sw-rng-val">50%</span></div>
Arquivo — sw-fle (no label)
(nenhum)Área grande tracejada, conteúdo centralizado.<label sw-fle><input type="file">…</label>
pCompacta, numa linha (esconde o sw-fle-btn).<label sw-fle="p">
is-over / is-actClasses: arrastando por cima / arquivo escolhido (o seu código coloca).<label sw-fle class="is-act">
sw-fle-ico · sw-fle-ttl · sw-fle-sub · sw-fle-btnPeças: ícone, título, texto menor e "botão" desenhado.<span class="sw-fle-ttl">…</span>
Formulário — sw-frm
sw-frmNo <form>: empilha tudo com espaço de 16 px.<form sw-frm>
sw-frm-rowLinha com 2 colunas iguais. Vira 1 coluna abaixo de 768 px.<div sw-frm-row>
1-2 · 2-1 · 3 · 4Proporções da linha: 1/3+2/3, 2/3+1/3, 3 iguais, 4 iguais.<div sw-frm-row="2-1">
sw-frm-setNo <fieldset>: bloco com fundo e borda; o <legend> é o título.<fieldset sw-frm-set><legend>…</legend>
sw-frm-divClasse: divisória com texto no meio, entre partes do formulário.<div class="sw-frm-div">endereço</div>
sw-frm-actBarra dos botões, com linha em cima. À direita por padrão.<div sw-frm-act>
ctr / lftBotões no centro / à esquerda.<div sw-frm-act="ctr">

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Formulário de contato (rótulo flutuante) Ao vivo
<form sw-frm action="/contato" method="post">
  <div sw-frm-row>
    <div sw-fld="float">
      <input sw-inp id="nome" name="nome" placeholder=" ">
      <label for="nome">Seu nome</label>
    </div>
    <div sw-fld="float">
      <input sw-inp id="tel" name="tel" type="tel" placeholder=" ">
      <label for="tel">WhatsApp</label>
    </div>
  </div>
  <div sw-fld="float">
    <input sw-inp id="email" name="email" type="email" placeholder=" ">
    <label for="email">E-mail</label>
  </div>
  <div sw-fld="float">
    <textarea sw-inp id="msg" name="msg" placeholder=" "></textarea>
    <label for="msg">Como podemos ajudar?</label>
  </div>
  <div sw-frm-act>
    <button sw-btn="pri" type="submit">Enviar mensagem <i class="swi-send"></i></button>
  </div>
</form>
Tela de login Ao vivo
<form sw-frm action="/entrar" method="post">
  <div sw-fld>
    <label for="email">E-mail</label>
    <div sw-grp>
      <i class="sw-ico-l swi-envelope"></i>
      <input sw-inp id="email" name="email" type="email" placeholder="voce@email.com">
    </div>
  </div>
  <div sw-fld>
    <label for="senha">Senha</label>
    <div sw-grp>
      <i class="sw-ico-l swi-lock"></i>
      <input sw-inp id="senha" name="senha" type="password">
    </div>
  </div>
  <label sw-chk><input type="checkbox" name="lembrar" checked> Continuar conectado</label>
  <button sw-btn="pri" type="submit">Entrar</button>
</form>
Preferências do painel com interruptores Ao vivo
Notificações
<fieldset sw-frm-set>
  <legend>Notificações</legend>
  <label sw-swt><input type="checkbox" name="n_email" checked> Novo pedido (e-mail)</label>
  <label sw-swt><input type="checkbox" name="n_whats" checked> Novo pedido (WhatsApp)</label>
  <label sw-swt="err"><input type="checkbox" name="pausar"> Pausar todas as notificações</label>
</fieldset>
Filtro de preço com régua (valor que acompanha) Ao vivo
R$ 500
<div sw-fld>
  <label for="preco">Preço máximo</label>
  <div class="sw-rng-row">
    <input type="range" sw-rng id="preco" name="preco" min="0" max="1000" step="50" value="500">
    <span class="sw-rng-val" id="preco-val">R$ 500</span>
  </div>
</div>

<script>
  const regua = document.getElementById('preco');
  const valor = document.getElementById('preco-val');
  // o trilho já se pinta sozinho; aqui só mostramos o valor
  regua.addEventListener('input', () => {
    valor.textContent = 'R$ ' + regua.value;
  });
</script>
Escolha de entrega em cartões (checkout) Ao vivo
<div sw-fld>
  <label>Como quer receber?</label>
  <div class="sw-rdo-grp">
    <label sw-rdo="card"><input type="radio" name="entrega" value="loja" checked> Retirar na loja — grátis</label>
    <label sw-rdo="card"><input type="radio" name="entrega" value="normal"> Entrega normal (5 dias) — R$ 15,00</label>
    <label sw-rdo="card"><input type="radio" name="entrega" value="expressa"> Entrega expressa (1 dia) — R$ 29,90</label>
  </div>
</div>

API (JavaScript)

SW.Fld.sync(regua)
Repinta o trilho da régua depois de mudar o valor pelo código. Aceita o elemento ou um seletor ("#preco").

Precisa de quê

  • swcore.min.css — todos os campos.
  • swcore.compl.min.css — só se usar ícones swi-* (lupa, cadeado, nuvem do upload).
  • swcore.min.js — só para a régua (sw-rng) se pintar sozinha e para os botões − e + do sw-grp="num". Sem ele, o resto funciona igual.
  • Para conferir e mostrar erros sozinho, some swcore.min.js e use sw-valid ou sw-matinp.

Cuidados — erros comuns

  • No sw-fld="float" a ordem importa: primeiro o input, depois o <label>. E o input precisa de placeholder=" " (um espaço) — sem ele o rótulo fica em cima do texto digitado.
  • sw-chk, sw-rdo, sw-swt e sw-fle vão no <label> que envolve o input, não no input. O sw-rng é a exceção: vai no próprio <input type="range">.
  • Radios do mesmo grupo precisam do mesmo name, senão dá para marcar todos.
  • A mensagem de erro (sw-fld-msg) fica embaixo do campo sem empurrar nada. Se os campos estiverem colados, ela encosta no próximo — use sw-frm, que já dá o espaço.
  • Na régua (sw-rng), se você mudar o valor pelo código (regua.value = 70), chame SW.Fld.sync(regua) para a pintura acompanhar.
  • Os botões − e + do sw-grp="num" já funcionam sozinhos. Se você já tinha colocado onclick com stepDown()/stepUp(), pode tirar (ou deixar: botão com onclick é ignorado pelo SW Core, não anda 2 passos).
  • glass tem texto branco: em fundo claro, fica ilegível. Use só sobre foto ou cor escura.
  • Sempre ligue rótulo e campo (for = id). Campo sem rótulo visível precisa de aria-label.

O que ele não faz

  • O CSS não confere nada sozinho: erro e sucesso aparecem porque alguém colocou a classe. Para conferir de verdade, use Validação de formulário ou Validação inline — e confira de novo no servidor.
  • O select nativo com sw-inp abre a lista do próprio navegador (não dá para estilizar por dentro). Para lista com busca e etiquetas, use o Select (JS).
  • A área sw-fle não mostra prévia nem o nome do arquivo sozinha. Para isso existe o Upload.