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, linhassw-frm-rowe blocossw-frm-set.
Comece aqui
-
1
Coloque o SW Core no
<head>da página (uma vez só). Os campos são só CSS. O segundo arquivo traz os íconesswi-*(lupa, cadeado…), se for usar.<link rel="stylesheet" href="swcore/swcore.min.css"> <link rel="stylesheet" href="swcore/swcore.compl.min.css"> -
2
Escreva a caixa do campo com o rótulo e o input. O
fordo rótulo é igual aoiddo 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
Quer o rótulo dentro do campo, subindo quando a pessoa digita? Use
sw-fld="float", ponha o<label>depois do input e escrevaplaceholder=" "(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.
<div sw-fld>
<label for="fld-a1">Nome completo</label>
<input sw-inp id="fld-a1" placeholder="Maria Souza">
</div>
<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>
<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>
<div sw-fld="float"><input sw-inp id="fld-a4" placeholder=" "><label for="fld-a4">Cidade</label></div>
<div sw-fld="float under"><input sw-inp id="fld-a5" placeholder=" "><label for="fld-a5">Cidade</label></div>
<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.
<div sw-fld>
<label for="fld-b1">Nome</label>
<input sw-inp id="fld-b1" type="text" placeholder="Maria Souza">
</div>
<div sw-fld>
<label for="fld-b2">E-mail</label>
<input sw-inp id="fld-b2" type="email" placeholder="voce@email.com">
</div>
<div sw-fld>
<label for="fld-b3">Senha</label>
<input sw-inp id="fld-b3" type="password" value="segredo123">
</div>
<div sw-fld>
<label for="fld-b4">Quantidade</label>
<input sw-inp id="fld-b4" type="number" value="2" min="1">
</div>
<div sw-fld><label for="fld-b5">Data da visita</label><input sw-inp id="fld-b5" type="date"></div>
<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>
<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>
<div sw-fld>
<label for="fld-b8">Mensagem</label>
<textarea sw-inp id="fld-b8" placeholder="Conte o que precisa…"></textarea>
</div>
<input sw-inp="search" type="search" placeholder="Buscar produtos…" aria-label="Buscar">
<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.
<input sw-inp placeholder="Padrão" aria-label="Exemplo">
<input sw-inp="soft" placeholder="Soft" aria-label="Exemplo">
<input sw-inp="fill" placeholder="Fill" aria-label="Exemplo">
<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.
<input sw-inp="glass" placeholder="Seu melhor e-mail" aria-label="E-mail">
<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.
<input sw-inp="p" placeholder="Pequeno" aria-label="Exemplo">
<input sw-inp placeholder="Médio" aria-label="Exemplo">
<input sw-inp="g" placeholder="Grande" aria-label="Exemplo">
<textarea sw-inp="p" placeholder="Textarea pequeno" aria-label="Exemplo"></textarea>
<textarea sw-inp="fix" placeholder="Não redimensiona" aria-label="Exemplo"></textarea>
<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.
<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>
<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>
<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>
<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>
<div sw-fld><label for="fld-e5">Plano</label><input sw-inp id="fld-e5" value="Básico" disabled></div>
<div sw-fld>
<label for="fld-e6">Código do pedido</label>
<input sw-inp id="fld-e6" value="#1042" readonly>
</div>
<div sw-fld><label for="fld-e7">CEP</label><input sw-inp id="fld-e7" class="is-ldg" value="50030-000"></div>
<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).
<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>
<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>
<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>
<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>
<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>
<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">.
<label sw-chk><input type="checkbox"> Quero receber novidades</label>
<label sw-chk><input type="checkbox" checked> Aceito os termos de uso</label>
<label sw-chk="suc"><input type="checkbox" checked> Tarefa concluída</label>
<label sw-chk="err"><input type="checkbox" checked> Excluir também os anexos</label>
<label sw-chk="ale"><input type="checkbox" checked> Marcar como urgente</label>
<label sw-chk><input type="checkbox" id="todos"> Selecionar todos</label>
<script>document.getElementById('todos').indeterminate = true;</script>
<label sw-chk><input type="checkbox" disabled> Opção indisponível</label>
<label sw-chk="card"><input type="checkbox" checked> Embalar para presente (+ R$ 9,90)</label>
<label sw-chk="clean"><input type="checkbox" checked> Frete grátis</label>
<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>
<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>
<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.
<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>
<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>
<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>
<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>
<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>
<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).
<label sw-swt><input type="checkbox"> Modo escuro</label>
<label sw-swt><input type="checkbox" checked> Receber avisos</label>
<label sw-swt="p"><input type="checkbox" checked> Compacto</label>
<label sw-swt="g"><input type="checkbox" checked> Loja aberta</label>
<label sw-swt="suc"><input type="checkbox" checked> Site no ar</label>
<label sw-swt="err"><input type="checkbox" checked> Bloquear acesso</label>
<label sw-swt="ale"><input type="checkbox" checked> Modo manutenção</label>
<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.
<input type="range" sw-rng value="50" aria-label="Volume">
<input type="range" sw-rng="g" value="50" aria-label="Volume">
<input type="range" sw-rng="suc" value="50" aria-label="Meta">
<input type="range" sw-rng="err" value="50" aria-label="Limite">
<input type="range" sw-rng="ale" value="50" aria-label="Alerta">
<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.
<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>
<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>
<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).
<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>
<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
| Palavra | O que faz | Exemplo |
|---|---|---|
| Caixa do campo — sw-fld | ||
sw-fld | Rótulo em cima, campo embaixo, ajuda/erro no fim. | <div sw-fld> |
float | Rótulo dentro do campo que sobe ao digitar. O <label> vem DEPOIS do input e o input precisa de placeholder=" ". | <div sw-fld="float"> |
under | Junto de float: sem contorno, só uma linha embaixo que acende no foco. | <div sw-fld="float under"> |
row | Ró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-req | No <label>: mostra o asterisco vermelho de obrigatório. | <label class="is-req"> |
sw-fld-hint | Texto de ajuda, cinza, embaixo do campo. | <span class="sw-fld-hint">…</span> |
sw-fld-msg | Mensagem de erro (vermelha, com ⚠), embaixo à direita. Vazia, não aparece. | <span class="sw-fld-msg">…</span> |
sw-fld-ok | Mensagem de sucesso (verde, com ✓). | <span class="sw-fld-ok">…</span> |
sw-fld-cnt | Contador 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> |
soft | Relevo suave, sem borda marcada. | sw-inp="soft" |
fill | Fundo cheio, sem borda. | sw-inp="fill" |
min | Só a linha de baixo. | sw-inp="min" |
glass | Vidro fosco com texto branco — sobre foto escura. | sw-inp="glass" |
p | Pequeno. | sw-inp="p" |
g | Grande. | sw-inp="g" |
search | Busca: cápsula com lupa à esquerda. | <input sw-inp="search" type="search"> |
color | Escolher cor (use com type="color"). | <input sw-inp="color" type="color"> |
fix | Só textarea: sem alça de redimensionar. | <textarea sw-inp="fix"> |
free | Só textarea: redimensiona em todas as direções. | <textarea sw-inp="free"> |
| Estados (classe no sw-fld ou no próprio campo) | ||
is-err | Erro: borda e fundo vermelhos (no float, o rótulo também). | <div sw-fld class="is-err"> |
is-ok | Sucesso: borda e fundo verdes. | <div sw-fld class="is-ok"> |
is-ale | Atenção: borda amarela. | <div sw-fld class="is-ale"> |
is-ldg | No campo: carregando (ícone girando à direita, não aceita clique). | <input sw-inp class="is-ldg"> |
disabled | Atributo do HTML: apagado e bloqueado. | <input sw-inp disabled> |
readonly | Atributo do HTML: só leitura, borda tracejada. | <input sw-inp readonly> |
| Grupo — sw-grp | ||
sw-grp | Cola peças ao campo, numa linha só. | <div sw-grp>…</div> |
sw-adn | Pedaç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 / ale | Verde / vermelho / amarelo ao marcar. | <label sw-chk="suc"> |
card | Vira um cartão com borda; o cartão marcado fica destacado. | <label sw-rdo="card"> |
clean | Esconde a caixinha: só o texto fica na cor primária ao marcar. | <label sw-chk="clean"> |
sw-chk-grp / sw-rdo-grp | Classe da caixa que junta várias opções, uma embaixo da outra. | <div class="sw-rdo-grp"> |
is-row | Junto 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 / g | Pequeno / grande. | <label sw-swt="g"> |
suc / err / ale | Cor 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> |
g | Trilho e bolinha maiores. | sw-rng="g" |
suc / err / ale | Cor da parte pintada e da bolinha. | sw-rng="suc" |
--_pct | Quanto 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-val | Classes: 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> |
p | Compacta, numa linha (esconde o sw-fle-btn). | <label sw-fle="p"> |
is-over / is-act | Classes: 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-btn | Peças: ícone, título, texto menor e "botão" desenhado. | <span class="sw-fle-ttl">…</span> |
| Formulário — sw-frm | ||
sw-frm | No <form>: empilha tudo com espaço de 16 px. | <form sw-frm> |
sw-frm-row | Linha com 2 colunas iguais. Vira 1 coluna abaixo de 768 px. | <div sw-frm-row> |
1-2 · 2-1 · 3 · 4 | Proporções da linha: 1/3+2/3, 2/3+1/3, 3 iguais, 4 iguais. | <div sw-frm-row="2-1"> |
sw-frm-set | No <fieldset>: bloco com fundo e borda; o <legend> é o título. | <fieldset sw-frm-set><legend>…</legend> |
sw-frm-div | Classe: divisória com texto no meio, entre partes do formulário. | <div class="sw-frm-div">endereço</div> |
sw-frm-act | Barra dos botões, com linha em cima. À direita por padrão. | <div sw-frm-act> |
ctr / lft | Botõ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.
<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>
<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>
<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>
<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>
<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)"#preco").Precisa de quê
swcore.min.css— todos os campos.swcore.compl.min.css— só se usar íconesswi-*(lupa, cadeado, nuvem do upload).swcore.min.js— só para a régua (sw-rng) se pintar sozinha e para os botões − e + dosw-grp="num". Sem ele, o resto funciona igual.- Para conferir e mostrar erros sozinho, some
swcore.min.jse 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 deplaceholder=" "(um espaço) — sem ele o rótulo fica em cima do texto digitado. sw-chk,sw-rdo,sw-swtesw-flevão no<label>que envolve o input, não no input. Osw-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 — usesw-frm, que já dá o espaço. - Na régua (
sw-rng), se você mudar o valor pelo código (regua.value = 70), chameSW.Fld.sync(regua)para a pintura acompanhar. - Os botões − e + do
sw-grp="num"já funcionam sozinhos. Se você já tinha colocadoonclickcomstepDown()/stepUp(), pode tirar (ou deixar: botão comonclické ignorado pelo SW Core, não anda 2 passos). glasstem 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 dearia-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-inpabre 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-flenão mostra prévia nem o nome do arquivo sozinha. Para isso existe o Upload.

