Number Input

Usage

import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrementTrigger,
  NumberInputIncrementTrigger,
  NumberInputInput,
  NumberInputLabel,
} from "@kanzo-tech/ui";

<NumberInput defaultValue="3" min={1} max={5}>
  <NumberInputLabel>Party size</NumberInputLabel>
  <NumberInputControl>
    <NumberInputInput />
    <NumberInputIncrementTrigger />
    <NumberInputDecrementTrigger />
  </NumberInputControl>
</NumberInput>

The clamping, keyboard (arrow keys, page up/down), scrubbing and role="spinbutton" wiring all come from Ark's machine. NumberInputControl is the bordered shell — Ark ships no Group part, so the shell lives on the Control and the two stepper triggers float at the inline-end edge.

NumberInput is a spinbutton: steppers, arrow keys, drag-to-change, for a bounded quantity the user nudges. A number simply typed in is a text field — Controls has the two side by side.

Sizes

Controlled

Scrubbing

Wrap NumberInputScrubber around the label (or an icon) and dragging it left/right scrubs the value — the pointer capture, delta and clamping come from Ark.

Formatting

formatOptions is forwarded to Intl.NumberFormat, so the value stays a number while the display becomes a currency, percent or unit.

Anatomy

NumberInput
├── NumberInputLabel
├── NumberInputControl
│   ├── NumberInputInput
│   ├── NumberInputIncrementTrigger
│   └── NumberInputDecrementTrigger
├── NumberInputScrubber
└── NumberInputValueText

API Reference

NumberInput

Extends NumberInput.Root from Ark — value / defaultValue (string), onValueChange, min, max, step, disabled, invalid, readOnly, required, name, formatOptions, allowMouseWheel and the rest pass through.

NumberInputControl

Renders NumberInput.Control as the input shell.

NumberInputControlProps is exported, so a wrapper can take the same props without restating them.