Component

NumberInput

Collects a number with steppers, keyboard control, clamping, and Intl formatting.

$pnpm dlx @stalk-ui/cli add @stalk-ui/number-input

<NumberInput aria-label="Quantity" defaultValue={1} min={0} max={10} />

<NumberInput aria-label="Quantity" defaultValue={1} min={0} max={99} layout="split" />

<NumberInput aria-label="Price" defaultValue={19.99} step={0.5} currency="USD" />

Prop	Type	Required	Default	Description
`className`	`string`	No	-	Root className.
`clampValueOnBlur`	`boolean`	No	-	Clamp the value into [min, max] on blur. Defaults to true.
`currency`	`string`	No	-	ISO 4217 currency code; shorthand for an Intl currency format on blur.
`decrementLabel`	`string`	No	-	Accessible label for the decrement control.
`defaultValue`	`number`	No	-	-
`formatOptions`	`Intl.NumberFormatOptions`	No	-	\`Intl.NumberFormat\` options applied to the displayed value when not editing.
`hideStepper`	`boolean`	No	-	Hide the stepper controls.
`incrementLabel`	`string`	No	-	Accessible label for the increment control.
`invalid`	`boolean`	No	-	-
`largeStep`	`number`	No	-	Step applied to PageUp/PageDown. Defaults to \`step \* 10\`.
`layout`	`NumberInputLayout`	No	-	\`stacked\` chevrons on the trailing edge, or \`split\` minus/plus on each edge.
`locale`	`string`	No	-	BCP-47 locale used for display formatting.
`max`	`number`	No	-	-
`min`	`number`	No	-	-
`onValueChange`	`(value: number \	null) => void`	No	-
`size`	`NumberInputSize`	No	-	-
`step`	`number`	No	-	-
`value`	`number \	null`	No	-

Install