Radio
Controle de seleção única dentro de um grupo. Quando selecionado, exibe um ponto na cor da marca com borda accent. Dark mode automático via tokens semânticos.
Estados
Padrão, selecionado, desativado e desativado selecionado. O hover aparece ao passar o mouse.
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descrição |
|---|---|---|
| Container | .radio | Label wrapper, flex horizontal, gap 12px |
| Input | .radio-input | Input nativo escondido (acessibilidade) |
| Circle | .radio-circle | Círculo 20x20, borda 1px, radius full |
| Dot | .radio-dot | Ponto interno 10x10, cor accent quando selecionado |
| Label | .radio-label | Inter 14px medium, line-height 24px |
Propriedades
Classes disponíveis para configurar o radio.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.radio | classe | — | Container principal (label). |
.radio-input | classe | — | Input nativo escondido. |
.radio-circle | classe | — | Círculo visual do radio. |
.radio-dot | classe | — | Ponto interno (selecionado). |
.radio-label | classe | — | Texto do label. |
Código
Snippets prontos para copiar e usar no seu projeto.
Radio simples
html
<label class="radio">
<input type="radio" class="radio-input" name="opcao" value="1">
<span class="radio-circle">
<span class="radio-dot"></span>
</span>
<span class="radio-label">Opção 1</span>
</label>Grupo de radios
html
<label class="radio">
<input type="radio" class="radio-input" name="plano" value="basico" checked>
<span class="radio-circle"><span class="radio-dot"></span></span>
<span class="radio-label">Plano básico</span>
</label>
<label class="radio">
<input type="radio" class="radio-input" name="plano" value="pro">
<span class="radio-circle"><span class="radio-dot"></span></span>
<span class="radio-label">Plano profissional</span>
</label>
<label class="radio">
<input type="radio" class="radio-input" name="plano" value="enterprise">
<span class="radio-circle"><span class="radio-dot"></span></span>
<span class="radio-label">Plano empresarial</span>
</label>Desativado
html
<label class="radio">
<input type="radio" class="radio-input" name="disabled" disabled>
<span class="radio-circle"><span class="radio-dot"></span></span>
<span class="radio-label">Indisponível</span>
</label>Tokens utilizados
Variáveis semânticas aplicadas ao componente.
| Token | Uso |
|---|---|
--border-base-neutral-strong | Borda padrão do circle |
--border-base-neutral-default | Borda no estado desativado |
--border-base-brand-default | Borda quando selecionado / outline de foco |
--surface-base-neutral-container-deep | Background no hover |
--surface-base-neutral-container-emphasis | Background no disabled+selected |
--surface-base-brand-container-medium | Cor do dot quando selecionado |
--text-base-neutral-default | Cor do label |
--text-base-neutral-subtle | Cor do label e dot desativados |
--spacing-3 | Gap entre circle e label (12px) |