fn-design-system/components/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
select	component	ts	ui	2.0.0	impure	Select(props: SelectProps): JSX.Element	Select dropdown con búsqueda, grupos y accesibilidad. Wrapper sobre Mantine Select con API declarativa via prop data.	select form dropdown component ui interactive mantine				false		@mantine/core	Componente Select que renderiza dropdown searchable con soporte para opciones planas, agrupadas y custom render	false			frontend/functions/ui/select.tsx	name type required description data string[] | { value: string; label: string; disabled?: boolean }[] | { group: string; items: ... }[] true Opciones del select — strings, objetos {value,label}, o grupos name type required description value string | null false Valor seleccionado (controlled) name type required description onChange (value: string | null) => void false Callback al cambiar selección name type required description defaultValue string | null false Valor inicial (uncontrolled) 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 searchable boolean false Permite buscar entre opciones name type required description clearable boolean false Permite limpiar la selección name type required description disabled boolean false Deshabilitar el select name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño del componente	onChange	true	react	default

Ejemplo

import { Select } from '@fn_library'

// Opciones simples (strings)
<Select
  label="Tu librería favorita"
  placeholder="Elige una"
  data={['React', 'Angular', 'Vue', 'Svelte']}
/>

// Opciones con value/label
<Select
  value={selected}
  onChange={setSelected}
  data={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
  ]}
/>

// Con grupos
<Select
  searchable
  data={[
    { group: 'Frontend', items: [{ value: 'react', label: 'React' }] },
    { group: 'Backend', items: [{ value: 'node', label: 'Node.js' }] },
  ]}
/>

Notas

• Wrapper directo sobre Select de @mantine/core v9. Todas las props de Mantine Select son válidas.
• Soporta searchable para filtrar opciones, clearable para limpiar, allowDeselect para deseleccionar.
• Data acepta: string[], { value, label }[], o { group, items }[].
• Reemplaza al antiguo select.tsx basado en NativeSelect con sub-componentes stub.