fn-design-system/components/simple_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
simple_select	component	ts	ui	1.0.0	impure	SimpleSelect(props: SimpleSelectProps): JSX.Element	Select simplificado que acepta un array plano o agrupado de opciones. Wrapper sobre Select con API declarativa.	select dropdown form component ui simple				false		@mantine/core	Componente SimpleSelect que renderiza dropdown simplificado con soporte para opciones planas o agrupadas	false			frontend/functions/ui/simple_select.tsx	name type required description value string true Valor seleccionado actualmente name type required description onValueChange (value: string) => void true Callback cuando cambia la seleccion name type required description options SimpleSelectOption[] | SimpleSelectGroup[] true Opciones planas o agrupadas name type required description placeholder string false Texto cuando no hay seleccion name type required description disabled boolean false Deshabilita el select name type required description size 'sm' | 'default' false Tamano del trigger name type required description className string false Clases CSS adicionales		false	react	default sm

Ejemplo

import { SimpleSelect } from '@fn_library'

// Opciones planas
const options = [
  { value: 'a', label: 'Opcion A' },
  { value: 'b', label: 'Opcion B' },
]

<SimpleSelect value={selected} onValueChange={setSelected} options={options} />

// Opciones agrupadas
const grouped = [
  { group: 'Frutas', items: [{ value: 'apple', label: 'Manzana' }] },
  { group: 'Verduras', items: [{ value: 'carrot', label: 'Zanahoria' }] },
]

<SimpleSelect value={selected} onValueChange={setSelected} options={grouped} />

Notas

• Detecta automaticamente si las opciones son planas o agrupadas via type guard isGrouped.
• Wrapper sobre Select del registry — toda la logica de Base-UI y accesibilidad viene del componente base.
• Soporta items deshabilitados individualmente con disabled: true en cada opcion.