Demo interattiva dei 32 componenti UI più comuni
Intestazioni disposte verticalmente che si espandono e collassano per rivelare contenuto. Ideale per FAQ e informazioni gerarchiche dense.
Un piccolo contatore o indicatore di stato sovrapposto a un'icona o pulsante. Comunica elementi non letti, avvisi o quantità a colpo d'occhio.
Un'icona a griglia (ispirata alle lunch box giapponesi) che rivela un pannello di selezione app. Comune nelle suite di produttività come Google Workspace.
Un percorso di navigazione secondario che mostra la posizione dell'utente nella gerarchia del sito, con link cliccabili alle pagine padre.
Il trigger dell'azione principale. Disponibile in varianti — primary, secondary, danger, ghost — più stati di caricamento e disabilitato.
Una superficie contenitore che raggruppa contenuti correlati — titolo, metadati, azioni. Funge da punto d'ingresso verso il dettaglio.
Una presentazione che scorre tra elementi nello stesso spazio. Supporta navigazione manuale tramite frecce e punti, con avanzamento automatico.
Permette la selezione multipla indipendente. Supporta stati selezionato, deselezionato e indeterminato per la selezione parziale di gruppi.
Un elemento di discussione contestuale allegato a contenuti. Abilita feedback inline e collaborazione direttamente nell'interfaccia.
Tre linee di lunghezza decrescente, che ricordano una fetta di döner. Solitamente attiva pannelli di filtro, ordinamento o visualizzazione.
Un pulsante che al click rivela un elenco di opzioni. Risparmia spazio rispetto a mostrare tutte le scelte contemporaneamente.
Una raccolta strutturata di campi input che acquisisce dati utente, con etichette, feedback di validazione e un'azione di invio.
Tre linee orizzontali (☰) che attivano un drawer di navigazione. Pattern standard per collassare il nav principale su schermi piccoli.
Un piccolo simbolo grafico che rappresenta un'azione, un oggetto o un concetto. Migliora la scansionabilità e riduce la dipendenza dalle etichette testuali.
Accetta testo libero. Ha stati visivi distinti: default, focus, errore e successo — ognuno comunica lo stato di validazione.
Tre punti verticali (⋮) che aprono un menu contestuale per un elemento di lista. Comune su Android e Material Design.
Un indicatore rotante che segnala un progresso indeterminato. Usato quando il sistema è in elaborazione ma la durata è sconosciuta.
Tre punti orizzontali (⋯) che rivelano azioni in overflow in una toolbar o intestazione. Comune su iOS e layout orizzontali.
Un overlay che interrompe il flusso corrente per richiedere un'azione o conferma, bloccando l'interazione con il contenuto sottostante.
Suddivide un dataset ampio in pagine discrete, consentendo all'utente di scorrere in sequenza o saltare direttamente a un numero di pagina.
Comunica lo stato di completamento di un'attività. Può essere determinata (% nota) o indeterminata (durata sconosciuta).
Permette la selezione di una sola opzione da un gruppo mutuamente esclusivo. Selezionarne uno deseleziona automaticamente gli altri.
Un campo di testo dedicato alla ricerca di contenuti. Spesso mostra suggerimenti in tempo reale mentre l'utente digita per velocizzare la navigazione.
Un pannello verticale che scivola dal bordo per rivelare navigazione o contenuto supplementare. Può essere persistente o collassabile.
Un'anteprima segnaposto che imita la forma del contenuto in arrivo. Riduce il tempo di attesa percepito e previene lo spostamento del layout.
Permette di selezionare un valore da un range continuo trascinando un cursore. Ottimo per volume, luminosità o fasce di prezzo.
Un indicatore di progresso step-by-step che guida l'utente in un processo a più fasi, mostrando gli step completati, correnti e futuri.
Una barra di navigazione inferiore (comune su mobile) che consente di passare tra le sezioni principali dell'app. Ogni tab ha un'icona e un'etichetta.
Organizza contenuti correlati in pannelli commutabili all'interno della stessa vista. Il tab attivo è evidenziato con una sottolineatura o riempimento.
Etichette compatte e selezionabili per filtrare o categorizzare contenuti. Possono essere attivate e disattivate in modo indipendente.
Un breve messaggio non bloccante ai margini dello schermo. Informa l'utente di un evento e si chiude automaticamente dopo un breve intervallo.
Un controllo binario che attiva o disattiva un'impostazione istantaneamente. Più chiaro di un checkbox per preferenze persistenti in tempo reale.