# sistema di design Ariakit

## Anteprima dell’interfaccia del sistema di design Ariakit

Filtra i riferimenti raggruppati, scegli con Freccia giù/Invio, esamina il risultato e aggiungilo a un elenco di lettura locale.

## Riferimento di progettazione del sistema di design Ariakit

Ariakit React 0.4.40 è un toolkit per l’accessibilità senza stili predefiniti. Non fornisce la palette della pagina, la scala tipografica o le spaziature riportate di seguito come tema di design nativo. Tutti i valori --app-* sono una configurazione originale esplicita usata in questo esempio eseguibile; i nomi dei componenti e gli attributi di stato sono API di Ariakit.

### Configurazione originale dei colori semantici

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --app-canvas | #f5f3ee | Sfondo della pagina. |
| --app-surface | #fff | Popover del combobox e scheda di riferimento. |
| --app-text | #292e29 | Testo principale leggibile. |
| --app-muted | #657064 | Etichette secondarie e suggerimenti. |
| --app-border | #d8ddd4 | Bordi dell’input e della scheda. |
| --app-action | #285f48 | Azione principale e anello di messa a fuoco. |
| --app-on-action | #fff | Testo sull’azione principale. |
| --app-active | #e3eee4 | Sfondo dell’opzione attiva e dell’azione selezionata. |
### Geometria e spaziature originali

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --app-radius | 10px | Raggio dell’input, del popover e della scheda di riferimento. |
| --app-space-1 | 8px | Scala di spaziatura originale dichiarata. |
| --app-space-2 | 16px | Scala di spaziatura originale dichiarata. |
| --app-space-3 | 24px | Scala di spaziatura originale dichiarata. |
| --app-space-4 | 32px | Scala di spaziatura originale dichiarata. |
| Combobox padding | 13px 48px 13px 14px | Lascia spazio al controllo di apertura. |
| Popover maximum height | 340px | Scorrimento locale per un elenco di risultati più lungo. |
| Popover gutter | 8px | Spazio effettivo definito dalla proprietà gutter tra l’input e i suggerimenti. |
### Tipografia originale

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Font family | system-ui, sans-serif | Non sono necessari download di font né font specifici di Ariakit. |
| Page heading | 36px / 1.1; 30px mobile | Gerarchia originale della pagina. |
| Input text | 15px | Dimensione originale del testo del combobox. |
| Option text | 14px | Dimensione originale delle etichette dei risultati. |
| Group label | 11px, uppercase, 700 | Stile originale per i raggruppamenti visibili. |
| Supporting hint | 12px / 1.7 | Ritmo delle istruzioni da tastiera. |
### Composizione e stato nativi

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| ComboboxProvider.inputValue | Controlled query string | Stato dell’input API 0.4.40 attuale; setInputValue aggiorna il filtro. |
| ComboboxProvider.selectedValue | Controlled reference name | La selezione confermata è indipendente dalla query. |
| ComboboxGroup / ComboboxGroupLabel | Foundations / Components | Gruppi di opzioni nativi ed etichettati. |
| ComboboxPopover.sameWidth | true | Segue la larghezza dell’elemento di ancoraggio. |
| ComboboxItem.disabled | true for Experimental grid | Il record non disponibile non può essere selezionato. |
| [data-active-item] | CSS state selector | Applica uno stile distinto all’opzione attiva con la tastiera, indipendentemente dalla selezione. |
| Combobox autoSelect | Not enabled in this specimen | Freccia giù apre l’elenco prima che Invio selezioni un’opzione. |
## Guida completa al sistema di design Ariakit

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## sistema di design Ariakit: inizia dal modello di stato del combobox

### Inizia con il modello di stato di Combobox

> ComboboxProvider di Ariakit collega l’etichetta, l’input modificabile, il controllo di apertura, il popup e le opzioni. Il provider gestisce lo stato di interazione condiviso, mentre ciascun componente fornisce la propria parte della struttura. In questo modo è possibile disporre in modo indipendente il campo di ricerca e il pannello con i dettagli dell’elemento selezionato, senza considerare ogni pressione di tasto come una nuova selezione.

