Skip to content

NumberInput

Numeric input with parsing & formatting support. Internally manages a local string state so users can type incomplete numbers (e.g. ’-’) before parsing.

<NumberInput source="price" />
<NumberInput source="width" parse={v => (v === '' ? null : parseFloat(v))} />
PropRequiredTypeDefaultDescription
sourceRequiredstring-Field name
labelOptionalstring | falseInferredCustom / hide label
parseOptional(value:string)=>numberConverts numeric stringsConvert UI string to number (return null to clear)
defaultValueOptionalany-Initial value
validateOptionalValidator | Validator[]-Validation
helperTextOptionalReactNode-Help text
classNameOptionalstring-Extra classes
disabledOptionalboolean-Disable input
readOnlyOptionalboolean-Mark read-only
...rest-input props-Native attributes
  • Uses internal string state + useEffect to sync external value when not focused.
  • Calls field.onChange(numberValue ?? 0); adjust parse if you want nullable numbers.