fn_registry/frontend/functions/ui/autocomplete.md

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

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	props	emits	has_state	framework	tested	tests	test_file_path	file_path
autocomplete	component	ts	ui	1.0.0	impure	Autocomplete(props: AutocompleteProps): JSX.Element	Input con sugerencias de autocompletado. Permite valores libres a diferencia de Select. Wrapper sobre Mantine Autocomplete.	autocomplete input form suggestions component ui interactive mantine				false	error_go_core	@mantine/core	Componente Autocomplete que renderiza input con dropdown de sugerencias filtradas	name type required description data string[] | { value: string; label?: string; group?: string }[] true Lista de opciones a mostrar en el dropdown name type required description value string false Valor controlado del input name type required description onChange (value: string) => void false Callback al cambiar el valor del input name type required description label string false Etiqueta visible encima del input name type required description placeholder string false Texto placeholder cuando el input está vacío name type required description clearable boolean false Muestra botón para limpiar el valor name type required description loading boolean false Muestra spinner de carga en el input name type required description disabled boolean false Deshabilita el input name type required description limit number false Número máximo de sugerencias a mostrar en el dropdown name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño visual del input	onChange	true	react	false			frontend/functions/ui/autocomplete.tsx

Ejemplo

import { Autocomplete } from '@fn_library/autocomplete'

// Básico — lista de strings
function BasicAutocomplete() {
  return (
    <Autocomplete
      label="País"
      placeholder="Escribe para buscar..."
      data={['Argentina', 'Brasil', 'Chile', 'Colombia', 'Uruguay']}
    />
  )
}

// Con grupos
function GroupedAutocomplete() {
  return (
    <Autocomplete
      label="Ciudad"
      placeholder="Selecciona una ciudad"
      data={[
        { value: 'Buenos Aires', group: 'Argentina' },
        { value: 'Rosario', group: 'Argentina' },
        { value: 'São Paulo', group: 'Brasil' },
        { value: 'Río de Janeiro', group: 'Brasil' },
      ]}
      limit={5}
    />
  )
}

// Con loading y clearable (búsqueda asíncrona)
function AsyncAutocomplete() {
  const [value, setValue] = useState('')
  const [data, setData] = useState<string[]>([])
  const [loading, setLoading] = useState(false)

  const handleChange = async (val: string) => {
    setValue(val)
    if (val.length < 2) return
    setLoading(true)
    const results = await fetchSuggestions(val)
    setData(results)
    setLoading(false)
  }

  return (
    <Autocomplete
      label="Búsqueda"
      placeholder="Escribe al menos 2 caracteres..."
      value={value}
      onChange={handleChange}
      data={data}
      loading={loading}
      clearable
    />
  )
}

Notas

A diferencia de Select, Autocomplete permite que el usuario ingrese cualquier valor libre, no solo los de la lista. Ideal para búsquedas con sugerencias donde el valor final puede no estar en el dataset.

Cuando data contiene objetos con group, el dropdown agrupa visualmente las opciones bajo el encabezado del grupo.

El prop limit controla cuántas sugerencias se muestran simultáneamente (por defecto Mantine muestra todas). Útil para datasets grandes o búsquedas asíncronas donde se quiere limitar el ruido visual.