L’esempio di ricerca dei riferimenti presenta sei record suddivisi in due gruppi con nome. Il filtro si applica alla raccolta dell’applicazione; la navigazione e la selezione delle opzioni sono gestite dal combobox nativo. Rendere esplicita questa distinzione è utile quando si sostituiscono i record statici con un’altra origine dati: l’insieme dei risultati filtrati e l’elemento attualmente confermato non sono necessariamente la stessa cosa.

Leggi la specifica di supporto

## sistema di design Ariakit: il testo di ricerca e la selezione confermata sono stati distinti

### Il testo di ricerca e la selezione confermata sono stati distinti

L’esempio usa inputValue e setInputValue per il testo digitato, e selectedValue e setSelectedValue per il riferimento scelto. In API 0.4.40, la cui versione è stata verificata, inputValue è il nome attuale dello stato dell’input; negli esempi meno recenti possono comparire gli alias deprecati value/setValue. Il codice completo usa i nomi attuali.

Digitare «colore» restringe i suggerimenti, ma non sostituisce immediatamente la scheda dei dettagli visualizzata. La scelta di «Ruoli dei colori» conferma quell’elemento e aggiorna il pannello. Anche cancellando la ricerca, l’ultimo riferimento selezionato rimane invariato. Se ogni query parziale venisse trattata come un valore confermato, la vista dei dettagli passerebbe a record non validi o inesistenti.

Leggi la specifica di supporto

## sistema di design Ariakit: collega etichetta, input, controllo di apertura e popover

### Collega etichetta, input, apertura e popover

ComboboxProvider fornisce uno stato condiviso a ComboboxLabel, Combobox, ComboboxDisclosure e ComboboxPopover. L’etichetta visibile identifica l’input. Il controllo di apertura è un pulsante separato con un nome accessibile esplicito, mentre il popover usa sameWidth e uno spazio di otto pixel per restare allineato all’elemento di ancoraggio.

Ogni risultato è un ComboboxItem con un valore stabile. Foundations e Components sono sezioni ComboboxGroup native con intestazioni ComboboxGroupLabel. Inserire un’intestazione in grassetto in un elenco privo di struttura non esprime la stessa relazione di raggruppamento; l’anatomia nativa mantiene tale relazione e il relativo modello di navigazione da tastiera.

Leggi la specifica di supporto

## sistema di design Ariakit: filtra i dati prima di visualizzare gli elementi nativi

### Filtra i dati prima di visualizzare gli elementi nativi

La raccolta di esempio contiene cinque riferimenti disponibili e una Griglia sperimentale dichiarata intenzionalmente non disponibile. Il filtro dell’applicazione cerca, senza distinguere tra maiuscole e minuscole, le sottostringhe corrispondenti al nome di ciascun riferimento. I due gruppi vengono visualizzati solo se contengono record corrispondenti, evitando intestazioni vuote tra i risultati.

Se la query non produce risultati, viene mostrato un messaggio specifico che suggerisce di cancellare la ricerca o provare «colore». Il messaggio non diventa un’opzione selezionabile. Se pertinente, il record disabilitato rimane visibile con l’etichetta «Non disponibile», mentre la proprietà nativa disabled impedisce di confermarlo come selezione.

Leggi la specifica di supporto

## sistema di design Ariakit: verifica il percorso effettivo con freccia giù e Invio

### Verifica il percorso effettivo Freccia giù e Invio

Nell’esempio autoSelect è disattivato. Dopo aver digitato una query, premendo Freccia giù si entra nell’elenco dei suggerimenti e premendo Invio si seleziona l’elemento attivo. Esc chiude il popover. Il comportamento corrisponde alle istruzioni visibili ed è stato verificato controllando il titolo del dettaglio selezionato, non soltanto la comparsa di un menu a discesa.

