Desplegables
Un campo desplegable permite al usuario elegir una opción dentro de una lista.
Desplegables
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--type-select">
<label for="dropdown">Label</label>
<select id="dropdown" name="dropdown">
<option value="" >Choose an option</option>
<option value="1">Select option 1</option>
<option value="2">Select option 2</option>
<option value="3">Select option 3</option>
<option value="4">Opción 4</option><option value="5">Opción 5</option>
</select>
<div class="help-text">Help text goes here</div>
</div> Variantes
Selección con icono
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--type-select">
<label for="dropdown2">Provincia</label>
<select id="dropdown" name="dropdown2" class="ulpgcds-form__item--icon">
<option value="1">Las Palmas </option>
<option value="2">Tenerife</option>
</select>
<span class="ulpgcds-icon-place"></span>
<div class="help-text">Help text goes here</div>
</div> Selector múltiple
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--type-select">
<label for="dropdown">Label</label>
<select id="dropdown" name="dropdown" class="chosen" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option><option value="4">Opción 4</option><option value="5">Opción 5</option>
</select>
<div class="help-text">Help text goes here</div>
</div> Selector múltiple deshabilitado
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--type-select">
<label for="dropdown">Label</label>
<select id="dropdown" name="dropdown" class="chosen" multiple="multiple" disabled="disabled">
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div class="help-text">Help text goes here</div>
</div> Dependencias externas
Los selectores múltiples son aquellos componentes que nos permiten seleccionar más de una opción dentro de un campo de formulario de tipo desplegable.
La forma nativa obliga a utilizar combinaciones de teclado para hacer selecciones múltiples, pero hoy en día existen muchas librerías que nos permiten hacer uso de una interfaz más amigable.
Mediante el uso de la librería jQuery, se propone emplear el plug-in Chosen, el cuál nos permite integrar la funcionalidad de selección múltiple con un formato muy intuitivo, accesible y ligero.
Para poder hacer uso de él, es necesario hacer las inclusiones de los archivos CSS y JS en la siguiente forma:
<head>
...
<link href="https://cdn.ulpgc.es/ulpgcds/1.0/js/chosen/chosen.css" media="all" rel="stylesheet" />
<script src="https://cdn.ulpgc.es/ulpgcds/1.0/js/chosen/chosen.jquery.js"></script>
...
</head>Uso del componente
La finalidad del campo desplegable es limitar el número de opciones que puede insertar el usuario y hacer que estas sean relativas a un contexto o taxonomía común.
La forma más común de este tipo de componente es dentro de un formulario, donde el usuario tiene que seleccionar una opción de una lista con el objetivo de registrar esos datos en el sistema.
Otra alternativa a su uso, es emplearlo para filtrar u ordenar contenido dentro de la página.
Buenas prácticas:
- Use el campo desplegable si tiene 5 o más opciones a listar. Para menos opciones es preferible usar un conjunto de casillas de verificación.
- Si el listado de opciones es superior a 10, evite usar el desplegable, ya que limita la visibilidad de opciones. Es preferible emplear un campo de texto con auto-completar.
- Recuerde emplear una etiqueta con texto claro y conciso sobre la finalidad del desplegable.
- Siempre que sea posible, tenga una opción seleccionada por defecto. Si no hay alguna opción que pueda ser selecciona por defecto emplee un texto de marcador de posición o placeholder. Nunca muestre un campo desplegable vacío.
- Es conveniente evitar que todo el texto de la etiqueta este escrito en mayúsculas, esto puede dificultar la experiencia del usuario.
- Liste las opciones en un orden racional que tenga sentido para el usuario.
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 los desplegables |
| form div.ulpgcds-form__item | Cada fila correspondiente al componente del formulario |
| form div.ulpgcds-form__item--icon | Variación para desplegables con icono |
| form div.ulpgcds-form__item--type-select | La clase específica para la visualización de los desplegables |
| form div.help-text | Texto de ayuda debajo del campo |
| form div input.form-item__error | Indica que ese componente tiene un error |
| form div input.form-item__error | Indica que ese componente tiene un error |
| form div input.chosen | Activa la visualización de la librería externa, siempre y cuandoe esté el desplegable establecido con el atributo multiple="multiple" |
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.
