fn-design-system/components/multi_select.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
multi_select	component	ts	ui	1.0.0	impure	MultiSelect(props: MultiSelectProps): JSX.Element	Selector múltiple con búsqueda, pills y límite de selecciones. Wrapper sobre Mantine MultiSelect.	multi-select form dropdown pills component ui interactive mantine				false		@mantine/core	Componente MultiSelect que renderiza dropdown con selección múltiple, búsqueda y pills	false			frontend/functions/ui/multi_select.tsx	name type required description data string[] | { value: string; label: string; disabled?: boolean }[] true Opciones del selector — strings o objetos {value, label} name type required description value string[] false Valores seleccionados (controlled) name type required description onChange (value: string[]) => void false Callback al cambiar la selección name type required description searchable boolean false Permite buscar entre opciones name type required description clearable boolean false Muestra botón para limpiar toda la selección name type required description maxValues number false Número máximo de valores seleccionables name type required description placeholder string false Texto cuando no hay selección name type required description label string false Label del campo name type required description disabled boolean false Deshabilitar el selector name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño del componente	onChange	true	react	default

Ejemplo

import { MultiSelect } from '@fn_library'

// Opciones simples
<MultiSelect
  label="Frameworks favoritos"
  placeholder="Elige uno o más"
  data={['React', 'Vue', 'Angular', 'Svelte']}
/>

// Con búsqueda y clearable
<MultiSelect
  label="Tecnologías"
  placeholder="Busca y selecciona"
  searchable
  clearable
  value={selected}
  onChange={setSelected}
  data={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'ts', label: 'TypeScript' },
  ]}
/>

// Máximo de selecciones
<MultiSelect
  label="Elige hasta 2"
  placeholder="Máximo 2"
  maxValues={2}
  data={['Opción A', 'Opción B', 'Opción C', 'Opción D']}
/>

Notas

• Wrapper directo sobre MultiSelect de @mantine/core v9. Todas las props de Mantine MultiSelect son válidas.
• A diferencia de Select, value es string[] y onChange recibe string[].
• Las selecciones se muestran como pills dentro del input, eliminables con clic.
• maxValues limita cuántos items pueden seleccionarse — el dropdown bloquea más selecciones al alcanzar el límite.
• Soporta searchable para filtrar opciones y clearable para un botón de limpiar todo.