# sistema di design Bits UI

## Bits UI Anteprima dell’interfaccia del sistema di design

Seleziona un controllo, esamina lo stato misto del controllo collettivo, verifica l’avanzamento incompleto, quindi completa e salva la lista di controllo locale.

## Bits UI Riferimento di design del sistema di design

Bits UI 2.19.5 con Svelte 5.57.1. Bits UI è headless: tutti i colori, i caratteri e i valori di spaziatura --app-* sono configurazioni originali esplicite incluse in questo esempio, non token di design ufficiali di Bits UI. Gli attributi dei dati nativi e le proprietà dei componenti sono identificati separatamente.

### Configurazione semantica originale di CSS

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --app-canvas | #f4f3f8 | Sfondo della pagina. |
| --app-surface | #ffffff | Superficie del pannello e della finestra di dialogo. |
| --app-ink | #2d2938 | Testo principale. |
| --app-muted | #746d80 | Testo di supporto. |
| --app-line | #e3dfeb | Divisori e bordi. |
| --app-action | #604c88 | Controlli selezionati e azioni principali. |
| --app-on-action | #fff | Testo sui pulsanti di azione. |
| --app-focus | #9a80ce | Indicatore di focus visibile. |
| --app-soft | #eee8f7 | Ruolo facoltativo per una superficie tenue. |
### Spaziatura e geometria originali

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --app-space-1 | 4px | Unità di spaziatura nominale più piccola. |
| --app-space-2 | 8px | Spaziatura compatta. |
| --app-space-3 | 12px | Spazio tra controllo ed etichetta. |
| --app-space-4 | 16px | Rientro del pannello per schermi stretti. |
| --app-space-6 | 24px | Rientro del pannello e spazio tra colonne su desktop. |
| --app-space-8 | 32px | Rientro della pagina su desktop. |
| Checkbox geometry | 22×22px; 5px radius; 1px border | Stile originale esplicito dei controlli. |
| Focus ring | 3px solid #9a80ce; 3px offset | Applicato al focus dei pulsanti visibile da tastiera. |
| Dialog width | min(440px, 100% − 28px) | Geometria esplicita e responsiva della sovrapposizione. |
| Dialog maximum height | 100vh − 28px with overflow:auto | Vincolo del viewport applicato solo alla sovrapposizione; nessun adattamento all’altezza della pagina. |
| Type hierarchy | 34px title / 29px mobile; 16px accordion; 13px checks; 12px guidance | Gerarchia originale basata sui font di sistema. |
### Contratti dei componenti nativi

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Checkbox.Root checked | boolean | Stato completato o incompleto. |
| Checkbox.Root indeterminate | boolean | Il controllo collettivo espone uno stato misto quando alcuni controlli sono selezionati. |
| Checkbox data-state | checked / unchecked / indeterminate | Usato direttamente dal foglio di stile. |
| Accordion.Root type | multiple | Possono restare aperte più sezioni di revisione. |
| Accordion value | string[] | Elenco di ID dei gruppi espansi, associato a Svelte. |
| Dialog.Root open | boolean, two-way bound | Controlla la visibilità della revisione. |
| Dialog.Title / Description | Native title and description relationships | Non servono ID ARIA duplicati inseriti manualmente. |
| Dialog.Portal | Overlay and content rendered outside the normal panel | Evita il ritaglio seguendo il flusso del documento del pannello. |
## Sistema di design Bits UI Guida completa

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 Bits UI Componi parti native attorno allo stato di Svelte 5

### Comporre parti native mantenendo lo stato in Svelte 5

> La checklist usa $state per le singole risposte, gli ID delle sezioni espanse e la visibilità della finestra di dialogo. Un conteggio di completamento $derived alimenta sia l’avanzamento visibile sia la casella di controllo generale. In questo modo, la fonte di verità risiede in un unico modello Svelte, mentre Bits UI fornisce l’interazione nativa per ciascun componente.

Checkbox, Accordion e Dialog sono composti a partire dalle rispettive parti. La finestra di dialogo di revisione non deve gestire le risposte della checklist e un accordion non deve cancellarle quando viene chiuso. Questa separazione è il punto di partenza utile per un modulo con più sezioni: il modello mantiene i dati anche quando cambiano le parti dell’interfaccia visibili.

Leggi la specifica di supporto

