Autocomplete
Campo di input che suggerisce e completa parole mentre l'utente digita. Le opzioni vengono mostrate come hint visivi e possono essere accettate con il tasto Tab.
Playground
Esempio live
Digita una nazione, usa Tab per completare e le frecce per scorrere i suggerimenti.
Valore corrente: Bradipus
Consente l'input libero ma segnala le parole sconosciute con bordo rosso tremolante.
Props
| 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 modalita 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/giu. |
| enforceSelection | "none" | "highlight" | "block" | "none" | Controlla il comportamento quando il testo digitato non corrisponde a nessuna opzione. |
| invalidFeedbackDuration | number | 500 | Durata in ms dell'effetto visivo per le modalita di enforcement. |
| …inputProps | React.ComponentProps<Input> | — | Tutte le altre prop vengono inoltrate al componente Input sottostante. |
Varianti
Suggerimento libero
Completamento assistivo, nessun vincolo. Premi Tab per accettare.
Stato: (vuoto)
Segnalazione errori
Consente input libero ma segnala parole non riconosciute con shake.
Stato: (vuoto)
Input vincolato
Solo valori presenti nelle opzioni. Ideale per lookup e codici.
Stato: (vuoto)
Case sensitive
Richiede di rispettare maiuscole e minuscole nelle corrispondenze.
Stato: (vuoto)