# InputNumber
> Generated from input-number.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | number | `—` | Controlled numeric value |
| `size` | 'small' | 'middle' | 'large' | `'middle'` | Field height: small 24 · default 32 · large 40 |
| `status` | 'error' | 'warning' | `—` | Validation state — coloured border/glow |
| `min` | number | `-Infinity` | Lower bound |
| `max` | number | `Infinity` | Upper bound |
| `step` | number | `1` | Increment for steppers / arrow keys |
| `precision` | number | `—` | Fixed decimal places |
| `controls` | boolean | `true` | Show the up/down steppers |
| `disabled` | boolean | `false` | Non-interactive, greyed field |
| `readOnly` | boolean | `false` | Value visible but not editable |
| `prefix` | ReactNode | `—` | Inline leading affix (e.g. $) |
| `addonBefore` | ReactNode | `—` | Attached leading label |
| `addonAfter` | ReactNode | `—` | Attached trailing label (e.g. unit) |
| `onChange` | (value) => void | `—` | Fires with the new number |

## Visual standard (measured)
- Field: height 32 (md) · radius 8 · 1px #E3E3E3 border
- Sizes: small 24 · default 32 · large 40 · font 14
- Hover: #D3B4FF (purple-30) border
- Focus: brand #6A1EBB border
- Status: error #F5222D · warning border/glow
- Steppers: up/down on hover; keyboard ↑ ↓; toggle via controls
- Placeholder: #8A8A8A

## When to use
- **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

Set min/max to the real limits so the field constrains instead of validating after the fact. Pre-fill a sensible default rather than empty; use precision for currency/percentages.