## Sistema di design Bits UI Usa insieme le sorgenti dei componenti e degli stili di Svelte 5

### Usare insieme le fonti dei componenti e degli stili di Svelte 5

L’esempio usa le rune di Svelte 5: $state per i gruppi, le sezioni espanse, la visibilità della finestra di dialogo e lo stato di salvataggio; $derived per il conteggio di completamento. Bits UI 2.19.5 viene importato direttamente. Non sono necessari plugin Tailwind, provider di temi o librerie di icone per ottenere questo stile visivo originale.

App.svelte e style.css, nella loro versione completa, funzionano in un progetto Svelte standard basato su Vite. Il punto d’ingresso usa mount di Svelte, invece del costruttore new App, ormai superato. Quando trasferisci l’esempio, mantieni insieme la sintassi delle rune del componente e la dipendenza Bits UI 2.19.5: i binding e i callback mostrati qui non sono un API di un componente Svelte precedente.

Leggi la specifica di supporto

## Sistema di design Bits UI Ricava il vero stato misto dai singoli controlli

### Derivare uno stato misto effettivo dai singoli controlli

Sei controlli Boolean sono distribuiti in tre gruppi. Il controllo generale risulta selezionato solo quando tutti e sei sono attivi e assume lo stato indeterminato quando il conteggio è compreso tra uno e cinque. Il callback onCheckedChange aggiorna tutti i controlli, così lo stato misto è un risultato calcolato, anziché un flag memorizzato separatamente che potrebbe non essere più sincronizzato.

I singoli controlli chiamano una semplice funzione di modifica che aggiorna il modello e annulla il feedback di salvataggio. Dopo aver selezionato un controllo, la casella nativa generale renderizzata espone aria-checked=mixed. Il foglio di stile reagisce a data-state=checked e data-state=indeterminate, mantenendo comportamento e presentazione associati allo stesso stato nativo.

1. Seleziona il primo controllo relativo agli indicatori di focus e osserva il trattino del controllo generale.

2. Apri la checklist di revisione e verifica che Salva sia disattivato finché la revisione non è completa.

3. Torna indietro, seleziona tutti i controlli e salva lo stato locale completo.

Leggi la specifica di supporto

## Sistema di design Bits UI Consenti sezioni indipendenti senza perdere le risposte

### Consentire sezioni indipendenti senza perdere le relative risposte

Accordion.Root usa type=multiple e un array associato degli ID dei gruppi espansi. All’avvio, le sezioni sono espanse, mentre Correzione del modulo e Feedback dei risultati possono essere aperte indipendentemente. La chiusura di una sezione non cancella i relativi controlli, perché i loro valori risiedono nello stato del componente genitore.

Ogni trigger mostra il conteggio dei controlli completati nel proprio gruppo, così l’avanzamento resta visibile anche quando il contenuto è compresso. Le parti native Header, Trigger e Content mantengono la relazione prevista e il comportamento da tastiera. Il simbolo più ruota in base a data-state del trigger e rispetta le preferenze di movimento ridotto, senza gestire l’espansione tramite un handler click separato.

Leggi la specifica di supporto

## Sistema di design Bits UI Componi l’anatomia completa della finestra di dialogo e affidale la gestione del focus

### Comporre la struttura completa della finestra di dialogo e affidarle la gestione del focus

La revisione usa Dialog.Root, Trigger, Portal, Overlay, Content, Title, Description e Close. Titolo e descrizione sono parti native effettive, così Bits UI può stabilire le relazioni di accessibilità. Il portal colloca l’overlay al di fuori del normale flusso del pannello della checklist.

Il contenuto ha una larghezza responsiva limitata e un’altezza massima applicata solo all’overlay, con scorrimento per le revisioni più lunghe. Escape chiude la finestra di dialogo senza cancellare la checklist. Mantieni disponibile il trigger come destinazione per il ripristino del focus, invece di rimuoverlo all’apertura dell’overlay.

Leggi la specifica di supporto

## Sistema di design Bits UI Rendi esplicite e riutilizzabili le regole visive dell’applicazione

### Rendere esplicite e riutilizzabili le regole visive dell’applicazione

CSS associa gli stati nativi checked e indeterminate allo stesso ruolo di azione, ma usa glifi diversi per ciascuno. Il ruolo del focus, distinto, rappresenta la posizione da tastiera: un controllo può restare visibilmente selezionato e mostrare al tempo stesso dove avverrà la prossima azione da tastiera.

