NumberInput

NumberInput uses a <input type=text> under the hood: this allows Mantine to have more flexibility in displaying non-number characters compared to the HTML <input type=number>.

For example, Mantine can display a thousand separator, even a custom one.

Mantine's underlying managed value differs from what is displayed: Mantine tries to manage an underlying number every time it makes sense. The thousand separators are not part of the underlying managed value.

Yet, the managed value is not always a number: it is a string when Mantine cannot resolve it to a number without ambiguity:

• the input is empty: ""
• the input is a standalone negative sign: "-"
• the input's number is too big or too small to fit in as a JS number
• the input has a trailing decimal separator: 0.
• the input has a trailing decimal zero, such as 0.00

Otherwise the value is a number.

As such, we work with a string and number type union:

// NumberInput managed value:
const [value, setValue] = useState<string | number>("")
return <NumberInput value={value} onChange={setValue} />

options and overrides

• forbid decimal numbers with allowDecimal={false}. (They are allowed by default).
• forbid negative numbers with allowNegative={false}. (They are allowed by default.)
• clamp the value in the range between min and max. We determine how the value should clamp with clampBehavior:
  • Clamp after input on blur (after exiting the input). This is the default.
  • Forbid values outside the limits at all times with strict.
  • Never clamp with none

other options (Input)

As an Input, it supports label, description (secondary label) and placeholder.