NumberField

A wrapper around React Aria’s NumberField component. Provides keyboard-accessible increment/decrement buttons and locale-aware number formatting.

Add via CLI

npx @a2ra/cli add number-field

Basic

Disabled state

With validation

Example JSON

{
  "type": "NumberField",
  "props": {
    "label": "Quantity",
    "name": "qty",
    "minValue": 1,
    "maxValue": 100,
    "step": 1,
    "defaultValue": 1
  }
}

Props

Prop	Type	Description
`label`	`string`	Visible label
`placeholder`	`string`	Placeholder text
`minValue`	`number`	Minimum allowed value
`maxValue`	`number`	Maximum allowed value
`step`	`number`	Increment/decrement step
`value`	`number`	Controlled value
`defaultValue`	`number`	Uncontrolled default
`name`	`string`	Form field name
`isRequired`	`true` `false` default	Marks field as required
`isDisabled`	`true` `false` default	Disables the input
`isReadOnly`	`true` `false` default	Prevents editing
`isInvalid`	`true` `false` default	Shows error styling
`isWheelDisabled`	`true` `false` default	Prevents mouse wheel from changing the value
`validationBehavior`	`aria` default `native`	Validation reporting strategy
`description`	`string`	Helper text
`errorMessage`	`string`	Error text shown when `isInvalid` is true

Notes

isWheelDisabled: true is recommended in forms to prevent accidental value changes when the user scrolls the page.
The increment/decrement buttons are keyboard-accessible and ARIA-labelled automatically.