Multi Select

Opciones de tipo Objeto

⚠️ Importante: Cuando trabajas con opciones de objeto, SIEMPRE debes proporcionar la prop getOptionLabel. Esta función le indica al componente qué propiedad del objeto mostrar como texto en los badges cuando se selecciona una opción.

¿Por qué es necesario getOptionLabel?

1. Identificación del texto a mostrar: El componente necesita saber qué propiedad del objeto mostrar en los badges cuando se selecciona una opción
2. Consistencia: Asegura que el texto mostrado en los badges use la misma propiedad del objeto
3. Flexibilidad: Permite trabajar con objetos que tienen múltiples propiedades de texto

¿Qué hace getOptionLabel?

• Muestra: Cuando seleccionas "Alex Torres", el badge mostrará "Alex Torres" (usando la propiedad name)
• Identifica: El componente usa esta función para identificar qué texto mostrar para cada opción seleccionada

Tipos de Datos

String

Las opciones de string son la forma más simple de usar el componente. No requieren configuración adicional:

Copyconst stringOptions = [
  "React",
  "Vue.js",
  "Angular",
  "Svelte",
  "Next.js",
  "Nuxt",
  "Astro",
  "SolidJS",
  "Qwik",
  "Tailwind CSS",
];

Objeto

⚠️ Requiere getOptionLabel: Cuando usas objetos, debes especificar qué propiedad contiene el texto a mostrar en los badges.

Copyinterface User {
  name: string;
  email: string;
  avatar?: string;
  role?: string;
}
 
const objectOptions: User[] = [
  { name: "Alex Torres", email: "alex.torres@example.com", role: "Developer" },
  { name: "María García", email: "maria.garcia@example.com", role: "Designer" },
  { name: "Luis Fernández", email: "luis.fernandez@example.com", role: "Manager" },
];
 
// Uso obligatorio con getOptionLabel
<MultiSelect
  options={objectOptions}
  getOptionLabel={(user) => user.name} // ← Especifica qué propiedad usar
  // ... otras props
/>;

Render personalizado de Opciones

💡 Consejo: renderOption te permite personalizar completamente cómo se ve cada opción en la lista desplegable. Puedes mostrar información adicional accediendo a cualquier propiedad del objeto, mientras que getOptionLabel se encarga del texto que aparece en los badges.

Tamaños

Deshabilitado

Error

Altura máxima del popover

Ajusta la altura máxima del popover de opciones mandando el slot de clase areaViewport en la propiedad classNames

Props