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 appearance everywhere.

<NumericInput/>

You can use className for adding CSS classes. This component was designed play well with Bootstrap and here is an example with .form-control class.

<NumericInput className="form-control"/>

You can use style={ false } to disable the inline styles. It's up to you to provide your own CSS in this case.

<NumericInput className="form-control" style={ false }/>

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}/>

<NumericInput disabled value={23.45}/>

<NumericInput readOnly value={23.45}/>

<NumericInput value={-23.45} precision={2} size={6} step={0.01} mobile={false} style={{ wrap: { background: '#E2E2E2', boxShadow: '0 0 1px 1px #fff inset, 1px 1px 5px -1px #000', padding: '2px 2.26ex 2px 2px', borderRadius: '6px 3px 3px 6px', fontSize: 32 }, input: { borderRadius: '4px 2px 2px 4px', color: '#988869', padding: '0.1ex 1ex', border: '1px solid #ccc', marginRight: 4, display: 'block', fontWeight: 100, textShadow: 1px 1px 1px rgba(0, 0, 0, 0.1) }, 'input:focus' : { border: '1px inset #69C', outline: 'none' }, arrowUp: { borderBottomColor: 'rgba(66, 54, 0, 0.63)' }, arrowDown: { borderTopColor: 'rgba(66, 54, 0, 0.63)' } }}/>

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:

<NumericInput name="my_number" readOnly disabled={false} autoComplete="on" autoCorrect="on" autoFocus={false} form="some-form" placeholder="Enter a number" required size="14" spellcheck="false" tabindex="5"/>

The widget can be switched to mobile appearance using the mobile prop. It can be true, false or "auto". The default value is auto which evaluates to the result of ('ontouchstart' in document). You can use true or false to force it staing into one mode or to trovide your custom detection logic like mobile={ myTestFuncton() } but keep in mind that this will only be used once when the component is created.

<NumericInput mobile />

<NumericInput mobile className="form-control" />

Interactive example (click to toggle)