components
radio-button
Seleção mutuamente exclusiva: só uma opção do grupo pode estar ativa. Pra múltipla seleção, use checkbox.
overview
variantes
Variante única.
estados
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| type="radio" | attr | — | required |
| name | attr | — | agrupa radios mutuamente exclusivos |
| checked | attr | — | estado inicial |
| disabled | attr | — | desabilita |
quando usar
use
não use
acessibilidade
- <fieldset> + <legend> pra agrupar radios relacionados
- Todos com mesmo name agrupam exclusivamente
- ↑ / ↓ navegam dentro do grupo (comportamento nativo)
- Label associado por for/id OU envolvendo o input
código
<fieldset>
<legend>tema</legend>
<label class="radio-row">
<input type="radio" name="theme" value="light"> light
</label>
<label class="radio-row">
<input type="radio" name="theme" value="dark"> dark
</label>
</fieldset>