Select
El componente e-select resuelve seleccion simple y multiple con soporte para items primitivos u objetos, autocomplete opcional, chips, estado de carga y render personalizado por slots.
Usa esta pagina para comparar patrones de configuracion rapido, validar contratos de mapeo objeto/valor y construir flujos de formulario listos para produccion con feedback claro.
Uso
Usa este playground base para configurar Select en contexto: color, outlined, clearable, readonly, disabled, multiple, chips y autocomplete desde un solo panel de control.
Mapeo de items
Mapea colecciones de objetos con item-text e item-value, y compara return-object activado/desactivado para elegir el contrato de modelo correcto en formularios y APIs.
Variantes visuales
Compara variantes default y outlined en estados interactivo, readonly y disabled para definir jerarquia y legibilidad en formularios reales.
Multiple y chips
Usa seleccion multiple para entradas tipo tags y modo chip cuando necesitas que los valores elegidos queden visibles y removibles de un vistazo.
Autocomplete y busqueda
Controla la busqueda con update:search y listas filtradas para manejar muchos items sin romper el flujo de teclado.
Slots nombrados
Personaliza la lista y el valor seleccionado con los slots item y selection para renderizar metadatos y contexto adicional.
Carga asincrona
Usa loading con hidratacion remota de items para mantener feedback explicito mientras llegan los datos.
Validacion
Valida formularios con Select usando reglas y control del estado de envio para mantener acciones predecibles.
Ticket de soporte
Completa campos obligatorios para continuar
Props
Usa la tabla de API como fuente de verdad para props soportadas, tipos permitidos, defaults y notas de comportamiento.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | SelectModelValue | undefined |
Valor seleccionado actual. Soporta valor simple o arreglo cuando multiple=true. | ||
| items | SelectItemType[] | [] |
Lista de opciones disponibles. Soporta items primitivos y objetos. | ||
| itemText / itemValue | string | "text" / "value" |
Claves del objeto usadas para resolver etiqueta visible y valor emitido. | ||
| multiple | boolean | false |
Activa modo de seleccion multiple. | ||
| returnObject | boolean | false |
Emite el objeto completo en lugar del valor primitivo normalizado. | ||
| autocomplete / search | boolean / string | number | false / undefined |
Permite input editable y binding de busqueda externo con update:search. | ||
| chip / chipClosable | boolean | false / false |
Renderiza seleccion como chips y opcionalmente permite cerrar chip en seleccion simple. | ||
| placeholder | string | undefined |
Texto placeholder mostrado cuando no hay valor seleccionado. | ||
| prefix / suffix | string | undefined |
Texto decorativo renderizado antes o despues de la region de seleccion. | ||
| loading | boolean | false |
Muestra estado de carga e indicador lineal mientras se resuelven opciones. | ||
| outlined | boolean | false |
Usa variante visual outlined para el contenedor del field. | ||
| disabled / readonly / clearable | boolean | false / false / false |
Estados de interaccion base heredados del comportamiento Field. | ||
| color / menuColor | string | "primary" / undefined |
Colores de tema para estado del field y superficie del dropdown. | ||
| rules / detailErrors | FieldRule[] | string[] | undefined |
Reglas de validacion y mensajes de error explicitos para la zona de detalles. | ||