In un altro prodotto potrebbe essere opportuno evidenziare automaticamente un’opzione, ma questo cambia il punto di partenza della navigazione con le frecce. Quando c’è un solo risultato già attivo, un’ulteriore pressione di Freccia giù può riportare il focus sull’input. L’esempio evita questa incongruenza e applica lo stile all’elemento attivo tramite data-active-item, mantenendo distinta la posizione della navigazione da tastiera dagli elementi salvati nella lista di lettura.

1. Digita «colore» e attendi l’opzione corrispondente.

2. Premi Freccia giù, poi Invio, e controlla il pannello dei dettagli di Ruoli dei colori.

3. Cerca un riferimento non disponibile o inesistente e verifica che non venga confermata alcuna selezione indesiderata.

Leggi la specifica di supporto

## sistema di design Ariakit: l’opzione attiva, l’anello di messa a fuoco e lo stato di salvataggio hanno indicatori distinti

### L’opzione attiva, l’indicatore di focus e lo stato salvato hanno segnali distinti

L’input e il controllo di apertura mostrano contorni visibili quando ricevono il focus. L’opzione attiva ha uno sfondo verde chiaro e un contorno interno di un pixel, grazie all’attributo nativo data-active-item. Le opzioni disabilitate hanno minore risalto e mantengono la propria etichetta testuale esplicita. Questi stili non si basano soltanto sull’hover.

Quando il riferimento selezionato è già nella lista di lettura, il pulsante Aggiungi viene disabilitato e il testo cambia. Questo stato di salvataggio appartiene all’applicazione ed è distinto dal risultato attualmente attivo nel combobox. Uno sfondo verde chiaro per l’azione salvata evita di rappresentare un’azione disabilitata come un altro pulsante principale attivo.

Leggi la specifica di supporto

## sistema di design Ariakit: la lista di lettura non sostituisce il riferimento corrente

### Un elenco di lettura non sostituisce il riferimento corrente

L’aggiunta di un riferimento inserisce il suo nome in un array locale una sola volta; il riferimento corrente rimane visibile, così l’utente può consultarne le note. Ogni riga della lista di lettura ha un pulsante Rimuovi con un nome specifico. Rimuovendo un elemento, Aggiungi torna disponibile se quel riferimento è ancora selezionato. Il conteggio deriva dalla lunghezza dell’array.

Il contenuto di esempio dei dettagli include indicazioni su tipografia, spaziature e componenti, per rendere interessante esplorare la ricerca. I relativi valori sono chiaramente indicati come contenuti di esempio originali. Il lettore non deve interpretare «Display 36px» nel record Scala tipografica come un token tipografico di Ariakit: Ariakit non fornisce quel linguaggio visivo.

Leggi la specifica di supporto

## sistema di design Ariakit: il popover ha spazio senza ridimensionare l’intera pagina

### Il popover ha spazio senza ridimensionare l’intera pagina

Il popover segue la larghezza dell’input e limita la propria altezza a 340px. Se la raccolta dei risultati è più ampia, il suo contenuto scorre all’interno di questo limite, mentre la scheda dei dettagli selezionati rimane nel normale flusso del documento. Mantieni collegati l’input, il controllo di apertura e il popup delle opzioni anche se la scheda dei dettagli viene spostata in un’altra colonna: la conferma di un elemento deve aggiornare sempre lo stesso record selezionato.

Al breakpoint originale di 700px, l’area di ricerca e la scheda dei dettagli si dispongono una sotto l’altra. I controlli di ricerca, il suggerimento da tastiera e la lista di lettura precedono la scheda selezionata nell’ordine del documento. Le immagini decorative dei riferimenti sono nascoste alle tecnologie assistive, perché il titolo e le note ne comunicano il significato effettivo.

- Limita localmente un elenco di opzioni lungo, mantenendo una spaziatura leggibile tra gli elementi.

