NumberInput

A text-backed numeric field for ERP quantities, prices, percentages, and other decimal values, with predictable parsing and accessible stepping.

Default

Enter a value directly, use Arrow Up and Arrow Down, or use the stepper buttons. Hold Shift with an arrow key to move by ten steps.

tsx

<NumberInput defaultValue={12} aria-label="Quantity" />

Installation

tsx

import { NumberInput } from "madagent";

Sizes

NumberInput follows the same small, medium, and large field heights as other madagent controls.

tsx

<NumberInput size="sm" defaultValue={8} aria-label="Small quantity" />
<NumberInput size="md" defaultValue={8} aria-label="Medium quantity" />
<NumberInput size="lg" defaultValue={8} aria-label="Large quantity" />

Prefix and Suffix

Use adornments for currencies, percentages, quantities, and other units. Keep the accessible unit in the label because adornments are visual.

tsx

<NumberInput
  prefix="$"
  suffix="USD"
  defaultValue={1250}
  precision={2}
  aria-label="Price in US dollars"
/>

<NumberInput
  suffix="%"
  defaultValue={17.5}
  precision={1}
  aria-label="Discount percentage"
/>

Limits and Precision

Values are clamped to min and max and formatted to the requested number of decimal places when the field loses focus.

tsx

<NumberInput
  defaultValue={7.25}
  min={0}
  max={10}
  step={0.25}
  precision={2}
  aria-label="Score"
/>

Without Steppers

Hide the buttons when direct entry is the primary interaction. Arrow-key stepping remains available.

tsx

<NumberInput
  hideSteppers
  defaultValue={42}
  aria-label="Reference number"
/>

Disabled

The input and both stepper buttons use semantic disabled surface and content tokens.

tsx

<NumberInput
  defaultValue={125}
  suffix="units"
  disabled
  aria-label="Quantity"
/>

API Reference

Prop	Type	Default	Description
`value`	`numbernull`	-	Controlled numeric value. null represents an empty field
`defaultValue`	`numbernull`	`null`	Initial value for uncontrolled usage
`onChange`	`(value: number \| null) => void`	-	Called with a parsed number, or null when the field is cleared
`min`	`number`	-	Smallest permitted value; applied when stepping or committing
`max`	`number`	-	Largest permitted value; applied when stepping or committing
`step`	`number`	`1`	Increment used by Arrow keys and stepper buttons. Shift multiplies it by ten
`precision`	`number`	-	Decimal places applied when the input is committed on blur
`prefix`	`ReactNode`	-	Visual adornment at the inline start of the field
`suffix`	`ReactNode`	-	Visual adornment at the inline end of the field
`size`	`"sm""md""lg"`	`"md"`	Field height and typography scale
`hideSteppers`	`boolean`	`false`	Hides the increment and decrement buttons
`disabled`	`boolean`	`false`	Disables direct entry and the stepper buttons
`readOnly`	`boolean`	`false`	Prevents direct entry and stepping while keeping the value readable
`className`	`string`	-	Additional CSS class for the outer wrapper

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Usage

tsx

<NumberInput
  prefix="$"
  suffix="دولار"
  defaultValue={1234.5}
  precision={2}
  aria-label="المبلغ"
/>

<NumberInput size="sm" defaultValue={8} aria-label="Small quantity" /> <NumberInput size="md" defaultValue={8} aria-label="Medium quantity" /> <NumberInput size="lg" defaultValue={8} aria-label="Large quantity" />

<NumberInput prefix="$" suffix="USD" defaultValue={1250} precision={2} aria-label="Price in US dollars" /> <NumberInput suffix="%" defaultValue={17.5} precision={1} aria-label="Discount percentage" />

API Reference

Prop	Type	Default	Description
`value`	`numbernull`	-	Controlled numeric value. null represents an empty field
`defaultValue`	`numbernull`	`null`	Initial value for uncontrolled usage
`onChange`	`(value: number \| null) => void`	-	Called with a parsed number, or null when the field is cleared
`min`	`number`	-	Smallest permitted value; applied when stepping or committing
`max`	`number`	-	Largest permitted value; applied when stepping or committing
`step`	`number`	`1`	Increment used by Arrow keys and stepper buttons. Shift multiplies it by ten
`precision`	`number`	-	Decimal places applied when the input is committed on blur
`prefix`	`ReactNode`	-	Visual adornment at the inline start of the field
`suffix`	`ReactNode`	-	Visual adornment at the inline end of the field
`size`	`"sm""md""lg"`	`"md"`	Field height and typography scale
`hideSteppers`	`boolean`	`false`	Hides the increment and decrement buttons
`disabled`	`boolean`	`false`	Disables direct entry and the stepper buttons
`readOnly`	`boolean`	`false`	Prevents direct entry and stepping while keeping the value readable
`className`	`string`	-	Additional CSS class for the outer wrapper