Use Formulários completos quando a interface precisar de composições completas de entrada, escolha, validação, assinatura e envio.
Formulários completos
Composições completas de entrada, escolha, validação, assinatura e envio. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.
Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Login
Login, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-card sc-card-outline">
<div class="sc-field">
<label class="sc-label" for="fEmail">Email</label>
<input id="fEmail" class="sc-input" placeholder="voce@empresa.com">
<div class="sc-help">Nunca compartilharemos seu email.</div>
</div>
<div class="sc-field">
<label class="sc-label" for="fPass">Senha</label>
<input id="fPass" class="sc-input" type="password" placeholder="••••••••">
</div>
<button class="sc-btn sc-btn-primary sc-btn-pill" type="button">Entrar</button>
</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.
CONTAINER · stable
#Inline
Inline, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-card sc-card-outline">
<div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
<input class="sc-input" style="margin-bottom: 0; width: min(260px, 100%);" placeholder="Buscar⬦" aria-label="Buscar">
<div class="sc-select-menu" style="width: min(200px, 100%); margin:0;" data-value="all">
<button class="sc-select-trigger" type="button" aria-label="Filtro">
<span class="sc-select-value">Filtro</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="all" data-label="Todos">Todos</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="active" data-label="Ativos">Ativos</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="arch" data-label="Arquivados">Arquivados</div>
</div>
</div>
<button class="sc-btn sc-btn-primary" type="button">Filtrar</button>
</div>
</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.
CONTAINER · stable
#Subscribe
Subscribe, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-card sc-card-outline sc-subscribe-card" style="max-width: 320px; margin-inline:auto;">
<div class="sc-subscribe-title">SUBSCRIBE</div>
<div class="sc-field" style="margin: 12px 0 0;">
<label class="sc-label" for="subEmail">Seu e-mail</label>
<input id="subEmail" class="sc-input" type="email" placeholder="voce@empresa.com">
</div>
<button class="sc-btn sc-btn-primary sc-subscribe-submit sc-btn-pop" type="button">SUBMIT</button>
</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.
CONTAINER · stable
#Textarea
Textarea, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<textarea class="sc-textarea" placeholder="Escreva uma mensagem⬦" aria-label="Mensagem"></textarea>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.
CONTAINER · stable
#Checkbox / Radio
Checkbox / Radio, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-card sc-card-outline">
<div class="doc-muted" style="margin-bottom: 10px;">Checkbox (6 modelos)</div>
<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 class="doc-muted" style="margin-bottom: 10px;">Radio (6 modelos)</div>
<div class="doc-muted" style="margin: 10px 0 8px;"><span class="sc-badge">Modelo 1</span> Padrão</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 class="doc-muted" style="margin: 16px 0 8px;"><span class="sc-badge">Modelo 2</span> Soft + Glow</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 class="doc-muted" style="margin: 16px 0 8px;"><span class="sc-badge">Modelo 3</span> Orbit</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 class="doc-muted" style="margin: 16px 0 8px;"><span class="sc-badge">Modelo 4</span> Square + Plus</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="doc-muted" style="margin: 16px 0 8px;"><span class="sc-badge">Modelo 5</span> Segmented (glass glider)</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="doc-muted" style="margin: 16px 0 8px;"><span class="sc-badge">Modelo 6</span> Rating (estrelas)</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>
</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.
CONTAINER · stable
#OTP (verificação)
OTP (verificação), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-card sc-card-outline" style="max-width: 360px; margin-inline:auto; display:grid; gap:14px;">
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
<strong>Digite o código</strong>
<span class="sc-badge sc-badge-soft">OTP</span>
</div>
<p class="doc-muted" style="margin:0;">Enviamos um código para seu número.</p>
<div class="sc-otp" aria-label="OTP">
<input class="sc-input sc-otp-input" inputmode="numeric" autocomplete="one-time-code" aria-label="Dígito 1">
<input class="sc-input sc-otp-input" inputmode="numeric" aria-label="Dígito 2">
<input class="sc-input sc-otp-input" inputmode="numeric" aria-label="Dígito 3">
<input class="sc-input sc-otp-input" inputmode="numeric" aria-label="Dígito 4">
</div>
<button class="sc-btn sc-btn-primary" type="button">Verificar</button>
<button class="sc-btn sc-btn-ghost" type="button">Reenviar</button>
</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.
CONTAINER · stable
#Upload (dropzone)
Upload (dropzone), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-card sc-card-outline" style="max-width: 520px; margin-inline:auto;">
<div class="sc-file-drop" data-file-name=".sc-file-drop-out">
<label class="sc-file-drop-label" for="docFile">
<i class="sc-icon" data-smart-icon="upload"></i>
<div class="sc-file-drop-name">Arraste e solte</div>
<div class="sc-file-drop-hint">ou clique para selecionar um arquivo</div>
</label>
<input id="docFile" type="file">
<div class="sc-file-drop-file">
<i class="sc-icon" data-smart-icon="file"></i>
<span class="sc-file-drop-out">Nenhum arquivo selecionado</span>
</div>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="sc-btn sc-btn-primary" type="button">Enviar</button>
<button class="sc-btn sc-btn-outline" type="button">Cancelar</button>
</div>
</div>
</div><div class="doc-muted" style="margin: 18px 0 10px;">Toggle / Switch (6 modelos)</div><div class="sc-card sc-card-outline">
<div style="display:flex; flex-direction:column; gap:12px;">
<label class="sc-toggle">
<input type="checkbox">
<span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
<span class="sc-toggle-label">Padrão</span>
</label>
<label class="sc-toggle sc-toggle-sm">
<input type="checkbox" checked="">
<span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
<span class="sc-toggle-label">Small</span>
</label>
<label class="sc-toggle sc-toggle-lg">
<input type="checkbox">
<span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
<span class="sc-toggle-label">Large</span>
</label>
<label class="sc-toggle sc-toggle-sunmoon">
<input type="checkbox" checked="">
<span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
<span class="sc-toggle-label">Sun/Moon</span>
</label>
<label class="sc-toggle sc-toggle-wobble">
<input type="checkbox">
<span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
<span class="sc-toggle-label">Wobble</span>
</label>
<label class="sc-toggle sc-toggle-cyber">
<input type="checkbox" checked="">
<span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
<span class="sc-toggle-label">Cyber/Tech</span>
</label>
<label class="sc-toggle sc-toggle-glass">
<input type="checkbox" disabled="">
<span class="sc-toggle-track" aria-hidden="true"><span class="sc-toggle-thumb"></span></span>
<span class="sc-toggle-label">Disabled (Glass)</span>
</label>
</div>
</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.
CONTAINER · stable
#Validação
Validação, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-grid sc-cols-2 sc-gap-4" style="align-items:start;">
<input class="sc-input is-valid" placeholder="Campo válido" aria-label="Campo válido">
<input class="sc-input is-invalid" placeholder="Campo inválido" aria-label="Campo inválido">
</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.
CONTAINER · stable
#Select custom
Select custom, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu" data-value="op1">
<button class="sc-select-trigger" type="button" aria-label="Select custom do formulário">
<span class="sc-select-value">Escolha⬦</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="op1" data-label="Opção 1">Opção 1</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="op2" data-label="Opção 2">Opção 2</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="op3" data-label="Opção 3">Opção 3</div>
</div>
</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.
CONTAINER · stable
#Padrão
Padrão, 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.
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.
CONTAINER · stable
#Orbit
Orbit, 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.
CONTAINER · stable
#Square + Plus
Square + Plus, 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.
CONTAINER · stable
#Segmented (glass glider)
Segmented (glass glider), 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.
CONTAINER · stable
#Rating (estrelas)
Rating (estrelas), 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.