Casillas de selección
La casilla de selección es un elemento que forma parte de un conjunto de opciones en el que el usuario sólo puede seleccionar una.
- HTML
- JS
<form class="ulpgcds-form">
<fieldset class="ulpgcds-form__item">
<legend>Opciones:</legend>
<div class="ulpgcds-form__item__radio">
<input id="option1" name="radio" type="radio" /> <label for="option1">Etiqueta 1</label>
</div>
<div class="ulpgcds-form__item__radio">
<input checked="checked" id="option2" name="radio" type="radio" /><label for="option2">Etiqueta 2</label>
</div>
</fieldset>
</form> Variantes
Elementos en línea
- HTML
- JS
<form class="ulpgcds-form">
<fieldset class="ulpgcds-form__item ulpgcds-form__item--inline"><legend>Opciones:</legend>
<div class="ulpgcds-form__item__radio">
<input id="option3" name="radio" type="radio" /> <label for="option3">Etiqueta 1</label>
</div>
<div class="ulpgcds-form__item__radio">
<input checked="checked" id="option4" name="radio" type="radio" /><label for="option4">Etiqueta 2</label>
</div>
</fieldset>
</form>
Uso del componente
Las casillas de selección (comúnmente conocidas como Radio Buttons) se emplean en listados de opciones que forman parte de un conjunto disjunto, es decir, cuando solo una de las opciones puede ser seleccionada a la vez.
Es frecuente encontrarlo en formularios o entornos donde el usuario debe añadir información que puede tener múltiples variables.
Buenas prácticas:
- En todo conjunto de casillas de selección, estas deberán estar precedidas por un título con aspecto similar a la etiqueta de un campo de texto. Este título debe servir para aclarar al usuario el objetivo del conjunto.
- Es conveniente evitar que texto de la etiqueta este escrito en mayúsculas, esto puede dificultar la experiencia del usuario.
- Un conjunto de casillas de selección debería, siempre, tener una opción marcada por defecto.
- Liste las opciones en un orden racional que tenga sentido para el usuario.
- Recuerde que el usuario sólo puede elegir una de las opciones. Si lo que quiere conseguir es una selección múltiple, emplee una casilla de verificación.
- Si el conjunto de opciones es mayor a 5, es preferible emplear un elemento <select> o desplegable.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| form.ulpgcds-form | Necesario en el formulario dónde se introducen las casillas de selección |
| form div.ulpgcds-form__item | Cada fila correspondiente al componente del formulario |
| form div.ulpgcds-form__item--inline, form fieldset.ulpgcds-form__item--inline | Estilo para que los campos de cada selección aparezcan en horizontal |
| form div.help-text | Texto de ayuda debajo del campo |
| form div input.form-item__error | Indica que ese componente tiene un error |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
Accesibilidad
Los elementos de casillas de selección deberán ir siempre acompañados de una etiqueta (label) que identifique de manera explícita la casilla a la que hace referencia. Esto ayudará a su entendimiento por la mayoría de lectores de pantalla.
Se pueden implementar otras alternativas de casillas de selección siguiendo las pautas de accesibilidad.