La scala di spaziatura definita comprende quattro, otto, dodici, sedici, ventiquattro e trentadue pixel. Nei pannelli si usano ventiquattro pixel su desktop e sedici sugli schermi stretti. La tabella delle specifiche documenta queste scelte concrete come configurazione originale, così chi legge può riprodurle o sostituirle senza confondere lo stile dimostrativo con una garanzia del pacchetto.

Leggi la specifica di supporto

## Sistema di design Bits UI Distingui una selezione manuale dall’esito di un test automatico

### Distinguere una selezione manuale dal risultato di un test automatizzato

La checklist registra le selezioni effettuate da chi legge. Non esamina un’altra pagina, non esegue test da tastiera e non certifica la conformità all’accessibilità. Sia il testo introduttivo sia la descrizione della revisione chiariscono esplicitamente questi limiti, necessari perché i sei controlli riguardano comportamenti di accessibilità reali.

Salva è disattivato finché tutti e sei i controlli non sono selezionati. Il messaggio di salvataggio specifica che sono stati selezionati tutti e sei i controlli da chi legge e che il risultato è locale. È comunque possibile aprire una revisione parziale per esaminare ciò che manca, ma non si può ottenere un messaggio di revisione completata. Questa distinzione dà significato alle transizioni di stato dell’esempio.

Leggi la specifica di supporto

## Sistema di design Bits UI Cancella i messaggi di completamento quando cambiano i dati

### Cancellare i messaggi di completamento ogni volta che cambiano le prove

Qualsiasi modifica, individuale o generale, cancella lo stato di salvataggio. In questo modo, una conferma di completamento non resta visibile dopo la rimozione di un controllo. L’azione Cancella tutto ripristina anche la sezione inizialmente espansa e chiude la finestra di dialogo di revisione, riportando tutti gli stati correlati a una condizione iniziale nota.

L’area di stato si trova fuori dall’overlay, quindi il messaggio di salvataggio resta nel documento dopo la chiusura della finestra di dialogo. Descrive lo stato locale della pagina e non suggerisce che sia stato inviato un rapporto. Ricaricando la pagina, la checklist viene cancellata: una scelta adatta a questa dimostrazione autonoma.

Leggi la specifica di supporto

## Sistema di design Bits UI Collega le parti dei componenti alle etichette visibili

### Collega le parti dei componenti alle etichette visibili

Ogni casella di controllo ha un ID stabile e un’etichetta visibile associata. Lo stato selezionato o indeterminato è rappresentato dal controllo nativo; il segno di spunta e il trattino sono decorativi. Associa al controllo generale sia il valore Boolean selezionato sia il valore indeterminato derivato, in modo che una selezione parziale non venga annunciata come un normale elemento non selezionato.

Dialog.Title e Dialog.Description forniscono il nome e la spiegazione della revisione tramite l’anatomia nativa. Il portal separa l’overlay dal layout dell’accordion, mentre Dialog.Close resta l’azione esplicita per chiuderlo. L’area di stato esterna conserva il risultato salvato dopo la chiusura dell’overlay, evitando che vada perso insieme al contenuto della finestra di dialogo.

- Associa l’etichetta visibile al relativo controllo.

- Mantieni un anello focus-visible ben visibile dopo aver applicato stili personalizzati.

- Non rimuovere le parti del titolo o della descrizione quando personalizzi lo stile di una finestra di dialogo.

Leggi la specifica di supporto

## Sistema di design Bits UI Esempi di componenti

### Checklist completa in Svelte 5

Composizione nativa di Bits UI con modelli $state/$derived, caselle di controllo controllate e finestra di dialogo di revisione basata su portal.

