# Sistema di progettazione Kobalte

## Anteprima dell’interfaccia del sistema di progettazione sistema di design Kobalte

Ridimensiona le quantità degli ingredienti, raccogli gli elementi e fissa localmente una ricetta originale.

## Riferimento di progettazione del sistema di progettazione sistema di design Kobalte

Kobalte 0.13.14 fornisce primitive headless per Solid, non una scala visiva canonica. Ogni colore e dimensione recipe-* riportati di seguito costituisce la configurazione originale completa dell’applicazione. I nomi API e gli attributi di stato sono stati verificati nel pacchetto installato e nella documentazione ufficiale dei componenti.

### Colori semantici originali

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --recipe-canvas | #f6f2ec | Area esterna |
| --recipe-surface | #fffefa | Pannelli della ricetta e delle porzioni |
| --recipe-ink | #403a30 | Testo principale |
| --recipe-muted | #807465 | Testo di supporto |
| --recipe-line | #e6ded2 | Separatori e bordi |
| --recipe-action | #95612f | Testo delle azioni e della casella selezionata |
| --recipe-on-action | #fff | Primo piano dell’azione a tinta piena |
| --recipe-focus | #b88955 | Indicatore di focus da tastiera visibile |
| --recipe-soft | #f1e4d3 | Sfondo del controllo incrementale e del pulsante fissato premuto |
### Tipografia e dimensioni originali

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Body | system-ui, sans-serif | Nessun font da scaricare |
| Page heading | 34px / 1.15; 29px narrow | Gerarchia originale |
| Recipe title | Georgia, serif; 30px / 1.2 | Accento editoriale originale |
| Ingredient copy | 13px / 1.5; 12px narrow | Etichette leggibili su più righe |
| --recipe-space-1 / 2 / 3 | 4px / 8px / 12px | Spazi ridotti |
| --recipe-space-4 / 6 / 8 | 16px / 24px / 32px | Spaziatura di pannelli e pagina |
| Panel radius | 16px | Geometria originale delle superfici |
| Checkbox control | 21 × 21px; 5px radius | Indicatore visibile originale |
| Stepper trigger | 42px wide | Trigger nativo con geometria originale |
| Layout breakpoint | 760px | Due colonne diventano una |
| Focus ring | 3px; 3px offset | Trattamento visibile originale per la tastiera |
### Contratto di stato del componente nativo

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| NumberField.rawValue | number | Stato aritmetico anziché testo formattato |
| NumberField.onRawValueChange | (value: number) => void | Aggiorna le quantità e azzera le selezioni non più valide |
| minValue / maxValue / step | 1 / 8 / 1 | Limiti dell’applicazione passati al campo numerico nativo |
| formatOptions.maximumFractionDigits | 0 | Visualizzazione delle porzioni intere |
| validationState | valid \| invalid | La validità dell’applicazione si riflette nel campo nativo |
| Checkbox.checked / onChange | boolean / callback | Selezione controllata degli ingredienti |
| Checkbox data attributes | data-checked; data-focus-visible | Stilizza gli stati nativi di selezione e focus da tastiera |
| ToggleButton.pressed / onChange | boolean / callback | Fissaggio locale controllato |
| ToggleButton data-pressed | present when pressed | Stile a tinta piena per l’elemento fissato localmente |
## Guida completa del sistema di progettazione sistema di design Kobalte

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 progettazione sistema di design Kobalte: collega i componenti Kobalte ai segnali Solid

### Collega i componenti Kobalte ai segnali Solid

> Il componente usa i segnali Solid per le porzioni, gli ingredienti raccolti e l’elemento fissato. createMemo ricava la validità dal segnale numerico e For visualizza una raccolta stabile di ingredienti. Le proprietà controllate di Kobalte leggono direttamente questi segnali; gli aggiornamenti non richiedono un provider di moduli separato né un adattatore di stato in stile React.

NumberField, Checkbox e ToggleButton vengono importati dai rispettivi entry point dei componenti. Hanno funzioni diverse: il campo numerico gestisce l’input numerico modificabile, ogni casella di controllo rappresenta un ingrediente raccolto e il pulsante a commutazione mantiene lo stato dell’elemento fissato della ricetta. Le regole aritmetiche e di invalidazione restano nelle funzioni dell’applicazione, anziché essere incorporate nei selettori visivi.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Kobalte: mantieni separati lo stato numerico e il testo formattato

### Mantieni separati lo stato numerico e il testo formattato

NumberField riceve rawValue={portions()} e onRawValueChange={update}. Il segnale numerico alimenta direttamente la moltiplicazione, mentre il campo gestisce la formattazione e la modifica da parte dell’utente. Riutilizzare il testo formattato visualizzato nei calcoli introdurrebbe ipotesi di parsing relative ai separatori o alle impostazioni locali, già gestite dalla primitiva nativa.

L’esempio consente da una a otto porzioni intere, con un incremento di uno e maximumFractionDigits impostato a zero. Un predicato calcolato separato verifica comunque che il valore sia finito, intero e compreso nei limiti, perché un campo modificabile può contenere temporaneamente un valore incompleto o non valido. Se il valore non è valido, i totali mostrano un trattino lungo e le caselle degli ingredienti sono disabilitate. L’interfaccia non presenta una quantità plausibile ma errata come se fosse un input valido dell’utente.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Kobalte: componi il campo con la relativa etichetta e i messaggi nativi

### Componi il campo con la relativa etichetta e i messaggi nativi

Il campo numerico contiene Label, DecrementTrigger, Input, IncrementTrigger, Description ed ErrorMessage. La descrizione visibile spiega sia l’intervallo sia le conseguenze della modifica delle porzioni. I trigger hanno etichette significative, Meno porzioni e Più porzioni, così i simboli meno e più non devono costituire da soli l’intero nome accessibile.

validationState passa da valido a non valido in base al predicato dell’applicazione. ErrorMessage appartiene al campo nativo, non è un paragrafo separato collocato altrove nella pagina. Per un modulo inviato, Kobalte fornisce anche HiddenInput per la serializzazione del valore grezzo; questo esempio locale non lo include perché non dispone di un endpoint di invio né di un payload del modulo.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Kobalte: gestisci la selezione degli ingredienti con un Set immutabile

### Gestisci la selezione degli ingredienti con un Set immutabile

Ogni ingrediente usa l’anatomia completa di Checkbox: Input, Control, Indicator e Label. L’input effettivo mantiene la semantica e l’interazione da tastiera, mentre il controllo visibile mostra il segno di spunta e gli stili di stato originali. L’etichetta include sia il nome dell’ingrediente sia la quantità, così la quantità fa parte dell’elemento che l’utente sta raccogliendo.

mark crea un nuovo Set a partire dalla selezione precedente, prima di aggiungere o rimuovere un ID. Modificare soltanto il Set esistente non garantirebbe lo stesso aggiornamento affidabile del segnale. Il conteggio visualizzato legge la dimensione del Set e ogni Checkbox controlla l’appartenenza tramite l’ID stabile dell’ingrediente. Una variazione delle porzioni azzera l’intera selezione, perché aver raccolto 320 grammi non dimostra di aver soddisfatto il nuovo fabbisogno di 400 grammi.

- Associa ogni nome di ingrediente visibile a Checkbox.Label.

- Mantieni Checkbox.Input anche quando il quadrato visibile ha uno stile personalizzato.

- Usa ID stabili per la selezione e crea un nuovo Set per ogni aggiornamento.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Kobalte: usa un Toggle per una scelta locale persistente

### Usa un Toggle per una scelta locale persistente

L’elemento da fissare è un ToggleButton con pressed e onChange, non un normale pulsante che cambia soltanto la didascalia. Il suo stato premuto si riflette nella semantica nativa e nel selettore data-pressed. L’etichetta diventa Fissata con un segno di spunta e lo stato vicino chiarisce che la modifica riguarda solo l’anteprima locale.

Fissare la ricetta non modifica le quantità degli ingredienti né la selezione. Cambiare le porzioni azzera le caselle degli ingredienti, ma mantiene l’elemento fissato perché la ricetta è la stessa. Ripristina la ricetta predefinita reimposta insieme tutti e tre gli aspetti del modello: quattro porzioni, un Set di ingredienti vuoto e un elemento non fissato. Questi diversi ambiti di ripristino seguono il significato dello stato, invece di azzerare tutto a ogni interazione.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Kobalte: fornisci ai controlli headless una configurazione visiva riproducibile

### Fornisci ai controlli headless una configurazione visiva riproducibile

Il foglio di stile della ricetta distingue la superficie di modifica dell’input numerico, i relativi trigger di incremento e decremento e il ruolo di selezione della casella di controllo. Il testo attenuato degli ingredienti viene applicato solo dopo la selezione; le quantità restano leggibili, così l’utente può confrontare gli importi raccolti con il numero attuale di porzioni.

La spaziatura usa quattro, otto, dodici, sedici, ventiquattro e trentadue pixel. La gerarchia tipografica originale abbina un sans serif di sistema per i controlli a Georgia per il titolo della ricetta. Una casella di controllo visiva di ventuno pixel è accanto a un’etichetta associata completa, che resta l’area di attivazione utile. Tutti questi valori esatti sono inclusi nel CSS completo, così chi legge può riprodurre l’esempio senza dover stimare le misure da uno screenshot.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Kobalte: adatta la composizione senza nascondere informazioni

### Adatta la composizione senza nascondere informazioni

Il layout ampio affianca una scheda della ricetta flessibile a un pannello delle porzioni di 280 pixel. A 760 pixel si dispone su un’unica colonna. L’intestazione della scheda può andare a capo, le etichette degli ingredienti possono continuare su un’altra riga e la quantità resta compatta e su una sola riga. Al punto di interruzione più stretto, la spaziatura interna dei pannelli e il carattere delle etichette si riducono leggermente, invece di nascondere le quantità.

L’illustrazione dell’insalata è originale CSS ed è contrassegnata come decorativa. Il nome della ricetta, il numero di porzioni e le quantità degli ingredienti comunicano le informazioni indipendentemente dall’immagine. Quando cambi l’illustrazione o riduci la larghezza della scheda, mantieni tutte le etichette complete degli ingredienti e le rispettive quantità: sono gli input effettivi dell’attività di raccolta.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Kobalte: gestisci le variazioni di quantità come aggiornamenti di stati dipendenti

### Gestisci le variazioni di quantità come aggiornamenti di stati dipendenti

Ogni porzione richiede 250 grammi complessivi dei cinque ingredienti. Passando da quattro a cinque porzioni, il totale visualizzato passa da 1.000 a 1.250 grammi e la quantità richiesta di arance da 320 a 400 grammi. Le caselle già selezionate vengono azzerate perché si riferivano alle quantità precedenti; l’elemento fissato resta invariato perché la ricetta è la stessa.

La funzione di aggiornamento confronta innanzitutto il valore in ingresso con il segnale corrente usando Object.is. Un callback che non comporta modifiche non deve azzerare la checklist né annunciare un cambio di quantità. I valori non validi escludono le quantità e disabilitano la raccolta; il messaggio di errore spiega quindi l’intervallo accettato. Queste regole rendono osservabili le modifiche intermedie senza consentire a un numero non valido di generare un totale fuorviante.

1. Seleziona i segmenti di arancia per quattro porzioni.

2. Aumenta a cinque e verifica che ci siano 400 g di arancia, 1.250 g in totale e zero elementi raccolti.

3. Fissa la ricetta, quindi ripristina i valori predefiniti e verifica che tutto lo stato locale venga azzerato.

Leggi la specifica di supporto

## Sistema di design Kobalte: usa una build Solid e includi l’intero foglio di stile

### Usa una build Solid e includi l’intero foglio di stile

La configurazione usa il template Solid di Vite, blocca le versioni verificate di Solid e Kobalte e monta l’applicazione in un elemento radice esplicito. Il componente e il foglio di stile mostrati sopra sono file completi. Per questo esempio non servono un provider di temi, un pacchetto di icone, un font esterno o un backend.

Quando integri l’esempio in un’altra applicazione, mantieni allineati il compilatore del framework e la generazione dei componenti. Una trasformazione di React non convertirà JSX di Solid in un’applicazione Kobalte corretta. Analogamente, prima di sostituire la dipendenza bloccata, verifica un’eventuale versione principale futura di Kobalte API consultando la relativa documentazione. Le quantità della ricetta e la palette sono dati di esempio dell’applicazione: modificarli non richiede di cambiare il contratto delle primitive native.

Leggi la specifica di supporto

## Kobalte Esempi di componenti del sistema di design

### Componente reattivo completo per la ricetta

Campo numerico nativo, struttura della checkbox e pulsante di attivazione con gestione esplicita degli errori e del ripristino.

```
import {createSignal,createMemo,For} from 'solid-js';
import {NumberField} from '@kobalte/core/number-field';
import {Checkbox} from '@kobalte/core/checkbox';
import {ToggleButton} from '@kobalte/core/toggle-button';
export default function App(){
 const[portions,setPortions]=createSignal(4),[checked,setChecked]=createSignal(new Set()),[pinned,setPinned]=createSignal(false),[notice,setNotice]=createSignal('');
 const ingredients=[{id:'orange',name:'Orange segments',grams:80},{id:'beans',name:'Cooked white beans',grams:90},{id:'leaves',name:'Salad leaves',grams:25},{id:'fennel',name:'Thinly sliced fennel',grams:40},{id:'dressing',name:'Citrus dressing',grams:15}];
 const valid=createMemo(()=>Number.isFinite(portions())&&Number.isInteger(portions())&&portions()>=1&&portions()<=8);
 function update(value){if(Object.is(value,portions()))return;setPortions(value);setChecked(new Set());setNotice('Portions changed. Ingredient checks were cleared for the new quantities.')}
 function mark(id,value){setChecked(previous=>{const next=new Set(previous);value?next.add(id):next.delete(id);return next})}
 function reset(){setPortions(4);setChecked(new Set());setPinned(false);setNotice('Restored four portions and an unchecked ingredient list.')}
 return <main class="recipe-shell"><header><p class="eyebrow">KITCHEN NOTEBOOK · REACTIVE RECIPE CARD</p><h1>A brighter bowl, sized for your table.</h1><p>Change the portions, check the scaled ingredients and pin the recipe locally. The quantities are original sample data for this interface.</p></header><div class="recipe-layout"><section class="recipe-card"><div class="salad-art" aria-hidden="true"><div class="plate"><i/><b/><em/><span/><strong/></div></div><div class="recipe-heading"><div><p class="eyebrow">CITRUS & WHITE BEAN SALAD</p><h2>Fresh, crisp, generous.</h2></div><ToggleButton class="pin" pressed={pinned()} onChange={value=>{setPinned(value);setNotice(value?'Recipe pinned in this local preview.':'Recipe unpinned in this local preview.')}} aria-label="Pin recipe">{pinned()?'Pinned ✓':'Pin recipe'}</ToggleButton></div><p class="recipe-description">Sweet citrus, tender beans and crisp fennel. Use the checklist to gather the amounts for your chosen portion count.</p><div class="ingredient-title"><h3>Ingredients</h3><span>{checked().size} / 5 gathered</span></div><div class="ingredients"><For each={ingredients}>{ingredient=><Checkbox class="ingredient" checked={checked().has(ingredient.id)} onChange={value=>mark(ingredient.id,value)} disabled={!valid()}><Checkbox.Input/><Checkbox.Control class="check-control"><Checkbox.Indicator>✓</Checkbox.Indicator></Checkbox.Control><Checkbox.Label class="ingredient-label"><span>{ingredient.name}</span><strong>{valid()?ingredient.grams*portions()+' g':'—'}</strong></Checkbox.Label></Checkbox>}</For></div></section><aside class="portion-panel"><h2>Make it yours</h2><NumberField rawValue={portions()} onRawValueChange={update} minValue={1} maxValue={8} step={1} formatOptions={{maximumFractionDigits:0}} validationState={valid()?'valid':'invalid'} class="portion-field"><NumberField.Label class="field-label">Portions</NumberField.Label><div class="stepper"><NumberField.DecrementTrigger aria-label="Fewer portions">−</NumberField.DecrementTrigger><NumberField.Input/><NumberField.IncrementTrigger aria-label="More portions">+</NumberField.IncrementTrigger></div><NumberField.Description class="field-description">Choose 1–8 whole portions. Changing the quantity clears ingredient checks.</NumberField.Description><NumberField.ErrorMessage class="field-error">Enter a whole number from 1 to 8.</NumberField.ErrorMessage></NumberField><div class="portion-total"><span>Total ingredients</span><strong>{valid()?ingredients.reduce((s,x)=>s+x.grams,0)*portions()+' g':'—'}</strong></div><h3>A simple preparation order</h3><ol><li>Gather the scaled amounts and drain the cooked beans.</li><li>Combine the orange, fennel and leaves in a bowl.</li><li>Add the beans and dressing, then toss gently.</li></ol><button class="reset" onClick={reset}>Restore default recipe</button><p role="status" class="notice">{notice()||(pinned()?'Recipe pinned in this local preview.':'No shopping order or account update is created.')}</p></aside></div></main>
}
```

Riferimento del codice

- Usa il template Solid di Vite, non un compilatore JSX di React.

- rawValue contiene lo stato numerico; tutte le quantità degli ingredienti derivano da questo segnale.

- Quando cambiano le porzioni, l’insieme checked viene svuotato perché le quantità precedenti non sono più aggiornate.

### Configurazione visiva originale completa

Proprietà personalizzate semantiche, gerarchia tipografica, spaziatura, stili degli stati e illustrazione originale di CSS.

```
:root{--recipe-canvas:#f6f2ec;--recipe-surface:#fffefa;--recipe-ink:#403a30;--recipe-muted:#807465;--recipe-line:#e6ded2;--recipe-action:#95612f;--recipe-on-action:#fff;--recipe-focus:#b88955;--recipe-soft:#f1e4d3;--recipe-space-1:4px;--recipe-space-2:8px;--recipe-space-3:12px;--recipe-space-4:16px;--recipe-space-6:24px;--recipe-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;color:var(--recipe-ink);background:var(--recipe-canvas)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid var(--recipe-focus);outline-offset:3px}.recipe-shell{max-width:1090px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--recipe-muted)}h1{font-size:34px;line-height:1.15;max-width:700px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;color:var(--recipe-muted);max-width:630px}.recipe-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:28px}.recipe-card,.portion-panel{background:var(--recipe-surface);border:1px solid var(--recipe-line);border-radius:16px;padding:24px;min-width:0}.portion-panel{align-self:start}.salad-art{height:180px;background:#e8e4d5;border-radius:10px;position:relative;overflow:hidden;margin-bottom:24px}.plate{position:absolute;width:210px;height:210px;left:50%;top:18px;transform:translateX(-50%);border:18px solid #faf8f0;border-radius:50%;background:#dedcbf;box-shadow:0 10px 25px #5e584b1c}.plate i,.plate b,.plate em,.plate span,.plate strong{position:absolute;display:block}.plate i{width:85px;height:42px;border-radius:0 0 85px 85px;background:#dc9658;border:6px solid #f7c888;left:14px;top:18px;transform:rotate(-23deg)}.plate b{width:72px;height:36px;border-radius:0 0 72px 72px;background:#dc9658;border:6px solid #f7c888;left:75px;top:83px;transform:rotate(28deg)}.plate em{width:50px;height:77px;background:#83976a;border-radius:80% 0 80% 0;left:108px;top:4px;transform:rotate(20deg)}.plate span{width:30px;height:50px;background:#667f56;border-radius:80% 0 80% 0;left:25px;top:88px;transform:rotate(-23deg)}.plate strong{width:24px;height:34px;background:#fff3d7;border-radius:50%;left:80px;top:46px;box-shadow:-34px 14px 0 #fff3d7,25px 28px 0 #fff3d7}.recipe-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.recipe-heading h2{font:400 30px/1.2 Georgia,serif;margin:8px 0}.pin{border:1px solid var(--recipe-line);background:white;border-radius:999px;padding:9px 13px;font-size:11px;color:var(--recipe-action)}.pin[data-pressed]{background:var(--recipe-soft);border-color:var(--recipe-action)}.recipe-description{font-size:13px;line-height:1.7;color:var(--recipe-muted)}.ingredient-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}.ingredient-title h3{font-size:16px;margin:0}.ingredient-title span{font-size:11px;color:var(--recipe-muted)}.ingredients{margin-top:14px}.ingredient{display:flex;gap:12px;align-items:center;border-top:1px solid var(--recipe-line);padding:16px 0;cursor:pointer}.check-control{height:21px;width:21px;border:1px solid #b9ab98;border-radius:5px;flex-shrink:0;display:flex;justify-content:center;align-items:center;font-size:13px}.check-control[data-checked]{background:var(--recipe-action);color:white;border-color:var(--recipe-action)}.check-control[data-focus-visible]{outline:3px solid var(--recipe-focus);outline-offset:3px}.ingredient-label{display:flex;justify-content:space-between;gap:12px;width:100%;font-size:13px;line-height:1.5;cursor:pointer}.ingredient-label strong{white-space:nowrap;font-size:12px}.ingredient[data-checked] .ingredient-label>span{text-decoration:line-through;color:var(--recipe-muted)}.portion-panel>h2{font-size:20px;margin:0 0 24px}.field-label{font-size:13px;font-weight:600}.stepper{display:flex;margin-top:10px;border:1px solid var(--recipe-line);border-radius:8px;overflow:hidden}.stepper button{width:42px;flex-shrink:0;background:var(--recipe-soft);border:0;font-size:21px}.stepper input{width:100%;min-width:0;text-align:center;border:0;padding:12px 0;background:white;color:var(--recipe-ink)}.field-description{font-size:11px;line-height:1.7;color:var(--recipe-muted);margin:10px 0 0}.field-error{font-size:12px;color:#a73324}.portion-total{display:flex;justify-content:space-between;gap:12px;margin:24px 0;padding:18px 0;border-top:1px solid var(--recipe-line);border-bottom:1px solid var(--recipe-line);font-size:12px}.portion-total strong{font-size:19px;white-space:nowrap}.portion-panel h3{font-size:13px;line-height:1.6}.portion-panel ol{padding-left:18px;font-size:12px;line-height:1.7;color:var(--recipe-muted)}.portion-panel li{margin-bottom:12px}.reset{width:100%;padding:12px;border:1px solid var(--recipe-line);border-radius:8px;background:white;color:var(--recipe-action);font-size:12px;margin-top:16px}.notice{font-size:11px;line-height:1.7;color:var(--recipe-muted)}@media(max-width:760px){.recipe-layout{grid-template-columns:minmax(0,1fr)}.recipe-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.recipe-shell{padding:14px}.recipe-card,.portion-panel{padding:16px}.ingredient-label{gap:8px;font-size:12px}.ingredient{gap:8px}.ingredient-label strong{font-size:11px}.recipe-heading h2{font-size:27px}}
```

