XGitHub

Custom Validation

Reject keystrokes and pastes before they commit using an isAllowed predicate. Useful for enforcing caps, business rules, or format invariants that don't fit one of the built-in props.

Shape

type IsAllowed = (rawValue: string) => boolean

rawValue is the sanitized, raw (no-separator) string that wouldbe committed by this keystroke or paste. Return true to accept it,false to discard it - the input stays at its previous value andonChange does not fire.

Example: cap at 100

Reject anything above 100

Try typing past 100 - keystrokes that would exceed it are blocked

<NumoraInput
  isAllowed={(raw) => {
    if (raw === '' || raw === '-' || raw === '.') return true
    const n = parseFloat(raw)
    return Number.isFinite(n) && n <= 100
  }}
/>

Example: only multiples of 5

<NumoraInput
  isAllowed={(raw) =>
    raw === '' || (/^[0-9]+$/.test(raw) && Number(raw) % 5 === 0)
  }
/>

Notes

  • Runs after sanitization and formatting, but before the DOM is mutated and React state updates
  • Fires for both typing and paste paths
  • Always allow the intermediate strings users need to type their way to a valid value (empty string, lone - or decimal separator)
  • Keep the predicate cheap - it runs on every keystroke
  • Combine with maxLength for length caps and maxDecimals for decimal-precision caps; isAllowed is for everything else