- Mantieni il pannello dei dettagli confermati fuori dal popover temporaneo.

- Mantieni visibili le etichette dell’input e i suggerimenti da tastiera sui dispositivi mobili.

Leggi la specifica di supporto

## sistema di design Ariakit: collega provider, raccolta e foglio di stile

### Collega provider, raccolta e foglio di stile

Installa @ariakit/react 0.4.40 nel progetto React e mantieni la composizione completa di provider e componenti presente in App.jsx. L’esempio attuale usa inputValue/setInputValue e selectedValue/setSelectedValue come coppie controllate distinte. Mantieni disponibile il record selezionato anche quando la query corrente dell’input lo esclude dal popup.

Importa il file style.css fornito insieme al componente. La sua regola data-active-item segue la posizione della navigazione da tastiera nel combobox, mentre gli stili della lista salvata seguono lo stato dell’applicazione. Quando sostituisci i risultati caricati in modo asincrono, mantieni distinti questi due canali di stato e le relazioni tra gruppi e opzioni; non sostituire il pannello dei dettagli confermati con una stringa di query intermedia.

Leggi la specifica di supporto

## Esempi di componenti del sistema di design Ariakit

### Ricerca completa dei riferimenti controllata

Provider, etichetta, input, controllo di apertura, elementi raggruppati nel popover e azioni locali per la lista di lettura.

```
import React,{useState} from 'react';
import * as Ariakit from '@ariakit/react';
const resources=[{name:'Type scale',group:'Foundations',code:'Aa',description:'A compact editorial hierarchy for headings, supporting text and labels.',notes:['Display · 36px / 1.1','Section · 24px / 1.25','Body · 16px / 1.6'],color:'#f0dbc3'},{name:'Color roles',group:'Foundations',code:'◐',description:'Separate surface, text, boundary and action roles before naming brand colors.',notes:['Canvas and raised surface','Primary and muted text','Action and on-action pair'],color:'#d6e5d8'},{name:'Spacing rhythm',group:'Foundations',code:'▥',description:'Use a small set of intervals to show relationships between content groups.',notes:['8px within a compact group','16px between related controls','32px between sections'],color:'#d6dfee'},{name:'Form field',group:'Components',code:'⌑',description:'Keep the label, hint, input and error message in one understandable group.',notes:['Persistent visible label','Hint before an error exists','Error connected to the input'],color:'#e9d8de'},{name:'Navigation menu',group:'Components',code:'☷',description:'A small set of destinations with a visible current location and keyboard access.',notes:['Destination labels describe content','Current item has a text/state cue','Collapsed layout keeps names'],color:'#e7e0c5'},{name:'Experimental grid',group:'Components',code:'▦',description:'Unavailable in this sample collection.',notes:[],color:'#e3e3e3',disabled:true}];
export default function App(){const[query,setQuery]=useState(''),[chosen,setChosen]=useState('Type scale'),[saved,setSaved]=useState([]);const selected=resources.find(x=>x.name===chosen)||resources[0],matches=resources.filter(x=>x.name.toLowerCase().includes(query.toLowerCase()));return <main className="resource-finder"><header><p className="eyebrow">ARIAKIT · ACCESSIBLE PRIMITIVES</p><h1>A reference, within reach.</h1><p>Search a small collection with the keyboard, inspect the result and keep a local reading list.</p></header><div className="finder-grid"><section className="search-area"><Ariakit.ComboboxProvider inputValue={query} setInputValue={setQuery} selectedValue={chosen} setSelectedValue={setChosen}><Ariakit.ComboboxLabel className="label">Find a reference</Ariakit.ComboboxLabel><div className="input-row"><Ariakit.Combobox className="combobox" placeholder="Try type, color or form" /><Ariakit.ComboboxDisclosure className="disclosure" aria-label="Show reference suggestions">⌄</Ariakit.ComboboxDisclosure></div><Ariakit.ComboboxPopover gutter={8} sameWidth className="popover">{['Foundations','Components'].map(group=>{const items=matches.filter(x=>x.group===group);return items.length?<Ariakit.ComboboxGroup key={group}><Ariakit.ComboboxGroupLabel className="group-label">{group}</Ariakit.ComboboxGroupLabel>{items.map(x=><Ariakit.ComboboxItem key={x.name} value={x.name} disabled={x.disabled} className="combo-item"><span>{x.name}</span><small>{x.disabled?'Unavailable':x.group==='Foundations'?'Guide':'Pattern'}</small></Ariakit.ComboboxItem>)}</Ariakit.ComboboxGroup>:null})}{!matches.length&&<p className="empty" role="status">No matching reference. Try “color” or clear the search.</p>}</Ariakit.ComboboxPopover></Ariakit.ComboboxProvider><p className="hint">Type to filter. Use ↓ and ↑ to browse, Enter to choose, Escape to close.</p><div className="collection-note"><span>06</span><div><strong>Sample references</strong><p>Five available, one deliberately disabled to show an unavailable item.</p></div></div><section className="reading-list"><h2>Your reading list <small>{saved.length}</small></h2>{saved.length?<ul>{saved.map(name=><li key={name}><span>{name}</span><Ariakit.Button className="remove" onClick={()=>setSaved(saved.filter(x=>x!==name))} aria-label={`Remove ${name}`}>Remove</Ariakit.Button></li>)}</ul>:<p className="muted">Choose a reference, then add it here.</p>}<p className="local-note">This list stays in memory and clears on reload.</p></section></section><section className="reference-card" aria-label="Selected reference"><div className="reference-art" style={{background:selected.color}} aria-hidden="true"><span>{selected.code}</span><i></i></div><div className="reference-body"><p className="eyebrow">{selected.group} · SAMPLE CONTENT</p><h2>{selected.name}</h2><p>{selected.description}</p><ul className="note-list">{selected.notes.map(note=><li key={note}>{note}</li>)}</ul><Ariakit.Button className="primary" disabled={saved.includes(selected.name)} onClick={()=>setSaved([...saved,selected.name])}>{saved.includes(selected.name)?'Added to reading list':'Add to reading list'}</Ariakit.Button><p className="scope-note">These sample reference values are original content, not Ariakit design tokens.</p></div></section></div><p className="selection-status" role="status">Selected reference: {selected.name}</p></main>}
```

