Campo di input che suggerisce e completa parole mentre l'utente digita. Le opzioni vengono mostrate come hint visivi ed è possibile accettare il completamento con il tasto Tab.
Il componente combina un normale campo di input con una logica di matching in tempo reale. Il valore digitato viene confrontato con la lista di opzioni fornita: se esiste una corrispondenza, la porzione mancante viene visualizzata con stile attenuato e può essere accettata tramite Tab. In modalità opzionali è possibile navigare i suggerimenti con le frecce direzionali o forzare l'inserimento di valori validi.
Valore corrente: Bradipus
Consente l'input libero ma segnala le parole sconosciute con bordo rosso tremolante.
Quando attivo, le frecce scorrono ciclicamente le varianti trovate.
La tabella seguente riassume le prop aggiuntive rispetto al componente `Input`.
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
| options | string[] | [] | Elenco di stringhe utilizzate per calcolare suggerimenti e completamenti. |
| value | string | — | Valore controllato dell'input. Se fornito, richiede `onValueChange`. |
| defaultValue | string | "" | Valore iniziale in modalità non controllata. |
| onValueChange | (value: string) => void | — | Callback invocata ad ogni modifica dell'input. |
| caseSensitive | boolean | false | Se impostato, confronta valori rispettando maiuscole/minuscole. |
| enableArrowNavigation | boolean | false | Attiva la navigazione tra i suggerimenti con freccia su/giù. |
| enforceSelection | "none" | "highlight" | "block" | "none" | Controlla il comportamento quando il testo digitato non corrisponde a nessuna opzione. |
| invalidFeedbackDuration | number | 500 | Durata in millisecondi dell'effetto visivo usato nelle modalità di enforcement. |
| …inputProps | React.ComponentProps<typeof Input> | — | Tutte le altre prop vengono inoltrate al componente `Input` sottostante (es. placeholder). |
Ecco alcuni pattern ricorrenti per integrare l'autocomplete in flussi reali. Ogni card mantiene il proprio stato per mostrare l'esperienza utente completa.
Stato: (vuoto)
Stato: (vuoto)
Stato: (vuoto)
Stato: (vuoto)