Number Input
Numeric input with optional stepper buttons for increment/decrement operations. Supports min/max bounds, custom step values, and formatted display.
Number Input States
Default
Success
Error
Disabled
Basic Usage
Quantity Selector
Current value: 1
<NumberInput
value={quantity}
onChange={setQuantity}
min={1}
max={99}
label="Quantity"
/>Stepper Positions
The stepper buttons can be positioned on the right (default) or on both sides of the input.
Right (Default)
Sides
// With stepper buttons (default)
<NumberInput showStepper />
// Without stepper buttons
<NumberInput showStepper={false} />Formatted Values
Use formatValue and parseValue to display formatted numbers like currency or percentages.
Currency
Percentage
// Currency formatting
<NumberInput
value={price}
onChange={setPrice}
step={0.01}
min={0}
formatValue={(v) => `$${v.toFixed(2)}`} label="Price"
/>
// Percentage formatting
<NumberInput
value={percentage}
onChange={setPercentage}
step={5}
min={0}
max={100}
formatValue={(v) => `${v}%`} label="Discount"
/>Validation States
Sufficient inventory
Value must be positive
// Success state
<NumberInput
value={100}
variant="success"
label="Items in Stock"
helperText="Sufficient inventory"
/>
// Error state
<NumberInput
value={-5}
variant="error"
label="Quantity"
helperText="Value must be positive"
/>Without Stepper Buttons
<NumberInput
value={42}
showStepper={false}
label="Age"
placeholder="Enter your age"
/>Keyboard Support
Arrow UpIncrement value by step amount
Arrow DownDecrement value by step amount