Usage
label and it wires the label, description and error like Field; without label it renders the control alone, so pair it with a Label or aria-label.
label (or description) from the first render and keep it set. NumberField renders the frame alone when none of label, description and error is set and wraps it in the field stack when any is, so a field that gains one after mount gets a new input, which loses focus, the caret and an open draft. NumberField warns once in development when it happens.
largeStep, ten steps by default), Home and End jump to the bounds, Enter commits a draft, Escape reverts it.min is negative. A valid, in-range, on-step draft applies as you type; the draft snaps to the step grid and clamps on Enter, blur or the next step.scrub, drag the label sideways to change the value one step every few pixels.size enum and default (InputSize, Large), and the same heights (--control-height-sm, -md and -lg: 24, 28 and 32px). Like Input it fills its container; constrain it with a class in @layer chroma.overrides. With step buttons the shell is inset 2px around them and the buttons shrink to fit (18, 22 and 26px); without them the value pads its inline axis by --space-8.
With a label or description the stack reads label above the shell and description below, 8px apart. The label is 14px (12px at small) and the description 12px in the subtle foreground. See the Pricing story.
Steps, keys, typed values and scrubbing clamp to min and max. The value strains toward the limit (up at max, down at min, further with each push in a row), the refused button's icon shakes once, and a short note beside the label says what was met. A held button keeps pushing a limit until release. A typed value past a limit also tints the shell with the warning role until the draft recovers or commits. Under reduced motion only a brief color change remains. limitHint={false} hides the note; the polite announcement stays.
The value rolls its digits by default. roll={false} shows static formatted text instead: no wheel, no blur and no column or affix motion, with the same caret, draft, semantics and limits.
description sits below the control. Its row opens and closes its height, and when the copy changes only the words that differ rise in and unblur.
Components ship no literal copy. decrementLabel, incrementLabel, limitNote and valueAnnouncement come from the caller; a step button without its label is not rendered, and the defaults for the note and announcement show the formatted number alone.
Locale and formatOptions shape the digits. Fraction digits follow the precision of step and a finite min unless formatOptions sets them. prefix and suffix take copy or a function of the value, and a changing suffix animates per character.