```
<script>
import {Accordion,Checkbox,Dialog} from 'bits-ui';
let groups=$state([{id:'keyboard',name:'Keyboard flow',description:'Move through the interface without a pointer.',checks:[{id:'focus',label:'Every action has a visible focus indicator.',done:false},{id:'order',label:'Focus follows the visual reading order.',done:false}]},{id:'forms',name:'Form correction',description:'Make a mistake and recover from it.',checks:[{id:'labels',label:'Each input has a persistent visible label.',done:false},{id:'errors',label:'Errors identify the field and explain the correction.',done:false}]},{id:'feedback',name:'Result feedback',description:'Confirm that the outcome is understandable.',checks:[{id:'status',label:'A status message describes the completed action.',done:false},{id:'color',label:'Meaning remains clear without color alone.',done:false}]}]);
let expanded=$state(['keyboard']),open=$state(false),saved=$state(false);
const complete=$derived(groups.reduce((sum,g)=>sum+g.checks.filter(c=>c.done).length,0));
function change(check,value){check.done=value;saved=false}
function all(value){groups.forEach(g=>g.checks.forEach(c=>c.done=value));saved=false}
function reset(){all(false);expanded=['keyboard'];open=false}
</script>
<main class="check-shell"><header><p class="eyebrow">INTERFACE REVIEW · MANUAL CHECKLIST</p><h1>Check the experience between the screens.</h1><p>Work through six practical checks, then review what you have marked. This is a personal checklist, not an automated accessibility test.</p></header><div class="check-layout"><section class="check-panel"><div class="bulk"><Checkbox.Root id="all-checks" checked={complete===6} indeterminate={complete>0&&complete<6} onCheckedChange={all} class="checkbox"><span aria-hidden="true">{complete===6?'✓':complete>0?'−':''}</span></Checkbox.Root><label for="all-checks">Mark all checks</label><span class="count">{complete}/6</span></div><Accordion.Root type="multiple" bind:value={expanded} class="accordion">{#each groups as group}<Accordion.Item value={group.id} class="accordion-item"><Accordion.Header class="accordion-heading"><Accordion.Trigger class="accordion-trigger"><span>{group.name}<small>{group.checks.filter(c=>c.done).length} of 2 checked</small></span><span class="plus" aria-hidden="true">+</span></Accordion.Trigger></Accordion.Header><Accordion.Content class="accordion-content"><p class="group-description">{group.description}</p>{#each group.checks as check}<div class="check-row"><Checkbox.Root id={check.id} checked={check.done} onCheckedChange={value=>change(check,value)} class="checkbox"><span aria-hidden="true">{check.done?'✓':''}</span></Checkbox.Root><label for={check.id}>{check.label}</label></div>{/each}</Accordion.Content></Accordion.Item>{/each}</Accordion.Root><Dialog.Root bind:open><Dialog.Trigger class="primary">Review checklist</Dialog.Trigger><Dialog.Portal><Dialog.Overlay class="overlay"/><Dialog.Content class="dialog"><Dialog.Title class="dialog-title">Your review snapshot</Dialog.Title><Dialog.Description class="dialog-description">{complete} of 6 checks are marked. Saving records your own review state; it does not certify the interface.</Dialog.Description><ul class="review-summary">{#each groups as group}<li><strong>{group.name}</strong><span>{group.checks.filter(c=>c.done).length} / 2</span></li>{/each}</ul>{#if complete<6}<p class="remaining">Return to the checklist to finish the remaining {6-complete} checks.</p>{/if}<div class="dialog-actions"><Dialog.Close class="secondary">Back to checks</Dialog.Close><button class="primary" disabled={complete<6} onclick={()=>{saved=true;open=false}}>Save completed review</button></div></Dialog.Content></Dialog.Portal></Dialog.Root><button class="reset" onclick={reset}>Clear all checks</button><p class="result" role="status">{saved?'Completed review saved locally. All six checks were marked by you.':'Progress stays in this preview until you reload.'}</p></section><aside class="check-notes"><div class="focus-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="eyebrow">WHAT TO LOOK FOR</p><h2>Make the next action clear.</h2><p>A good check leaves evidence: where focus moved, what an error said, or how a result was announced.</p><dl><div><dt>Keyboard</dt><dd>Tab, Shift+Tab, Enter and Escape should support the relevant task.</dd></div><div><dt>Correction</dt><dd>Keep the user’s input and point to a specific next step.</dd></div><div><dt>Feedback</dt><dd>Describe the outcome in words as well as visual styling.</dd></div></dl></aside></div></main>
```

Riferimento del codice

- Il controllo principale ricava gli stati checked e indeterminate dai sei controlli individuali.

- Il salvataggio dipende dal completamento, non dall’apertura della finestra di dialogo.

- Questo foglio di lavoro manuale non esegue un audit di accessibilità.

### Configurazione visiva originale completa

Colori semantici denominati, scala di spaziatura, selettori nativi data-state e stile responsivo dell’overlay.

