Max Length

Cap the input by raw character count - thousand separators are excluded from the limit, so the cap reflects the actual numeric value rather than the formatted display.

Why not the native HTML attribute?

The native maxLength attribute on <input> counts every formatted character. With thousand separators, 1,234,567 is 9 characters; the user thinks of it as 7 digits. Numora's prop counts the raw value the way users actually reason about length, and shadows the native HTML attribute.

7 raw digits, formatted with thousands

Try typing more than 7 digits - the 8th keystroke is blocked

<NumoraInput
  maxLength={7}
  thousandSeparator=","
  formatOn={FormatOn.Change}
/>

Live Example:

With decimals

Decimal separator counts. "1234.56" → 7 raw chars

<NumoraInput maxLength={6} />

Live Example:

Rules

Counts the raw value - thousand separators are stripped before measuring
The decimal separator is counted
A leading - sign is counted
Truncation happens from the right; if it would leave a trailing decimal separator, that separator is also stripped

Pasted values

Pastes are truncated after sanitization. Pasting "99999999" into an input with maxLength={4} commits "9999".

Standalone utility

For one-off truncation outside of the input pipeline, Numora exportstruncateToMaxLength from the core package:

import { truncateToMaxLength } from 'numora'

truncateToMaxLength('1234567', 5)        // → '12345'
truncateToMaxLength('1234.56', 5)        // → '1234'
truncateToMaxLength('-1234567', 5)       // → '-1234'

numora.