Our Insights About Modern Technology

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:

Comportamiento

Estados

Composiciones

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

Comportamiento

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

Comportamiento

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

Comportamiento

Comparación de componentes de selección

Selects - PreviousInputsNext - SelectsToggles