This will behave exactly like <input type="number">. It will create an empty numeric input that starts changing from zero. The difference is that this works on any browser and does have the same appearnce everywhere.

<NumericInput/>

You can use className for adding CSS classes. This component was designed play well with Bootstrap.

<NumericInput className="form-control"/>

Most of the time you will need to specify min, max and value:

<NumericInput min={0} max={100} value={50}/>

You can use to use step and precision props to make your input working with floating point numbers:

<NumericInput step={0.1} precision={2} value={50.3}/>

By default the component displays the value number as is. However, you can provide your own format funtion that will be called with the numeric value and is expected to return the string that will be rendered in the input:

function myFormat(num) { return num + '$'; }

<NumericInput precision={2} value={50.3} step={0.1} format={myFormat}/>

You can use any additional HTML attributes that make sence, just don't forget to camelCase them as JSX requires. Only the type attribute will be overriden to text. Here is an example: