NumberInput

Under the hood, It's a text input. This allows more flexibility, such as displaying formatting commas directly in the input.

The value we get is a number or, when it's not possible to infer a number, a string. For example, we get an empty string when the input is empty.

We may customize the input:

  • allowDecimal: allow or forbid decimal numbers. Defaults to allow.
  • allowNegative: allow or forbid negative numbers. Defaults to allow.
  • min, max: specify minimum and maximum values. The way it influences the input is determined by clampBehavior
  • clampBehavior: determine how the value should clamp within the limits. We may forbid input outside the limits (strict), clamp after input on blur (d), or never clamp (none)

As any text input we may have:

  • label
  • description (secondary label)
  • placeholder
const [value, setValue] = useState<string | number>("")
return <NumberInput value={value} onChange={setValue} />
earlymorning logo

© 2025 - All rights reserved

NumberInput

Under the hood, It's a text input. This allows more flexibility, such as displaying formatting commas directly in the input.

The value we get is a number or, when it's not possible to infer a number, a string. For example, we get an empty string when the input is empty.

We may customize the input:

  • allowDecimal: allow or forbid decimal numbers. Defaults to allow.
  • allowNegative: allow or forbid negative numbers. Defaults to allow.
  • min, max: specify minimum and maximum values. The way it influences the input is determined by clampBehavior
  • clampBehavior: determine how the value should clamp within the limits. We may forbid input outside the limits (strict), clamp after input on blur (d), or never clamp (none)

As any text input we may have:

  • label
  • description (secondary label)
  • placeholder
const [value, setValue] = useState<string | number>("")
return <NumberInput value={value} onChange={setValue} />