Form
Input Number
Numeric input with increment/decrement controls, min/max/step, and format options.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/input-number
Examples
Stepper with bounds
Increment/decrement controls plus min, max, and step keep input valid.
Use the steppers or type — clamped to 0–99.
Formats & variants
Format as currency with Intl options, or use the split stepper layout.
Disabled & invalid
Native disabled plus aria-invalid styling.
Must be 100 or less.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { InputNumber } from "@codefast/ui/input-number";
<InputNumber defaultValue={1} min={0} max={99} step={1} />
API reference
Props for each part of the component. All native element props are also forwarded.
InputNumber
A numeric field with steppers, bounds, and locale-aware formatting.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onChange | number / (value: number) => void | — | Controlled value and its handler. Or use defaultValue uncontrolled. |
| min / max / step | number | — | Bounds and increment. Values are clamped to the range. |
| formatOptions | Intl.NumberFormatOptions | — | Format the display, e.g. { style: "currency", currency: "USD" }. |
| variant | "stepper" | "split" | "stepper" | Inline steppers, or − and + on either side. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Arrow+Up | Increments by one step. |
| Arrow+Down | Decrements by one step. |
- Renders a spinbutton with aria-valuenow / valuemin / valuemax.
- Pair with a Label so the field has an accessible name.
- Formatting is display-only — the underlying value stays numeric.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Set min, max, and step to express the valid range.
- Use formatOptions for currency, percent, and units.
Don’t
- Don’t use it for codes or phone numbers — use Input.
- Don’t omit a label.