## InputNumber
Enter a number with steppers, min/max and precision — quantities, limits, durations — rendered through the shared InputNumber.
Tier: composite-antd. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- value: number, default —. Controlled numeric value
- size: 'small' | 'middle' | 'large', default 'middle'. Field height: small 24 · default 32 · large 40
- status: 'error' | 'warning', default —. Validation state — coloured border/glow
- min: number, default -Infinity. Lower bound
- max: number, default Infinity. Upper bound
- step: number, default 1. Increment for steppers / arrow keys
- precision: number, default —. Fixed decimal places
- controls: boolean, default true. Show the up/down steppers
- disabled: boolean, default false. Non-interactive, greyed field
- readOnly: boolean, default false. Value visible but not editable
- prefix: ReactNode, default —. Inline leading affix (e.g. $)
- addonBefore: ReactNode, default —. Attached leading label
- addonAfter: ReactNode, default —. Attached trailing label (e.g. unit)
- onChange: (value) => void, default —. Fires with the new number
Tokens: colorPrimary, borderRadius, controlHeight, colorBorder, InputNumber.activeBorderColor, InputNumber.hoverBorderColor.
Use when: InputNumber (a bounded numeric quantity — a limit, a count, a duration where steppers help); Slider (an approximate value across a known range where the exact number matters less); Input type=number (a free number with no bounds or steppers — but prefer InputNumber for validity).