Casillas de verificación
Las casillas de verificación son un elemento de formulario que permite a los usuarios realizar múltiples selecciones.
- HTML
- JS
<form class="ulpgcds-form">
<fieldset class='ulpgcds-form__item'>
<legend>Suscripciones disponibles:</legend>
<div class="ulpgcds-form__item ulpgcds-form__item--checkbox">
<input id="option1" name="checkbox" type="checkbox" /> <label for="option1">Etiqueta 1</label>
</div>
<div class="ulpgcds-form__item ulpgcds-form__item--checkbox">
<input checked="checked" id="option2" name="checkbox" type="checkbox" /><label for="option2">Etiqueta 2</label>
</div>
</fieldset>
</form> Uso del componente
Las casillas de verificación (comúnmente conocidas como checkbox) se pueden emplear tanto para listados de opciones donde varias, una o ninguna pueden ser seleccionadas, así como para mostrarse de manera independiente como una opción única (por ejemplo, aceptación de la política de privacidad).
Sólo constan de dos valores (verdadero o falso), por lo que la casilla de verificación siempre arroja un valor independientemente de si el usuario interactúa con ella o no.
Las casillas de verificación son independientes entre ellas, la selección de una de ellas no debería afectar al resto de su conjunto. Como excepción a esto, están aquellas casillas de verificación que activan un segundo conjunto de casillas.
Buenas prácticas:
- En todo conjunto de casillas de verificació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 todo el texto de la etiqueta este escrito en mayúsculas, esto puede dificultar la experiencia del usuario.
- No utilice signos de puntuación (coma, punto,...) al final de cada línea en un conjunto de casillas.
- Por defecto, todas las casillas de verificación deben mostrarse sin selección o "vacías".
- Liste las opciones en un orden racional que tenga sentido para el usuario.
- Recuerde que el usuario puede elegir múltiples opciones. Si lo que quiere conseguir es una selección única, emplee una casilla de verificación.
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 verificació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 verificació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.