```
:root{--app-canvas:#f4f3f8;--app-surface:#ffffff;--app-ink:#2d2938;--app-muted:#746d80;--app-line:#e3dfeb;--app-action:#604c88;--app-on-action:#fff;--app-focus:#9a80ce;--app-soft:#eee8f7;--app-radius:12px;--app-space-1:4px;--app-space-2:8px;--app-space-3:12px;--app-space-4:16px;--app-space-6:24px;--app-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:var(--app-canvas);color:var(--app-ink)}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid var(--app-focus);outline-offset:3px}.check-shell{max-width:1080px;margin:auto;padding:var(--app-space-8)}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--app-muted)}h1{font-size:34px;line-height:1.15;max-width:710px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;max-width:640px;color:var(--app-muted)}.check-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--app-space-6);margin-top:28px}.check-panel{background:var(--app-surface);border:1px solid var(--app-line);border-radius:16px;padding:var(--app-space-6);min-width:0}.bulk{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;padding-bottom:24px}.count{margin-left:auto;color:var(--app-muted);font-size:12px}.checkbox{width:22px;height:22px;flex-shrink:0;border:1px solid #aaa1ba;background:white;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.checkbox[data-state=checked],.checkbox[data-state=indeterminate]{background:var(--app-action);border-color:var(--app-action);color:var(--app-on-action)}.accordion{margin-bottom:24px}.accordion-item{border-top:1px solid var(--app-line)}.accordion-item:last-child{border-bottom:1px solid var(--app-line)}.accordion-heading{margin:0;font-size:16px}.accordion-trigger{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:20px 0;color:var(--app-ink);font-weight:600}.accordion-trigger small{display:block;font-weight:400;font-size:11px;color:var(--app-muted);margin-top:6px}.plus{font-size:23px;font-weight:400;transition:transform .15s}.accordion-trigger[data-state=open] .plus{transform:rotate(45deg)}.accordion-content{padding:0 0 20px}.group-description{font-size:12px;line-height:1.6;color:var(--app-muted);margin:0 0 16px}.check-row{display:flex;align-items:flex-start;gap:12px;margin-top:14px}.check-row label{font-size:13px;line-height:1.6;cursor:pointer}.primary,.secondary{border:1px solid transparent;border-radius:8px;padding:12px 16px;font-size:13px;font-weight:600}.primary{background:var(--app-action);color:var(--app-on-action)}.secondary{background:white;color:var(--app-ink);border-color:var(--app-line)}.reset{border:0;background:transparent;color:var(--app-muted);font-size:12px;padding:12px}.result{font-size:12px;line-height:1.6;color:var(--app-muted);margin:18px 0 0}.check-notes{min-width:0;padding:0 4px}.check-notes h2{font:400 29px/1.2 Georgia,serif}.check-notes>p:not(.eyebrow){font-size:13px;line-height:1.7;color:var(--app-muted)}.check-notes dl>div{padding:14px 0;border-top:1px solid var(--app-line)}.check-notes dt{font-size:13px;font-weight:600}.check-notes dd{font-size:12px;line-height:1.7;color:var(--app-muted);margin:5px 0 0}.focus-art{height:165px;background:#e6e0ef;border-radius:12px;position:relative;overflow:hidden;margin-bottom:24px}.focus-art span{position:absolute;width:140px;height:85px;left:35px;top:44px;background:white;border-radius:8px;transform:rotate(-9deg);box-shadow:0 0 0 6px #b3a3cd}.focus-art i{position:absolute;width:75px;height:13px;background:#b7adc6;left:60px;top:61px;transform:rotate(-9deg)}.focus-art b{position:absolute;width:72px;height:28px;background:#695587;left:87px;top:91px;border-radius:5px;transform:rotate(-9deg)}.overlay{position:fixed;inset:0;background:#21193180;z-index:20}.dialog{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 28px));max-height:calc(100vh - 28px);overflow:auto;background:white;padding:24px;border-radius:14px;box-shadow:0 20px 80px #23193640}.dialog-title{font-size:23px;margin:0 0 12px}.dialog-description,.remaining{font-size:13px;line-height:1.7;color:var(--app-muted)}.review-summary{padding:0;list-style:none}.review-summary li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--app-line);font-size:13px}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}@media(max-width:740px){.check-layout{grid-template-columns:minmax(0,1fr)}.check-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.check-shell{padding:14px}.check-panel,.dialog{padding:16px}.check-panel>.primary,.dialog-actions>*{width:100%}}@media(prefers-reduced-motion:reduce){.plus{transition:none}}
```

