Selects

Esta documentación define los lineamientos de uso de los selects, tomando como referencia los componentes de prime ng, con el objetivo de estandarizar su implementación y comportamiento dentro del sistema de diseño.

Select

El componente Select permite al usuario elegir una única opción de una lista desplegable.

Se utiliza para optimizar espacio en interfaz cuando las opciones no requieren visualización simultánea.

Casos de uso

Selección obligatoria de una sola opción.
Más de 5 opciones disponibles.
Formularios estructurados.
Filtros simples.

Anatomía completa del select

Este es el conjunto completo de elementos que pueden componer un select, no todos son obligatorios en todos los casos:

Icon label y label
Indicador opcional
Indicador obligatorio
Tooltip
Límite de carácteres
Icono indicador (chevron)
Icono izquierdo

Estado cerrado
Estado abierto

Comportamiento

Acción			Resultado
Click en campo			Abre panel
Click fuera			Cierra panel
Seleccionar opción			Cierra panel
Tab			Enfoca componente
Enter / Space			Abre
↑ ↓			Navega opciones
Esc			Cierra

Estados

Default
Active
Disabled
Error
Filled

Composiciones

Selección + entrada de texto: se usa cuando el usuario debe elegir una opción inicial (por ejemplo, un tipo o categoría) y luego ingresar un valor relacionado. Ideal para datos que combinan selección y escritura.
Selección + búsqueda: se usa cuando el usuario debe seleccionar un criterio y luego buscar información asociada a ese criterio. Recomendado para flujos donde la búsqueda depende del tipo de dato seleccionado.

Situaciones comunes de uso:

Ingreso de datos personales.
Configuración de parámetros.
Búsqueda y filtrado.
Creación y edición de información.

Select con buscador

El Select con buscador es un componente de formulario que permite buscar y seleccionar una opción dentro de una lista extensa. Integra un campo de entrada que filtra dinámicamente las opciones disponibles, facilitando la localización rápida de información y mejorando la experiencia de usuario cuando existen muchos elementos.

Este componente mantiene la base visual y funcional del Select del sistema, agregando capacidad de búsqueda.

Casos de uso

La lista contiene muchas opciones.
El usuario necesita encontrar una opción específica rápidamente.
Las opciones pertenecen a catálogos extensos.

Ejemplos comunes

Selección de ciudades o países
Selección de usuarios o responsables
Selección de entidades o productos
Selección de trámites o categorías extensas

Anatomía completa del select buscador

Label
Placeholder
Campo de búsqueda
Opciones

Comportamiento

Acción	Resultado
Click en campo	Abre panel
Click fuera	Cierra panel
Escribir en el campo	Filtra las opciones según el texto ingresado
Borrar texto de búsqueda	Restablece la lista completa de opciones
Seleccionar opción	Se selecciona el valor y se cierra el panel
Tab	Enfoca componente
Enter / Space	Abre
↑ ↓	Navega opciones
Esc	Cierra

Nota

Estos select obedecen a los mismos estados que los select estándar.

Multi-select

El MultiSelect es un componente de formulario que permite seleccionar múltiples opciones dentro de una lista. Las selecciones pueden visualizarse en el campo como texto resumido o como chips, dependiendo de la variante utilizada.

Este componente es útil cuando el usuario necesita seleccionar varios elementos de un mismo conjunto de opciones.

Casos de uso

Filtros
Segmentaciones
Categorización múltiple
Configuraciones avanzadas

Variantes

MultiSelect — Texto

Las opciones seleccionadas se muestran como texto dentro del campo, generalmente resumidas o separadas por comas.

Características

Permite selección múltiple.
Muestra los valores seleccionados en formato texto.
Puede mostrar un resumen cuando hay muchas selecciones.
Mantiene el comportamiento de dropdown para seleccionar opciones.

Uso recomendado

Cuando las selecciones no necesitan visualizarse individualmente.
Cuando el campo tiene espacio limitado.
Cuando se seleccionan muchos elementos.

