CONTAINER · stable
#Soft + Glow
Soft + Glow, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div style="display:flex; flex-direction:column; gap:12px;">
<label class="sc-checkbox">
<input type="checkbox">
<span class="sc-checkbox-box" aria-hidden="true"></span>
<span class="sc-checkbox-label">Padrão</span>
</label>
<label class="sc-checkbox sc-checkbox-soft">
<input type="checkbox" checked="">
<span class="sc-checkbox-box" aria-hidden="true"></span>
<span class="sc-checkbox-label">Soft (fill leve)</span>
</label>
<label class="sc-checkbox sc-checkbox-glow">
<input type="checkbox" checked="">
<span class="sc-checkbox-box" aria-hidden="true"></span>
<span class="sc-checkbox-label">Glow (ring + shadow)</span>
</label>
<label class="sc-checkbox sc-checkbox-jelly">
<input type="checkbox">
<span class="sc-checkbox-box" aria-hidden="true"></span>
<span class="sc-checkbox-label">Jelly (bounce)</span>
</label>
<label class="sc-checkbox sc-checkbox-draw">
<input type="checkbox" checked="">
<span class="sc-checkbox-box" aria-hidden="true">
<svg viewBox="0 0 64 64" width="28" height="28" aria-hidden="true">
<path d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"></path>
</svg>
</span>
<span class="sc-checkbox-label">Draw (check “desenha”)</span>
</label>
<label class="sc-checkbox sc-checkbox-swap">
<input type="checkbox" checked="">
<span class="sc-checkbox-box" aria-hidden="true">
<span class="sc-cbx-off"><i class="sc-icon" data-smart-icon="volume-x"></i></span>
<span class="sc-cbx-on"><i class="sc-icon" data-smart-icon="volume-2"></i></span>
</span>
<span class="sc-checkbox-label">Swap (ícone off/on)</span>
</label>
</div>
<div class="doc-divider" style="margin: 14px 0;"></div>
<div style="display:flex; flex-direction:column; gap:10px;">
<label class="sc-radio">
<input type="radio" name="plan2" checked="">
<span class="sc-radio-dot" aria-hidden="true"></span>
<span class="sc-radio-label">Plano básico</span>
</label>
<label class="sc-radio">
<input type="radio" name="plan2">
<span class="sc-radio-dot" aria-hidden="true"></span>
<span class="sc-radio-label">Plano pro</span>
</label>
<label class="sc-radio">
<input type="radio" name="plan2">
<span class="sc-radio-dot" aria-hidden="true"></span>
<span class="sc-radio-label">Plano premium</span>
</label>
</div>
<div style="display:flex; flex-direction:column; gap:10px;">
<label class="sc-radio sc-radio-soft sc-radio-glow">
<input type="radio" name="plan3" checked="">
<span class="sc-radio-dot" aria-hidden="true"></span>
<span class="sc-radio-label">Mensal</span>
</label>
<label class="sc-radio sc-radio-soft sc-radio-glow">
<input type="radio" name="plan3">
<span class="sc-radio-dot" aria-hidden="true"></span>
<span class="sc-radio-label">Anual</span>
</label>
</div>
<div style="display:flex; flex-direction:column; gap:10px;">
<label class="sc-radio sc-radio-orbit">
<input type="radio" name="plan4" checked="">
<span class="sc-radio-dot" aria-hidden="true"></span>
<span class="sc-radio-label">Helios Blue</span>
</label>
<label class="sc-radio sc-radio-orbit">
<input type="radio" name="plan4">
<span class="sc-radio-dot" aria-hidden="true"></span>
<span class="sc-radio-label">Cygnus Magenta</span>
</label>
</div>
<div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
<label class="sc-radio sc-radio-plus">
<input type="radio" name="plan5" checked="">
<span class="sc-radio-dot" aria-hidden="true"><span aria-hidden="true"></span></span>
<span class="sc-radio-label">A</span>
</label>
<label class="sc-radio sc-radio-plus">
<input type="radio" name="plan5">
<span class="sc-radio-dot" aria-hidden="true"><span aria-hidden="true"></span></span>
<span class="sc-radio-label">B</span>
</label>
<label class="sc-radio sc-radio-plus">
<input type="radio" name="plan5">
<span class="sc-radio-dot" aria-hidden="true"><span aria-hidden="true"></span></span>
<span class="sc-radio-label">C</span>
</label>
</div>
<div class="sc-radio-seg sc-radio-seg-glass" aria-label="Plano (segmented)">
<input type="radio" id="seg-silver" name="seg-plan" checked="" data-glider-bg="linear-gradient(135deg, #c0c0c055, #e0e0e0)" data-glider-shadow="0 0 18px rgba(192,192,192,0.45), 0 0 10px rgba(255,255,255,0.35) inset">
<label class="sc-radio-seg-btn" for="seg-silver">Silver</label>
<input type="radio" id="seg-gold" name="seg-plan" data-glider-bg="linear-gradient(135deg, #ffd70055, #ffcc00)" data-glider-shadow="0 0 18px rgba(255,215,0,0.45), 0 0 10px rgba(255,235,150,0.35) inset">
<label class="sc-radio-seg-btn" for="seg-gold">Gold</label>
<input type="radio" id="seg-plat" name="seg-plan" data-glider-bg="linear-gradient(135deg, #d0e7ff55, #a0d8ff)" data-glider-shadow="0 0 18px rgba(160,216,255,0.45), 0 0 10px rgba(200,240,255,0.35) inset">
<label class="sc-radio-seg-btn" for="seg-plat">Platinum</label>
<span class="sc-radio-seg-glider" aria-hidden="true"></span>
</div>
<div class="sc-rating" role="radiogroup" aria-label="Avaliação">
<input type="radio" id="rate-5" name="rate" value="5">
<label for="rate-5" aria-label="5 estrelas"><i class="sc-icon" data-smart-icon="star"></i></label>
<input type="radio" id="rate-4" name="rate" value="4">
<label for="rate-4" aria-label="4 estrelas"><i class="sc-icon" data-smart-icon="star"></i></label>
<input type="radio" id="rate-3" name="rate" value="3" checked="">
<label for="rate-3" aria-label="3 estrelas"><i class="sc-icon" data-smart-icon="star"></i></label>
<input type="radio" id="rate-2" name="rate" value="2">
<label for="rate-2" aria-label="2 estrelas"><i class="sc-icon" data-smart-icon="star"></i></label>
<input type="radio" id="rate-1" name="rate" value="1">
<label for="rate-1" aria-label="1 estrela"><i class="sc-icon" data-smart-icon="star"></i></label>
</div>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.