Segmentado CSS

O que é

É aquele interruptor de várias posições: a pessoa escolhe uma opção e as outras se desmarcam. Serve para trocar o modo de ver alguma coisa (grade ou lista), o período de um preço (mensal ou anual) ou um filtro rápido (todos, abertos, fechados). Por baixo são botões de opção comuns do HTML (<input type="radio">) — então funciona em qualquer formulário, no teclado e em leitor de tela, e a escolha é enviada junto com o formulário.

O CSS já marca a opção escolhida com o fundo na cor primária. Com o JavaScript do SWCore, esse fundo vira uma cápsula que desliza de uma opção para a outra (sem JS, ela só troca na hora). Você escreve, dentro de <div sw-seg>, pares de <input type="radio"> + <label>. O input fica invisível; quem aparece é o rótulo. Todos os inputs do grupo precisam do mesmo name e cada um de um id próprio, ligado ao for do seu rótulo.

Quando usar

• Tabela de preços: "Mensal | Anual" no topo, trocando os valores.
• Modo de exibição de uma lista de produtos ou arquivos: "Grade | Lista".
• Filtro rápido no painel: "Todos | Pendentes | Pagos".
• Período de relatório: "Dia | Semana | Mês".
• Até umas 4 opções curtas. Com mais opções ou textos longos, use um Select ou um grupo de rádios comuns (Campo de formulário).

Comece aqui

1. 1

   Coloque o SWCore no <head> da página (uma vez só). O segmentado só precisa do CSS principal.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">

2. 2

   Escreva os pares input + rótulo dentro de <div sw-seg>. O checked diz qual começa marcado.

   Mensal Anual

   <div sw-seg>
     <input type="radio" name="plano" id="plano-mensal" value="mensal" checked>
     <label for="plano-mensal">Mensal</label>
     <input type="radio" name="plano" id="plano-anual" value="anual">
     <label for="plano-anual">Anual</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.

Tabela de opções

Receitas prontas — usos reais

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

<div sw-seg id="plano">
  <input type="radio" name="plano" id="p-m" value="mensal" checked><label for="p-m">Mensal</label>
  <input type="radio" name="plano" id="p-a" value="anual"><label for="p-a">Anual (-20%)</label>
</div>
<strong id="preco">R$ 49,90/mês</strong>

<script>
  document.getElementById('plano').addEventListener('change', (e) => {
    document.getElementById('preco').textContent =
      e.target.value === 'anual' ? 'R$ 479,00/ano' : 'R$ 49,90/mês';
  });
</script>

<form action="/cadastro" method="post">
  <div sw-seg="fl">
    <input type="radio" name="tipo" id="t-pf" value="pf" checked>
    <label class="seg-it" for="t-pf">Pessoa física</label>
    <input type="radio" name="tipo" id="t-pj" value="pj">
    <label class="seg-it" for="t-pj">Empresa</label>
  </div>
  <!-- o formulário envia tipo=pf ou tipo=pj -->
  <div sw-fld>
    <label for="doc">CPF ou CNPJ</label>
    <input sw-inp id="doc" name="doc" sw-mask="document" placeholder="Só os números">
  </div>
</form>

<div sw-seg="p">
  <a class="seg-it is-act" href="/pedidos">Todos</a>
  <a class="seg-it" href="/pedidos?status=pendente">Pendentes</a>
  <a class="seg-it" href="/pedidos?status=pago">Pagos</a>
  <a class="seg-it" href="/pedidos?status=cancelado">Cancelados</a>
</div>

Eventos

Precisa de quê

• swcore.min.css — o segmentado.
• swcore.min.js — opcional: faz a cápsula deslizar entre as opções.
• swcore.compl.min.css — só se usar ícone swi-* nos rótulos.

Cuidados — erros comuns

• Todos os inputs do grupo precisam do mesmo name. Com nomes diferentes, dá para marcar vários ao mesmo tempo.
• O for do rótulo tem que ser igual ao id do input, e o input vem logo antes do seu rótulo. Fora dessa ordem, clicar não marca.
• Dois segmentados na mesma página não podem repetir ids.
• Com fl, esquecer class="seg-it" nos rótulos faz as opções ficarem de larguras diferentes.
• Em links com is-act, clicar não troca a marcação sozinho: a página seguinte é que tem que vir com o is-act no link certo.

O que ele não faz

• Não tem cores além da primária.
• Não tem aparência de opção desativada: um radio com disabled não fica apagado, só deixa de responder ao clique.
• A cápsula que desliza precisa do swcore.min.js; sem ele a opção marcada troca de cor na hora. No ghost não tem cápsula (só o sublinhado).