Radios
Una elección entre varias opciones mutuamente excluyentes, todas visibles.
En esta página
Playground
Disposición
Estado
Fondo
<fieldset class="feitio-fieldset"><legend class="feitio-label">¿Con qué frecuencia?</legend><div class="feitio-choices"><label class="feitio-choice"><input type="radio" name="pg-r" value="Cada día">Cada día</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Cada semana" checked>Cada semana</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Cada mes">Cada mes</label></div></fieldset>Cuándo usarlo
- Para elegir exactamente uno de dos a seis opciones.
Cuándo no usarlo
- Muchas opciones: Seleccionar.
- Varias opciones: Checkbox.
- Dos o tres opciones vecinas que cambian la vista de inmediato (día y noche, una lista o una cuadrícula): SegmentedControl.
Ejemplos
¿Con qué frecuencia?
Una debajo de otra, en un Fieldset con la pregunta.
Mostrar código
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Com que frequência?</legend>
<div class="feitio-choices">
<label class="feitio-choice"><input type="radio" name="frequencia" value="uma-vez">Uma vez</label>
…
</div>
</fieldset>Estados
Hacer y no hacer
Do
Uno debajo del otro, y ninguno preseleccionado cuando la elección importa.
Don’t
Opciones apretadas en una línea: difícil ver qué círculo corresponde a qué texto.
Accesibilidad
- Siempre dentro de un Fieldset con un título; las teclas de flecha se mueven entre opciones.
- Lado a lado solo con dos opciones cortas, como "Sí" y "No".
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-choices" | alrededor | space-2 entre las opciones. |
class="feitio-choice" | sobre el <label> | Círculo y texto clicables juntos. |
name | lo mismo en todos | Una opción por grupo. |
checked | — | Solo cuando hay un predeterminado sensato. |