> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# NumberInput
A number the reader nudges rather than types from scratch — reach for `Input` when the figure is just data like a port or an ID, and `Slider` when the position matters more than the exact value. It starts at zero rather than empty, so pass `defaultValue` wherever a pre-filled zero would be mistaken for an answer.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/NumberInput) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-numberinput--overview)
```tsx
import { NumberInput } from '@wallarm-org/design-system/NumberInput';
```
## Usage
```tsx
import { NumberInput } from '@wallarm-org/design-system/NumberInput';
```
## Examples
### Sizes
The same height scale as `Input`, with the steppers shrinking to match rather than being
dropped at the smaller sizes.
```tsx
import { NumberInput } from '@wallarm-org/design-system/NumberInput';
import { HStack } from '@wallarm-org/design-system/Stack';
export const Sizes = () => (
);
```
### Disabled
Field and steppers both out. Worth checking here that the value still reads clearly, since
a number nobody can change is often the number that matters.
```tsx
import { NumberInput } from '@wallarm-org/design-system/NumberInput';
```
### With value
A set value. Typing is allowed as well as stepping, and the value is clamped against `min`
and `max` rather than refused as it is typed.
```tsx
import { NumberInput } from '@wallarm-org/design-system/NumberInput';
```
### With error
`error` reddens the border and sets the invalid state; the reason belongs in `FieldError`
beneath it.
```tsx
import { NumberInput } from '@wallarm-org/design-system/NumberInput';
```
## Props
| Prop | Type | Default | Description |
| ------------------ | ---------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| form | `string \| undefined` | | The associate form of the input element. |
| title | `string \| undefined` | | |
| pattern | `string \| undefined` | | The pattern used to check the \ element's value against |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| undefined` | `0` | The initial value of the input when rendered. Use when you don't need to control the value of the input. |
| autoFocus | `boolean \| undefined` | | |
| id | `string` | | The unique identifier of the machine. |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| inputMode | `InputMode \| undefined` | | Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices |
| onChange | `ChangeEventHandler \| undefined` | | |
| disabled | `boolean \| undefined` | | Whether the number input is disabled. |
| name | `string \| undefined` | | The name attribute of the number input. Useful for form submission. |
| value | `string \| undefined` | | The controlled value of the input |
| asChild | `boolean \| undefined` | | Use the provided child element as the default rendered element, combining their props and behavior. |
| ids | `ElementIds \| undefined` | | The ids of the elements in the number input. Useful for composition. |
| readOnly | `boolean \| undefined` | | Whether the number input is readonly |
| required | `boolean \| undefined` | | Whether the number input is required |
| onValueChange | `complex` | | Function invoked when the value changes |
| step | `number \| undefined` | | The amount to increment or decrement the value by |
| max | `number \| undefined` | | The maximum value of the number input |
| min | `number \| undefined` | | The minimum value of the number input |
| translations | `IntlTranslations \| undefined` | | Specifies the localized strings that identifies the accessibility elements and their states |
| largeStep | `number \| undefined` | | The amount to increment or decrement the value by when the `Shift` key is held. |
| smallStep | `number \| undefined` | | The amount to increment or decrement the value by when the `Alt` key is held. |
| allowMouseWheel | `boolean \| undefined` | | Whether to allow mouse wheel to change the value |
| allowOverflow | `boolean \| undefined` | | Whether to allow the value overflow the min/max range |
| clampValueOnBlur | `boolean \| undefined` | | Whether to clamp the value when the input loses focus (blur) |
| focusInputOnChange | `boolean \| undefined` | | Whether to focus input when the value changes |
| formatOptions | `Intl.NumberFormatOptions \| undefined` | | The options to pass to the `Intl.NumberFormat` constructor |
| onValueInvalid | `complex` | | Function invoked when the value overflows or underflows the min/max range |
| onFocusChange | `complex` | | Function invoked when the number input is focused |
| onValueCommit | `complex` | | Function invoked when the value is committed (when the input is blurred or the Enter key is pressed) |
| spinOnPress | `boolean \| undefined` | | Whether to spin the value when the increment/decrement button is pressed |
| locale | `string \| undefined` | | The current locale. Based on the BCP 47 definition. |
| size | `{ default: string; medium: string; small: string; 'inline-edit': string; }` | `default` | |
| error | `boolean \| undefined` | `false` | |
| data-testid | `string \| undefined` | | |