Selector

Definición

Un selector es un componente que permite escoger una o varias opciones a través de un desplegable. Se utiliza en buscadores, cuadros de mando y formularios.

Anatomía

Las partes del componente son:

1. Etiqueta: Breve texto que recoge el contenido que se debe introducir en el campo. Si el campo es obligatorio, se incluirá un asterisco junto a la etiqueta.
2. Campo desplegable: contenedor que se despliega para seleccionar una opción de la lista.
3. Chevron: icono que indica que se puede desplegar el campo.
4. Listado de opciones: Elemento desplegable que aparece al interactuar con el campo. En función del dispositivo (p.ej. en móviles), se puede sustituir por una interacción adaptada a sus características.
5. Opción: Cada uno de los elementos seleccionables del listado.
6. Casilla (opcional): Se incluye solo en selectores múltiples.
   
    

Tipos

Selección única

Selección múltiple

Pautas de uso

Si hay pocos elementos, usa un listado de opciones

Si la selección se realiza entre menos de seis elementos, valora utilizar un listado de opciones en su lugar.

Si hay demasiadas opciones, usa un campo autocompletado o un campo abierto

Si la selección se realiza entre más de 50 elementos, valora incluir un campo autocompletado o un campo abierto en su lugar.
 

Componentes relacionados 

Similar a:

• Interruptor
• Lista de opciones de selección única (radio button)
• Lista de opciones de selección múltiple (checkbox)
• Campo abierto

Forma parte de:

• Buscador facetado
• Buscador avanzado
• Formulario

Recursos asociados al componente

Implementación:

Storybook (solo accesible desde la RCJA)

Control de versiones