Riferimento del codice

- inputValue è il testo di ricerca; selectedValue è il riferimento confermato.

- Gli elementi disabilitati restano visibili quando corrispondono alla query.

- I valori originali di tipografia e spaziatura dell’esempio non sono impostazioni predefinite di Ariakit.

### Configurazione visiva originale completa

Variabili semantiche dell’applicazione, anelli di messa a fuoco, stile dell’opzione attiva e layout adattivo.

```
:root{--app-canvas:#f5f3ee;--app-surface:#fff;--app-text:#292e29;--app-muted:#657064;--app-border:#d8ddd4;--app-action:#285f48;--app-on-action:#fff;--app-active:#e3eee4;--app-radius:10px;--app-space-1:8px;--app-space-2:16px;--app-space-3:24px;--app-space-4:32px;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--app-canvas);color:var(--app-text)}button,input{font:inherit}.resource-finder{max-width:1080px;padding:32px;margin:auto}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--app-muted)}h1{font-size:36px;line-height:1.1;margin:16px 0}header>p:last-child{font-size:15px;line-height:1.7;max-width:620px;color:var(--app-muted)}.finder-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;margin-top:32px}.label{display:block;font-size:14px;font-weight:650;margin-bottom:10px}.input-row{position:relative;display:flex}.combobox{width:100%;padding:13px 48px 13px 14px;border:1px solid var(--app-border);border-radius:var(--app-radius);background:var(--app-surface);color:var(--app-text);font-size:15px}.disclosure{position:absolute;right:4px;top:4px;bottom:4px;width:36px;border:0;background:transparent;border-radius:6px;cursor:pointer}.combobox:focus,.disclosure:focus-visible,button:focus-visible{outline:3px solid var(--app-action);outline-offset:3px}.popover{z-index:50;max-height:340px;overflow:auto;background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius);box-shadow:0 8px 28px #243c2420;padding:8px}.group-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--app-muted);padding:10px}.combo-item{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 10px;border-radius:6px;cursor:default;font-size:14px;scroll-margin:8px}.combo-item small{font-size:11px;color:var(--app-muted)}.combo-item[data-active-item]{background:var(--app-active);outline:1px solid var(--app-action);outline-offset:-1px}.combo-item[aria-disabled=true]{opacity:.45}.empty{padding:12px;font-size:14px;line-height:1.6}.hint{font-size:12px;line-height:1.7;color:var(--app-muted);margin-top:12px}.collection-note{display:flex;gap:16px;align-items:flex-start;border-block:1px solid var(--app-border);padding:24px 0;margin:28px 0}.collection-note>span{font-size:40px;line-height:1;color:var(--app-action)}.collection-note strong{font-size:14px}.collection-note p{font-size:13px;line-height:1.6;color:var(--app-muted);margin:8px 0 0}.reading-list h2{font-size:17px;display:flex;justify-content:space-between}.reading-list h2 small{background:var(--app-active);border-radius:30px;padding:3px 8px}.reading-list ul{padding:0;list-style:none}.reading-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--app-border);font-size:14px}.remove{background:none;border:0;text-decoration:underline;color:var(--app-action);font-size:12px;cursor:pointer}.muted,.local-note,.scope-note{color:var(--app-muted);font-size:12px;line-height:1.7}.reference-card{border:1px solid var(--app-border);border-radius:var(--app-radius);overflow:hidden;background:var(--app-surface)}.reference-art{height:160px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.reference-art span{font-size:96px;font-family:Georgia,serif;line-height:1;position:relative;z-index:1}.reference-art i{position:absolute;width:190px;height:190px;border:1px solid currentColor;opacity:.2;border-radius:50%;left:50%;top:35%}.reference-body{padding:24px}.reference-body h2{font-size:28px;margin:12px 0}.reference-body>p{line-height:1.65;font-size:14px}.note-list{list-style:none;padding:0;margin:24px 0}.note-list li{padding:10px 0;border-bottom:1px solid var(--app-border);font-size:13px}.primary{padding:12px 18px;border:1px solid var(--app-action);background:var(--app-action);color:var(--app-on-action);border-radius:6px;cursor:pointer;font-weight:600;font-size:14px}.primary:disabled{background:var(--app-active);color:var(--app-action);cursor:default}.scope-note{margin-top:16px}.selection-status{font-size:12px;color:var(--app-muted);margin-top:24px}@media(max-width:700px){.resource-finder{padding:24px 16px}h1{font-size:30px}.finder-grid{grid-template-columns:1fr;gap:28px}.reference-art{height:135px}}
```

