NumberInput
Numeric input with stepper buttons, min/max clamping, prefix/suffix, and precision control.
Live Demo
0–100%
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | undefined | — | Numeric value |
onChange | (value: number | undefined) => void | — | Callback with new numeric value |
min | number | — | Minimum allowed value |
max | number | — | Maximum allowed value |
step | number | 1 | Step size (default: 1) |
precision | number | — | Number of decimal places |
prefix | string | — | Prefix symbol (e.g. $) |
suffix | string | — | Suffix symbol (e.g. %) |
size | "sm" | "md" | "lg" | "md" | Size variant: sm | md | lg |
label | string | — | Label text |
error | string | — | Error message |
helperText | string | — | Helper text below input |
Usage
import { NumberInput } from '@ghiberti85/ui'
const [quantity, setQuantity] = useState(1)
// Basic
<NumberInput label="Quantity" value={quantity} onChange={setQuantity} min={0} max={99} />
// Currency
<NumberInput
label="Price"
value={price}
onChange={setPrice}
prefix="$"
min={0}
step={0.01}
precision={2}
/>
// Percentage with helper text
<NumberInput
label="Discount"
value={discount}
onChange={setDiscount}
suffix="%"
min={0}
max={100}
step={5}
helperText="Enter a value between 0 and 100"
/>