Kobalte provides headless components for Solid, including numeric fields with separate raw and formatted values, compound checkbox anatomy and pressed-state buttons. This guide connects those primitives to Solid signals through a recipe scaler with derived quantities and resettable ingredient checks.
Kobalte 0.13.14 with Solid 1.9.15; native headless primitives and complete original CSS. · Implementation reference
02
Kobalte Design System Design Reference
Kobalte 0.13.14 supplies headless Solid primitives, not a canonical visual scale. Every recipe-* color and dimension below is the complete original application configuration. API names and state attributes were verified against the installed package and official component documentation.
Kobalte Design System Connect Kobalte Components to Solid Signals
Connect Kobalte Components to Solid Signals
The component uses Solid signals for portions, gathered ingredients and the pin. createMemo derives validity from the numeric signal, and For renders a stable ingredient collection. Kobalte’s controlled props read these signals directly; updates do not require a separate form provider or a React-style state adapter.
NumberField, Checkbox and ToggleButton are imported from their component entry points. Their responsibilities differ: the number field handles editable numeric input, each checkbox represents one gathered ingredient, and the toggle holds the recipe’s pin. The arithmetic and invalidation rules stay in application functions rather than being embedded in visual selectors.
Kobalte Design System Keep Numeric State Separate from Formatted Text
Keep Numeric State Separate from Formatted Text
NumberField receives rawValue={portions()} and onRawValueChange={update}. The numeric signal drives multiplication directly, while the input handles formatting and user editing. Feeding formatted display text back into arithmetic would introduce parsing assumptions about separators or locale that the native primitive already addresses.
The example permits one through eight whole portions, with a step of one and maximumFractionDigits set to zero. A separate computed predicate still checks finiteness, integrality and bounds because an editable field can temporarily hold an incomplete or invalid value. While invalid, totals display an em dash and ingredient checkboxes are disabled. The interface does not present a plausible but incorrect quantity as if the user had supplied valid input.
Kobalte Design System Compose the Field from Its Native Label and Messages
Compose the Field from Its Native Label and Messages
The number field contains Label, DecrementTrigger, Input, IncrementTrigger, Description and ErrorMessage. The visible description explains both the range and the consequence of changing portions. The triggers have meaningful labels, Fewer portions and More portions, so their symbolic minus and plus marks do not have to carry the whole accessible name.
validationState switches between valid and invalid using the application predicate. ErrorMessage belongs to that native field rather than being an unrelated paragraph placed elsewhere on the page. For a submitted form, Kobalte also provides a HiddenInput for raw-value serialization; this local example does not include one because it has no submission endpoint or form payload.
Kobalte Design System Keep Ingredient Selection in an Immutable Set
Keep Ingredient Selection in an Immutable Set
Each ingredient uses the complete Checkbox anatomy: Input, Control, Indicator and Label. The real input preserves semantics and keyboard interaction while the visible control receives the check mark and original state styles. The label includes both the ingredient name and the amount, making the quantity part of the item a reader is gathering.
mark creates a new Set from the previous selection before adding or removing an ID. Mutating the existing Set alone would not provide the same reliable signal update. The rendered count reads the Set size, and each Checkbox reads membership by stable ingredient ID. A quantity change clears that entire selection because gathering 320 grams is not evidence that the new 400-gram requirement is satisfied.
Associate every visible ingredient name with Checkbox.Label.
Retain Checkbox.Input even when the visible square is custom styled.
Use stable IDs for selection and create a new Set for each update.
Kobalte Design System Use a Toggle for a Persistent Local Choice
Use a Toggle for a Persistent Local Choice
The pin is a ToggleButton with pressed and onChange, not a normal button that only changes its caption. Its pressed state is reflected in native semantics and the data-pressed selector. The label changes to Pinned with a check mark, and the nearby status explains that this affects the local preview only.
Pinning does not change the ingredient quantities or selection. Changing portions clears ingredient checks but preserves the pin because the recipe identity has not changed. Restore default recipe resets all three model concerns together: four portions, an empty ingredient Set and an unpressed pin. These different reset boundaries follow the meaning of the state rather than clearing everything on every interaction.
Kobalte Design System Give Headless Controls a Reproducible Visual Configuration
Give Headless Controls a Reproducible Visual Configuration
The recipe stylesheet separates the numeric input’s editing surface, its stepper triggers and the checkbox selection role. The muted ingredient text is applied only after a check; quantities remain legible so the user can still compare the gathered amount with the current portion count.
Spacing uses four, eight, twelve, sixteen, twenty-four and thirty-two pixels. The original type hierarchy mixes a system sans-serif for controls with Georgia for the recipe title. A twenty-one-pixel visual checkbox sits beside a full associated label; the label remains the useful activation area. These exact values are included in the full CSS so the reader can reproduce the specimen without guessing at a screenshot.
Kobalte Design System Let the Composition Shrink without Hiding Information
Let the Composition Shrink without Hiding Information
The wide layout pairs a flexible recipe card with a 280-pixel portion panel. At 760 pixels it stacks into a single column. The card heading can wrap, ingredient labels can break onto another line, and the amount remains a compact non-wrapping value. The smallest breakpoint reduces panel padding and label type slightly rather than hiding the amounts.
The salad illustration is original CSS and is marked decorative. The recipe name, portion count and ingredient quantities carry the meaning independently of that artwork. Preserve the full ingredient labels and amounts when changing the illustration or narrowing the card; they are the actual inputs to the gathering task.
Kobalte Design System Handle Quantity Changes as a Dependent-State Update
Handle Quantity Changes as a Dependent-State Update
Each portion contributes 250 grams across the five ingredients. Moving from four to five portions changes the displayed total from 1,000 to 1,250 grams and the orange requirement from 320 to 400 grams. Previously gathered checks are cleared because they described the old quantities, while the recipe pin remains unchanged because the recipe identity is the same.
The update function first compares the incoming value with the current signal using Object.is. An unchanged callback should not clear the checklist or announce a quantity change. Invalid values suppress quantities and disable gathering; the error message then explains the accepted range. These rules make intermediate edits observable without allowing an invalid number to produce a misleading total.
Select Orange segments at four portions.
Increase to five and confirm 400 g of orange, 1,250 g total and zero gathered items.
Pin the recipe, then restore defaults and confirm all local state resets.
Kobalte Design System Use a Solid Build and Include the Entire Stylesheet
Use a Solid Build and Include the Entire Stylesheet
The setup uses the Vite Solid template, pins the verified Solid and Kobalte versions and mounts into an explicit app root. The component and stylesheet shown above are complete files. No theme provider, icon package, external font or backend is needed for this specimen.
Keep the framework compiler and component generation aligned when integrating into another application. A React transform will not turn Solid JSX into a correct Kobalte application. Likewise, a future major Kobalte API should be checked against its own documentation before replacing the pinned dependency. The recipe quantities and palette are sample application data, so adapting them does not require changing the native primitive contract.
Native number field, checkbox anatomy and toggle button with explicit invalid and reset behavior.
jsx
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>
}
These recipe-* values are original application choices, not official Kobalte tokens.
The complete stylesheet includes responsive composition and visible focus.
04
Kobalte Design System Agent Setup
Implementation Starting Point
The Solid Vite template supplies the required Solid JSX compiler. The complete App.jsx and style.css examples above contain all application code and styles; no provider or external service is required.
javascript
// npm create vite@latest kobalte-recipe -- --template solid
// cd kobalte-recipe && npm install
// npm install [email protected] @kobalte/[email protected]
// 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
A Prompt for Your Project
Agent Prompt
Use Kobalte 0.13.14 with Solid 1.9.15 to reproduce the reactive recipe card. Keep NumberField rawValue/onRawValueChange, bounds one through eight, whole-portion validation and full Label/Description/ErrorMessage anatomy. Derive ingredient grams and totals from the portion signal; a genuine quantity change clears the immutable checked-ID Set but preserves the recipe pin. Keep native Checkbox parts and ToggleButton pressed/onChange, disable gathering while quantity is invalid, and restore four portions, no checks and no pin on reset. Include the complete original recipe CSS; all state remains local.
05
Kobalte Design System Sources and Scope
Verified with Kobalte 0.13.14 and Solid 1.9.15. All recipe-* tokens, CSS illustration and ingredient amounts are original specimen data. Pinning and gathering remain local state; no account, shopping service or persistent recipe store is connected.