Riferimento del codice

- Ariakit fornisce comportamento e semantica, non questo sistema di colori o spaziature.

- Il risultato attivo è definito tramite data-active-item.

- Il popover ha un'altezza massima e un'area di scorrimento proprie.

## Configurazione dell'agente del sistema di design Ariakit

### Punto di partenza per l’implementazione

Verificato con @ariakit/react 0.4.40 e React 19. Usa i nomi correnti inputValue/setInputValue e un selectedValue controllato.

```
// Create the project first:
// npm create vite@latest ariakit-specimen -- --template react
// cd ariakit-specimen && npm install
// In a Vite React project:
// npm install @ariakit/react@0.4.40 react@19 react-dom@19
// Save the complete component as App.jsx and the visual configuration as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
import './style.css';
createRoot(document.getElementById('root')).render(<App />);
// index.html contains <div id="root"></div>.
// No Ariakit theme stylesheet is required; style.css is this example's original theme.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### Un prompt per il tuo progetto

```
Usa il componente di ricerca dei riferimenti fornito per Ariakit 0.4.40 in React. Mantieni indipendenti inputValue/setInputValue e selectedValue/setSelectedValue di ComboboxProvider, conserva i gruppi nativi con etichetta e l'opzione a griglia Experimental disabilitata, e filtra i dati prima di visualizzare gli elementi. Mantieni verificato il percorso Freccia giù, poi Invio, con autoSelect disattivato e definisci lo stile di data-active-item separatamente dall'appartenenza all'elenco salvato. Aggiungi il riferimento confermato a un elenco di lettura locale senza duplicati e consenti di rimuoverlo senza perdere il dettaglio corrente. Includi il foglio di stile originale completo.
```

## Origini e ambito del sistema di design Ariakit

Ariakit React 0.4.40. Tutti i token visivi, le illustrazioni e i valori di esempio dei riferimenti sono configurazioni originali; non si dichiara l'uso della palette o della scala tipografica ufficiale di Ariakit. Lo stato dell'elenco di lettura è locale.

- Combobox Composizione nativa e comportamento da tastiera.

- Provider Input e stato di selezione controllati.

- Opzioni raggruppate Gruppi di risultati accessibili.

- Elemento API Comportamento di disabilitazione e selezione.

- Popover API Posizionamento in base a larghezza e margine interno.

- Stile Primitive senza stili e attributi di stato.

- Button Primitiva di azione accessibile.

## Risorse correlate al sistema di design Ariakit

### Bits UI

Bits UI offre componenti Svelte headless, componibili tramite parti native e lo stato di Svelte 5. L’esempio combina una casella di controllo con stato misto derivato, sezioni dell’accordion espandibili in modo indipendente e una finestra di dialogo di revisione basata su portal, includendo la configurazione completa degli stili.

### Bootstrap

Usa Bootstrap 5.3.8 tramite le scale effettive di spaziatura, i colori semantici, la griglia responsive e le API dei componenti. Prova un modulo di prenotazione funzionante, un riepilogo degli errori, un filtro per tabella, una finestra modale e un selettore della modalità colore, poi riutilizza il codice documentato.

### Bulma

Crea una scrivania editoriale con la struttura reale di campi e controlli di Bulma, colonne responsive, modificatori semantici per i colori e variabili CSS, con codice di convalida completo.


- [Riferimento per l’implementazione](https://ariakit.com/components/combobox)
- [Fonte](https://ariakit.com/guide/styling)
- [Fonte](https://ariakit.com/reference/combobox-provider)
- [Leggi la specifica di supporto](https://ariakit.com/guide/styling)
- [Leggi la specifica di supporto](https://ariakit.com/reference/combobox-provider)
- [Leggi la specifica di supporto](https://ariakit.com/components/combobox)
- [Leggi la specifica di supporto](https://ariakit.com/examples/combobox-group)
- [Leggi la specifica di supporto](https://ariakit.com/components/button)
- [Leggi la specifica di supporto](https://ariakit.com/reference/combobox-popover)
- [Riferimento del codice](https://ariakit.com/components/combobox)
- [Riferimento del codice](https://ariakit.com/guide/styling)
- [Combobox Composizione nativa e comportamento da tastiera.](https://ariakit.com/components/combobox)
- [Provider Input e stato di selezione controllati.](https://ariakit.com/reference/combobox-provider)
- [Opzioni raggruppate Gruppi di risultati accessibili.](https://ariakit.com/examples/combobox-group)
- [Elemento API Comportamento di disabilitazione e selezione.](https://ariakit.com/reference/combobox-item)
- [Popover API Posizionamento in base a larghezza e margine interno.](https://ariakit.com/reference/combobox-popover)
- [Stile Primitive senza stili e attributi di stato.](https://ariakit.com/guide/styling)
- [Button Primitiva di azione accessibile.](https://ariakit.com/components/button)