Riferimento del codice

- Si tratta di variabili --app-* originali, non di una palette ufficiale di Bits.

- Sono inclusi stili per il focus e per il movimento ridotto.

- Solo l’overlay usa un’altezza massima relativa alla viewport.

## Sistema di design Bits UI Configurazione dell’agente

### Punto di partenza per l’implementazione

Verificato con Bits UI 2.19.5 e Svelte 5.57.1. È necessario il foglio di stile originale completo; Bits UI non fornisce colori predefiniti né un layout di pagina.

```
// npm create vite@latest bits-review -- --template svelte
// cd bits-review && npm install
// npm install svelte@5.57.1 bits-ui@2.19.5
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### Un prompt per il tuo progetto

```
Usa Bits UI 2.19.5 e Svelte 5 per realizzare l’interfaccia di revisione manuale fornita. Mantieni sei controlli in tre sezioni Accordion, ricava gli stati checked/indeterminate del controllo generale dalle singole risposte e conserva le risposte quando le sezioni vengono compresse. Componi tutte le parti di Dialog per la revisione, consentendo di esaminare anche una checklist incompleta e disattivando Salva finché tutti e sei i controlli non sono selezionati. Ogni modifica a una risposta annulla il feedback di salvataggio; Cancella tutto ripristina l’espansione iniziale e chiude la revisione. Includi CSS completo e descrivi i risultati come controlli locali selezionati da chi legge, non come certificazione automatica dell’accessibilità.
```

## Sistema di design Bits UI Fonti e ambito

Bits UI 2.19.5 con Svelte 5.57.1. Token e illustrazioni originali dell’applicazione. È una checklist manuale con stato locale, non un audit o una certificazione automatica dell’accessibilità.

- Per iniziare Configurazione di Svelte e integrazione del pacchetto.

- Stile Limiti dello stile headless e attributi data.

- Checkbox Stato selezionato, indeterminato e controllato.

- Accordion Espansione multipla e anatomia nativa.

- Dialog Portal, titolo, descrizione, focus e chiusura.

- Gestione dello stato Binding e valori controllati.

## Sistema di design Bits UI Risorse correlate

### 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.

### Chakra UI

Un riferimento a Chakra UI v3 per token, ruoli semantici dei colori, ricette e componenti composti per i moduli. Esamina le scale effettive di spaziatura e tipografia, poi prova un modulo nativo per il profilo dell’area di lavoro con convalida, simulazione del salvataggio non riuscito e aspetto chiaro o scuro.


- [Riferimento per l’implementazione](https://www.bits-ui.com/docs/components/checkbox)
- [Fonte](https://www.bits-ui.com/docs/styling)
- [Fonte](https://www.bits-ui.com/docs/components/dialog)
- [Leggi la specifica di supporto](https://www.bits-ui.com/docs/styling)
- [Leggi la specifica di supporto](https://www.bits-ui.com/docs/getting-started)
- [Leggi la specifica di supporto](https://www.bits-ui.com/docs/components/checkbox)
- [Leggi la specifica di supporto](https://www.bits-ui.com/docs/components/accordion)
- [Leggi la specifica di supporto](https://www.bits-ui.com/docs/components/dialog)
- [Leggi la specifica di supporto](https://www.bits-ui.com/docs/state-management)
- [Riferimento del codice](https://www.bits-ui.com/docs/components/checkbox)
- [Riferimento del codice](https://www.bits-ui.com/docs/styling)
- [Per iniziare Configurazione di Svelte e integrazione del pacchetto.](https://www.bits-ui.com/docs/getting-started)
- [Stile Limiti dello stile headless e attributi data.](https://www.bits-ui.com/docs/styling)
- [Checkbox Stato selezionato, indeterminato e controllato.](https://www.bits-ui.com/docs/components/checkbox)
- [Accordion Espansione multipla e anatomia nativa.](https://www.bits-ui.com/docs/components/accordion)
- [Dialog Portal, titolo, descrizione, focus e chiusura.](https://www.bits-ui.com/docs/components/dialog)
- [Gestione dello stato Binding e valori controllati.](https://www.bits-ui.com/docs/state-management)