Riferimento del codice

- Questi valori recipe-* sono scelte originali dell’applicazione, non token ufficiali di Kobalte.

- Il foglio di stile completo include una composizione adattabile e indicatori di focus visibili.

## Kobalte Configurazione dell’agente per il sistema di design

### Punto di partenza per l’implementazione

Il template Solid di Vite fornisce il compilatore JSX richiesto da Solid. Gli esempi completi di App.jsx e style.css riportati sopra contengono tutto il codice e gli stili dell’applicazione; non servono provider o servizi esterni.

```
// npm create vite@latest kobalte-recipe -- --template solid
// cd kobalte-recipe && npm install
// npm install solid-js@1.9.15 @kobalte/core@0.13.14
// Save the complete examples as src/App.jsx and src/style.css.
// src/index.jsx:
import {render} from 'solid-js/web';
import App from './App.jsx';
import './style.css';
render(() => <App />, document.getElementById('app'));
// index.html: <div id="app"></div><script type="module" src="/src/index.jsx"></script>
// npm run dev
```

### Un prompt per il tuo progetto

```
Usa Kobalte 0.13.14 con Solid 1.9.15 per riprodurre la scheda della ricetta reattiva. Mantieni NumberField rawValue/onRawValueChange, i limiti da uno a otto, la convalida delle porzioni intere e la struttura completa Label/Description/ErrorMessage. Ricava i grammi degli ingredienti e i totali dal segnale delle porzioni; un effettivo cambio di quantità svuota l’insieme immutabile degli ID selezionati, ma mantiene la ricetta fissata. Mantieni le parti Checkbox native e ToggleButton pressed/onChange, disabilita la raccolta quando le quantità non sono valide e, al ripristino, imposta quattro porzioni, nessuna selezione e nessuna ricetta fissata. Includi la ricetta originale CSS completa; tutto lo stato rimane locale.
```

## Kobalte Fonti e ambito del sistema di design

Verificato con Kobalte 0.13.14 e Solid 1.9.15. Tutti i token recipe-*, l’illustrazione CSS e le quantità degli ingredienti sono dati originali dell’esempio. Fissare la ricetta e raccogliere gli ingredienti modificano solo lo stato locale; non sono collegati account, servizi di acquisto o archivi persistenti di ricette.

- Per iniziare Configurazione di Solid e importazioni dei componenti.

- Stile Stili headless e selettori degli stati.

- Campo numerico Valori numerici, limiti, struttura del campo e valore grezzo del modulo.

- Checkbox Input, Control, Indicator e Label.

- Pulsante di attivazione Stato pressed, callback e comportamento da tastiera.

## Kobalte Risorse correlate al sistema di design

### Mantine

Una guida di riferimento per Mantine 9, basata su una tabella nativa dei partecipanti e un drawer per la pianificazione. Esamina le scale effettive del tema, collega useForm a TextInput, Select, Checkbox e DatePickerInput e prova la convalida prima di aggiungere un record locale.

### Melt UI

I builder di store e azioni di Melt UI aggiungono comportamenti accessibili al markup Svelte che gestisci direttamente. Questa guida usa @melt-ui/svelte 0.86.6 per collegare i builder radio, slider e switch tramite attributi, azioni e store scrivibili; è distinto dal più recente API basato sulle runes.

### Naive UI

Un ambiente di lavoro nativo con tabella dati Naive UI, valori degli oggetti tema verificati, selezione ed espansione delle righe, ordinamento, paginazione e un’azione locale per la revisione in blocco.


- [Riferimento per l’implementazione](https://kobalte.dev/docs/core/components/number-field)
- [Fonte](https://kobalte.dev/docs/core/overview/styling)
- [Fonte](https://kobalte.dev/docs/core/components/number-field)
- [Leggi la specifica di supporto](https://kobalte.dev/docs/core/overview/getting-started)
- [Leggi la specifica di supporto](https://kobalte.dev/docs/core/components/number-field)
- [Leggi la specifica di supporto](https://kobalte.dev/docs/core/components/checkbox)
- [Leggi la specifica di supporto](https://kobalte.dev/docs/core/components/toggle-button)
- [Leggi la specifica di supporto](https://kobalte.dev/docs/core/overview/styling)
- [Riferimento del codice](https://kobalte.dev/docs/core/components/number-field)
- [Riferimento del codice](https://kobalte.dev/docs/core/overview/styling)
- [Per iniziare Configurazione di Solid e importazioni dei componenti.](https://kobalte.dev/docs/core/overview/getting-started)
- [Stile Stili headless e selettori degli stati.](https://kobalte.dev/docs/core/overview/styling)
- [Campo numerico Valori numerici, limiti, struttura del campo e valore grezzo del modulo.](https://kobalte.dev/docs/core/components/number-field)
- [Checkbox Input, Control, Indicator e Label.](https://kobalte.dev/docs/core/components/checkbox)
- [Pulsante di attivazione Stato pressed, callback e comportamento da tastiera.](https://kobalte.dev/docs/core/components/toggle-button)