Form

InputNumber

Numeric spinbutton with increment/decrement stepper buttons, min/max clamping, custom step and keyboard support. The value is a number or null when empty.

Import

import { InputNumber } from "@zephora/react";

Examples

Basic

Uncontrolled with a default value; use the steppers or arrow keys.

<InputNumber defaultValue={5} aria-label="Quantity" />

Min / max / step

Values are clamped to the bounds; Home/End jump to min/max.

<InputNumber defaultValue={0.5} min={0} max={1} step={0.1} aria-label="Opacity" />

Controlled

`onValueChange` reports the parsed number, or null when cleared.

Selected seats: 2

const [qty, setQty] = React.useState<number | null>(2);

<InputNumber value={qty} onValueChange={setQty} min={1} max={10} aria-label="Seats" />
<p>Selected seats: {qty ?? "none"}</p>

API

InputNumber props

Prop	Type	Default	Description
`value`	`number \| null`	—	Controlled value; null means empty.
`defaultValue`	`number \| null`	`null`	Initial value (uncontrolled).
`onValueChange`	`(value: number \| null) => void`	—	Called with the parsed value (or null when cleared).
`min`	`number`	—	Lower bound; values are clamped to it.
`max`	`number`	—	Upper bound; values are clamped to it.
`step`	`number`	`1`	Step used by the buttons and arrow keys.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control size.
`invalid`	`boolean`	`false`	Marks the field invalid: sets aria-invalid and error styling.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`InputHTMLAttributes<HTMLInputElement>`	—	Remaining native input props are forwarded (type, value, onChange, min, max and step are managed by the component).

Keyboard

Key	Action
`Arrow Up / Arrow Down`	Increment / decrement by step.
`Home / End`	Jump to min / max (when defined).
`Type + Blur`	Free-typed text is parsed and clamped on blur.