Changelog NumericInput Basic Usage Defining decimal precision Decimal precision and maxLength Formatting input as money Formatting input as percent Formatting input as percent with large decimal precision Calling functions on events (onBlur, onChange)Decimal precision and maxLength using value onBlur Thousand separator as dot (.)Thousand separator as comma (,)Test with thousand separator and maxLength Working with large numbers Working with large numbers with decimals Readme

NumericInput

className

string

decimalPrecision

number

decimalSeparator

string

thousandSeparator

string

disabled

boolean

autoFocus

boolean

maxLength

number

string

name

string

placeholder

string

onChange

(e: ChangeEvent<Element>) => void

onBlur

(e: ChangeEvent<Element>, value: string | number) => void

onClick

() => void

onFocus

(e: FocusEvent<Element>) => void

onKeyPress

() => void

style

CSSProperties

value

string | number

percent

boolean

money

boolean

moneyMask

string

stringValueOnBlur

boolean

Basic Usage

<NumericInput />

<NumericInput />

Defining decimal precision

<NumericInput decimalPrecision={2} value={50} />

<NumericInput decimalPrecision={2} value={50} />

Decimal precision and maxLength

<NumericInput decimalPrecision={2} maxLength={4} value={99999999} />

<NumericInput decimalPrecision={2} maxLength={4} value={99999999} />

Formatting input as money

<NumericInput decimalPrecision={2} maxLength={4} value={9} money />

<NumericInput decimalPrecision={2} maxLength={4} value={9} money />

Formatting input as percent

<NumericInput decimalPrecision={2} value={90} percent />

<NumericInput decimalPrecision={2} value={90} percent />

Formatting input as percent with large decimal precision

<NumericInput decimalPrecision={4} value={90} percent />

<NumericInput decimalPrecision={4} value={90} percent />

Calling functions on events (onBlur, onChange)

<NumericInput
  decimalPrecision={2}
  id="tot_debit"
  name="tot_debit"
  maxLength={20}
  value={503.2}
  onChange={e => console.log(e.target.name, e.target.value)}
  onBlur={(e, val) => {
    console.log(e.target.name, e.target.value)
  }}
  percent
/>

<NumericInput
  decimalPrecision={2}
  id="tot_debit"
  name="tot_debit"
  maxLength={20}
  value={503.2}
  onChange={e => console.log(e.target.name, e.target.value)}
  onBlur={(e, val) => {
    console.log(e.target.name, e.target.value)
  }}
  percent
/>

Decimal precision and maxLength using value onBlur

<NumericInput
  decimalPrecision={2}
  maxLength={4}
  value={99999999}
  onChange={e => console.log('change', e.target.value)}
  onBlur={(e, val) => console.log('blur', e.target.name, val)}
/>

<NumericInput
  decimalPrecision={2}
  maxLength={4}
  value={99999999}
  onChange={e => console.log('change', e.target.value)}
  onBlur={(e, val) => console.log('blur', e.target.name, val)}
/>

Thousand separator as dot (.)

<NumericInput
  decimalPrecision={2}
  value={99999999}
  thousandSeparator="."
  decimalSeparator=","
  onChange={e => console.log('change', e.target.value)}
  onBlur={(e, val) => console.log('blur', e.target.name, val)}
/>

<NumericInput
  decimalPrecision={2}
  value={99999999}
  thousandSeparator="."
  decimalSeparator=","
  onChange={e => console.log('change', e.target.value)}
  onBlur={(e, val) => console.log('blur', e.target.name, val)}
/>

Thousand separator as comma (,)

<NumericInput
  decimalPrecision={2}
  value={99999999}
  thousandSeparator=","
  onChange={e => console.log('change', e.target.value)}
  onBlur={(e, val) => console.log('blur', e.target.name, val)}
/>

<NumericInput
  decimalPrecision={2}
  value={99999999}
  thousandSeparator=","
  onChange={e => console.log('change', e.target.value)}
  onBlur={(e, val) => console.log('blur', e.target.name, val)}
/>

Test with thousand separator and maxLength

<NumericInput value={99999} maxLength={8} thousandSeparator="," />

<NumericInput value={99999} maxLength={8} thousandSeparator="," />

Working with large numbers

<NumericInput value={99999} maxLength={30} thousandSeparator="," />

<NumericInput value={99999} maxLength={30} thousandSeparator="," />

Working with large numbers with decimals

<NumericInput
  value={99999.9901}
  maxLength={25}
  thousandSeparator=","
  decimalPrecision={5}
/>

<NumericInput
  value={99999.9901}
  maxLength={25}
  thousandSeparator=","
  decimalPrecision={5}
/>