Campo de formulário Componentes

O que é

Todo campo do SWCore 2 segue a mesma gramática: [sw-fld] é o invólucro (label + controle + ajuda/erro), [sw-inp] é o controle de texto/select/textarea, e cada tipo especial (checkbox, radio, switch, range, file) tem seu próprio atributo de invólucro. Antes eram 2 sistemas paralelos — foram unificados num só (07/09/2026).

Como funciona

CSS puro pra aparência e estado (foco, erro, sucesso via classe .is-err/.is-ok no [sw-fld]); o rótulo flutuante (sw-fld="float") usa :placeholder-shown, sem JS nenhum. Validação de verdade (que liga/desliga essas classes sozinha) é o componente separado Validação.

Exemplos

<div sw-fld>
  <label for="nome">Nome completo</label>
  <input sw-inp id="nome" placeholder="Ex.: Sandro Silva">
  <span class="sw-fld-hint">Como aparece no documento</span>
</div>

<div sw-fld="float">
  <input sw-inp id="email" type="email" placeholder=" ">
  <label for="email">E-mail</label>
</div>
<!-- erro: classe .is-err no sw-fld + <span class="sw-fld-msg"> -->

<label sw-chk><input type="checkbox" checked> Aceito os termos de uso</label>
<label sw-chk="suc"><input type="checkbox" checked> Verde quando marcado</label>

<div class="sw-rdo-grp">
  <label sw-rdo><input type="radio" name="pg" checked> Cartão de crédito</label>
  <label sw-rdo><input type="radio" name="pg"> Pix</label>
</div>

<label sw-swt><input type="checkbox" checked> Notificações por e-mail</label>

<input type="range" sw-rng value="70" style="--_pct:70%">
<!-- --_pct pinta o trilho; o JS acompanha o arraste -->

<div sw-fld><label>Preço</label>
  <div sw-grp><span sw-adn>R$</span><input sw-inp type="number" value="199"></div>
</div>

<label sw-fle>
  <input type="file">
  <i class="sw-fle-ico swi-cloud-upload"></i>
  <div class="sw-fle-ttl">Arraste o arquivo aqui</div>
  <span class="sw-fle-btn">Escolher arquivo</span>
</label>
<!-- dropzone puro CSS; upload com preview/drag é o componente Upload -->

<form sw-frm>
  <fieldset sw-frm-set><legend>Dados pessoais</legend>
    <div sw-frm-row><div sw-fld><label>Nome</label><input sw-inp></div></div>
    <div sw-frm-row="2-1">
      <div sw-fld><label>E-mail</label><input sw-inp type="email"></div>
      <div sw-fld><label>Idade</label><input sw-inp type="number"></div>
    </div>
  </fieldset>
  <div class="sw-frm-div">preferências</div>
  <label sw-swt><input type="checkbox" checked> Receber resumo semanal</label>
  <div sw-frm-act><button sw-btn>Cancelar</button><button sw-btn="pri">Salvar</button></div>
</form>
<!-- sw-frm-row: "1-2" "2-1" "3" "4" — colapsa pra 1 coluna abaixo de 768px -->

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.