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) => booleanrawValue 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
maxLengthfor length caps andmaxDecimalsfor decimal-precision caps;isAllowedis for everything else