Formularios

Autocomplete

Búsqueda con sugerencias: estáticas o cargadas mientras escribes, agrupadas, con coincidencias resaltadas y búsquedas recientes cuando está vacía.

import { Autocomplete, Highlight } from '@alea/ui';

Ejemplos

Sugerencias agrupadas

Las coincidencias se resaltan; las búsquedas recientes aparecen cuando el campo está vacío.

Search the docs

Cargadas mientras escribes

Con debounce, con un spinner, y las solicitudes viejas se cancelan con el AbortSignal.

Invite someone

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-focus…
--alea-focus-halo…
--alea-text-muted…

Space

--alea-space-2…

Type

--alea-font-size-sm…

Props

`Autocomplete` props

Búsqueda con sugerencias: estáticas o cargadas mientras escribes, agrupadas, con coincidencias resaltadas y búsquedas recientes cuando está vacía.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-	Clases extra para el elemento raíz.
`debounce`	`number`	`250`	Cuánto esperar después de escribir antes de cargar, en ms. Por defecto 250.
`description`	`ReactNode`	-	Texto de ayuda mostrado bajo el campo.
`items`	`AutocompleteItem[]`	-	Items estáticos, filtrados mientras se escribe.
`label`	`ReactNode`	-	La etiqueta visible.
`loadItems`	`((query: string, signal: AbortSignal) => Promise<AutocompleteItem[]>)`	-	O carga coincidencias mientras se escribe (con debounce); devuelve los items.
`minChars`	`number`	`1`	Mínimo de caracteres antes de sugerir. Por defecto 1.
`motion`	`MotionProp`	-	Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones.
`onSelect`	`((item: AutocompleteItem) => void)`	-	Se llama con el elemento elegido.
`onSubmit`	`((text: string) => void)`	-	Se llama al presionar Enter con texto libre (una búsqueda).
`placeholder`	`string`	-	Se muestra mientras no hay valor.
`recent`	`AutocompleteItem[]`	-	Se muestra cuando el campo está vacío y enfocado: búsquedas recientes o sugerencias.

`Highlight` props

Prop	Tipo	Por defecto	Descripción
`query`obligatoria	`string`	-	Las palabras a marcar (sin distinguir mayúsculas).
`text`obligatoria	`string`	-	El texto completo.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

`Autocomplete`

Estados: Focus inside
Motion: nudgeAcepta una prop motion para su entrada y salida.
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-autocomplete.alea-input-wrap.alea-input-affix.alea-input.alea-autocomplete-spin.alea-select-popover.alea-listbox-empty.alea-option-section.alea-option-header.alea-option-icon.alea-option-text.alea-option-desc

`Highlight`

Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-mark

Un combobox: la lista se anuncia con su cantidad, y la opción resaltada se lee al recorrerla con las flechas.
Mientras carga, se muestra un spinner con etiqueta; los resultados lo reemplazan sin mover el foco.
Enter sin nada resaltado envía el texto libre.

Teclado

Tecla	Acción
`Flecha abajo` / `Arriba`	Recorre las sugerencias
`Enter`	Elige la sugerencia, o envía el texto
`Escape`	Cierra, luego borra

Qué hacer y qué evitar

Hacer

Aplica debounce a las búsquedas remotas (250 ms por defecto) y cancela las viejas: el componente pasa un AbortSignal.

Evitar

No lo uses para elegir de una lista corta y fija: usa Select o ComboBox.

En Figma

Autocomplete con estados Vacío, Escribiendo, Resultados, Cargando y Sin resultados.