NumberField

Numeric input with steppers.

A numeric text field built on a native `<input type="number">` with monospace value display and a pair of − / + stepper buttons. Steppers increment/decrement by `step`, clamp to `min`/`max`, and disable at their bound. Clearing the field yields `null`. Mirrors the Input chrome — label, hint/error text, focus ring on the wrapper, and `aria-describedby` ordering (error → hint → describedby).

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { NumberField } from 'dssoca';
  let replicas = $state(3);
</script>

<NumberField label="Replicas" bind:value={replicas} min={0} max={10} />

WCAG 2.2 AA. The native spinner is hidden in favour of accessible − / + buttons labelled "Decrease" / "Increase"; each is disabled at its bound or when the field is disabled/readonly. The value is rendered monospace.

HTML

interactive with vanilla.js The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css+ dssoca/vanilla.js — see Plain HTML & CSS.

html

<div class="ss-numberfield">
  <label class="lbl" for="qty">Quantity</label>
  <div class="control">
    <button type="button" class="step dec" aria-label="Decrease">−</button>
    <input class="ss-input" id="qty" type="number" inputmode="decimal" value="2" min="0" max="10" step="1" placeholder=""/>
    <button type="button" class="step inc" aria-label="Increase">+</button>
  </div>
</div>

vanilla.js wires the − / + steppers (clamped to min/max, disabled at the bounds).

Props

Prop	Type	Default	Description
`label`	`string`	—	Label text associated to the input via for/id.
`value`	`number \| null`	—	Bindable current value; `null` when empty.
`min`	`number`	—	Lower bound; clamps the steppers and disables − at the floor.
`max`	`number`	—	Upper bound; clamps the steppers and disables + at the ceiling.
`step`	`number`	`1`	Increment/decrement applied by the steppers.
`name`	`string`	—	Native form field name.
`placeholder`	`string`	—	Placeholder shown when the field is empty.
`required`	`boolean`	`false`	Marks the field required; renders a label marker.
`disabled`	`boolean`	`false`	Disables the input and both steppers.
`readonly`	`boolean`	`false`	Value visible but not editable; steppers inert.
`invalid`	`boolean`	—	Marks the field invalid for assistive tech (aria-invalid).
`hint`	`string`	—	Helper text under the field, wired via aria-describedby.
`error`	`string`	—	Error text; implies aria-invalid and is announced via role="alert".
`describedby`	`string`	—	Extra aria-describedby id(s), appended after error/hint.
`onchange`	`(e: Event) => void`	—	Native change handler fired when the committed value changes.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.