#030
Basic
Two NumberField inputs in a Stack: an integer quantity with bounds and a decimal price with a step.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Basic" pattern (@codeatlasdev/ui demo #030, inputs/number-field) in my app.
Call get_demo({ ids: ["#030"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Quantity and price steppers in order or cart forms.
Keep these library parts, with the props and tokens the demo uses:
- NumberField, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<Stack gap="4">` wraps both fields
- `<NumberField label="Quantity" bind:value={qty} min={0} max={99} />` with `let qty = $state(1)`
- `<NumberField label="Price" bind:value={price} min={0} step={0.01} />` with `let price = $state(9.99)`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- NumberField
@codeatlasdev/ui - Stack
@codeatlasdev/ui
How it is built
- `<Stack gap="4">` wraps both fields
- `<NumberField label="Quantity" bind:value={qty} min={0} max={99} />` with `let qty = $state(1)`
- `<NumberField label="Price" bind:value={price} min={0} step={0.01} />` with `let price = $state(9.99)`
Related
Loading source.