MultiSelect — Chips

Las opciones seleccionadas se muestran como chips dentro del campo, permitiendo visualizar cada selección de forma individual.

Características

Cada selección se muestra como un chip.
Los chips pueden incluir un icono para eliminar la selección.
Permite identificar fácilmente cada elemento seleccionado.

Uso recomendado

Cuando es importante visualizar claramente cada selección.
Cuando el número de selecciones es limitado.
Cuando el usuario necesita eliminar opciones fácilmente.

Casos de uso

Filtros
Segmentaciones
Categorización múltiple
Configuraciones avanzadas

Anatomía completa del multi-select

Label
Placeholder
Casilla de selección masiva
Campo de búsqueda
Casillas de selección individual
Opciones

Comportamiento

Acción			Resultado
Click			Abre panel
Seleccionar opción			Permanece abierto
Click fuera			Cierra
Esc			Cierra
Select All			Marca todas

Nota

Estos select obedecen a los mismos estados que los select estándar.

TreeSelect

El TreeSelect es un componente de formulario que permite seleccionar opciones organizadas en una estructura jerárquica (árbol). Se utiliza cuando las opciones están agrupadas en diferentes niveles, facilitando la navegación y selección dentro de listas complejas.

Este componente permite expandir y contraer nodos para visualizar subniveles y seleccionar elementos dentro de la jerarquía.

Variantes

TreeSelect – Selección sencilla

Permite seleccionar una sola opción dentro del árbol.

Características

Solo una opción puede estar seleccionada.
Al seleccionar un nodo, el valor se muestra en el campo.
El panel se cierra automáticamente después de la selección.

Uso recomendado

Selección de una categoría específica
Selección de una ubicación dentro de una estructura
Selección de un área o dependencia

TreeSelect – Selección con checkbox

Permite seleccionar múltiples opciones dentro del árbol utilizando casillas de selección.

Características

Permite selección múltiple.
Cada nodo contiene un checkbox.
Puede existir relación entre nodos padre e hijos según la lógica del sistema.
Las selecciones se reflejan en el campo del componente.

Uso recomendado

Selección de múltiples categorías
Selección de permisos
Selección de múltiples ubicaciones o entidades

Casos de uso

El TreeSelect debe utilizarse cuando:

Las opciones están organizadas jerárquicamente.
Existen niveles o subcategorías.
La estructura de información requiere navegación por árbol.

Anatomía completa TreeSelect

Label
Placeholder
Casillas de selección individual
Icono de expansión
Nodo padre
Nodo hijo
Panel del árbol

Comportamiento

Acción	Resultado
Click	Abre panel
Click en icono de expansión	Expande o contrae los nodos
Click en nodo	Selecciona la opción
Seleccionar opción (simple)	Se muestra el valor y se cierra el panel
Seleccionar opción (checkbox)	Marca o desmarca el checkbox
Click fuera del componente	Cierra el panel
Tab	Enfoca el componente
Enter / Space	Selecciona el nodo enfocado
↑ / ↓	Navega entre los nodos visibles
Esc	Cierra el panel

Nota

Estos select obedecen a los mismos estados que los select estándar.

Comparación de componentes de selección

Componente	Tipo de selección	Cuándo usarlo	Estructura de datos	Ejemplo de uso
Select	Selección única	Cuando el usuario debe elegir una opción dentro de una lista corta.	Lista simple	Tipo de documento
Select con buscador	Selección única	Cuando la lista contiene muchas opciones y el usuario necesita buscarlas.	Lista simple extensa	Selección de ciudad
MultiSelect	Selección múltiple	Cuando el usuario puede seleccionar varias opciones dentro del mismo grupo.	Lista simple	Filtros de categorías
TreeSelect	Selección única o múltiple	Cuando las opciones están organizadas jerárquicamente por niveles.	Estructura de árbol	Categorías y subcategorías