Autocomplete
Campo di input che suggerisce automaticamente opzioni di completamento man mano che l'utente digita
ComponentiMetadati e link per approfondire
Quando usarlo
Il componente Autocomplete consiste in un campo input con funzione di autocompletamento dei dati che fornisce all'utente suggerimenti pertinenti mentre inizia a digitare. Questi suggerimenti si basano sul testo inserito e aiutano l'utente a completare rapidamente il campo senza dover scrivere il testo per intero.
Usa il campo input con funzione di autocomplete nei seguenti casi:
- quando il numero di opzioni disponibili è molto elevato e risulterebbe difficile per l'utente scorrerle tutte manualmente;
- per migliorare l'esperienza d'uso, riducendo il tempo necessario per trovare e selezionare un'opzione;
- quando è necessario fornire suggerimenti basati su input parziali dell'utente, come nei campi di ricerca o nei moduli di registrazione;
- per aiutare l'utente a evitare errori di digitazione, mostrando opzioni predefinite che possono essere selezionate rapidamente.
Come usarlo
Per utilizzare correttamente un campo input con funzione di autocomplete, segui questi passaggi:
- implementa una lista di suggerimenti che si aggiorna dinamicamente mentre l'utente digita un testo;
- fornisci un feedback visivo chiaro quando un'opzione è selezionata, come un'ombreggiatura o un'icona di conferma;
- permetti la navigazione tramite tastiera, assicurandoti che l'utente possa scorrere i suggerimenti usando i tasti freccia e selezionare un'opzione con il tasto Invio;
- previeni gli errori, avvisando l'utente nel caso in cui tenta di inserire un valore non valido.
Accessibilità
Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia
| Caratteristica | Stato | Descrizione |
|---|---|---|
Visivamente accessibile | Pronto | Uso e contrasto dei colori, leggibilità |
Amichevole con lettori di schermo | Pronto | Struttura titolazioni, etichette e testi alternativi |
Navigabile | Pronto | Focus, struttura, navigazione da tastiera o altri device |
Comprensibile | Pronto | Comprensibile, prevedibile, gestione semplice dell’errore |
Stato del componente
Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system
| Libreria | Stato componente | Link |
|---|---|---|
UI Kit Italia (design) | Non presente | KitUI Kit Italia su Figma (si apre in una nuova finestra) |
Bootstrap Italia | Pronto | Scheda documentazione (si apre in una nuova finestra) |
React | Da rivedere | Scheda Storybook (si apre in una nuova finestra) |
Angular | Pronto | Scheda documentazione (si apre in una nuova finestra) |
Anatomia
Non disponibile
Comportamento
- Quando l'utente inizia a digitare, viene mostrata una lista di suggerimenti pertinenti basati sui caratteri inseriti.
- La lista di suggerimenti si aggiorna dinamicamente man mano che l'utente digita ulteriori caratteri.
- L'utente può navigare tra i suggerimenti usando i tasti freccia e selezionare un suggerimento con il tasto Invio.
- Nel caso di un dispositivo no-touch, i suggerimenti possono essere evidenziati al passaggio del puntatore del mouse.
- Una volta selezionato un suggerimento, questo viene inserito automaticamente nel campo input e la lista dei suggerimenti scompare.
- Se l'utente non seleziona alcun suggerimento e continua a digitare, il valore inserito manualmente rimane nel campo input.
Specifiche di design
Non disponibile
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici