Top
NumericInput API - API
NumericInput API
Props (24)
Callback Props (1)
Styling Props (9)
Methods (1)
Bool
default: true
Whether to allow floats.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      allowFloat: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.allowFloat}
          onChange={(allowFloat) => this.setState({ allowFloat })}
        >
          Allow float
        </CheckBox>
      </div>
      <NumericInput
        style={{ width: 200 }}
        allowFloat={this.state.allowFloat}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether to allow negative numbers.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      allowNegative: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.allowNegative}
          onChange={(allowNegative) => this.setState({ allowNegative })}
        >
          Allow negative
        </CheckBox>
      </div>
      <NumericInput
        style={{ width: 200 }}
        allowNegative={this.state.allowNegative}
      />
    </div>
  }
}

export default () => <App />
start|end
default: "end"
Position of currency relative to text.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = ['start', 'end'].map((position) => {
  return {
    label: position,
    id: position
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      currencyPosition: 'end'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Currency position:{' '}
        <ComboBox
          style={{ width:100 }}
          inlineFlex
          collapseOnSelect
          dataSource={dataSource}
          value={this.state.currencyPosition || 'end'}
          onChange={(value) => this.setState({ currencyPosition: value })}
        />
      </div>
      <div>
        <NumericInput
          style={{ width: 200 }}
          defaultValue={30}
          format="currency"
          currencyPosition={this.state.currencyPosition || 'end'}
        />
      </div>
    </div>
  }
}

export default () => <App />
string
default: undefined
Custom currency symbol, rendered after value when format="currency", overwrites the one specified by locale.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { label: 'dollar', id: '$'},
  { label: 'euro', id: '€'},
  { label: 'pound', id: '£'}
]

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      currencySymbol: '$'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Currency symbol:{' '}
        <ComboBox
          style={{ width:100 }}
          inlineFlex
          collapseOnSelect
          dataSource={dataSource}
          value={this.state.currencySymbol || '$'}
          onChange={(value) => this.setState({ currencySymbol: value })}
        />
      </div>
      <div>
        <NumericInput
          style={{ width: 200 }}
          defaultValue={30}
          format="currency"
          currencySymbol={this.state.currencySymbol || '$'}
        />
      </div>
    </div>
  }
}

export default () => <App />
string
default: undefined
Specifies initial value.
For controlled behaviour, see defaultValue.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  defaultValue={30}
  style={{ width: 200 }}
/>
Bool
default: true
Whether to show a clear button which allows to clear value from input. If true, the button is displayed only if the value is different to null.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enableClearButton: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableClearButton}
          onChange={(enableClearButton) => this.setState({ enableClearButton })}
        >
          Enable clear button
        </CheckBox>
      </div>
      <NumericInput
        style={{ width: 200 }}
        defaultValue={30}
        enableClearButton={this.state.enableClearButton}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether to enable value change with arrows.
When true, two arrows are rendered next to the input.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enableSpinnerTools: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableSpinnerTools}
          onChange={(enableSpinnerTools) => this.setState({ enableSpinnerTools })}
        >
          Enable spinner tools
        </CheckBox>
      </div>
      <NumericInput
        style={{ width: 200 }}
        defaultValue={30}
        enableSpinnerTools={this.state.enableSpinnerTools}
      />
    </div>
  }
}

export default () => <App />
currency|number|percentage
default: "number"
Specify the displayed value format. In case of currency use locale to select desired currency.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const formats = [
  { label: 'currency', id: 'currency' },
  { label: 'percentage', id: 'percentage'},
  { label: 'number', id: 'number' }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { format: 'number' }
  }

  render() {
    return <div>
      <p>
        Pick a format
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 200, marginRight: 20 }}
          dataSource={formats}
          onChange={(format) => {
            this.setState({format})
          }}
          value={this.state.format}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          format={this.state.format}
          locale="en-GB"
          defaultValue={20}
        />
      </div>
    </div>
  }
}

export default () => <App />
Object
default: undefined
This prop adds props directly on the input.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

const exportAction = () => {
  zippy.notification.first.addNotification({
      title: 'inputProps',
      content: <p>Input was clicked!</p>
    });
  }

export default () => <div>
  <NumericInput
    defaultValue={30}
    style={{ width: 200 }}
    inputProps={{
      style: { background: '#d3d3d3' },
      onClick: exportAction
    }}
  />
  <NotificationBoard id="first" />
</div>
String
default: undefined
Used to select currency when format="currency".
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 'fr-CA', id: 'fr-CA' },
  { label: 'en-GB', id: 'en-GB'},
  { label: 'de-DE', id: 'de-DE' }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { locale: 'en-GB' }
  }

  render() {
    return <div>
      <p>
        Chose a locale
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 200, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(locale) => {
            this.setState({locale})
          }}
          value={this.state.locale || 'en-GB'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          format="currency"
          locale={this.state.locale || 'en-GB'}
          defaultValue={20}
        />
      </div>
    </div>
  }
}

export default () => <App />
Number
default: undefined
Input max value.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 10, id: 10 },
  { label: 50, id: 50},
  { label: 100, id: 100 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { maxValue: 10 }
  }

  render() {
    return <div>
      <p>
        Pick a maxValue
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(maxValue) => {
            this.setState({maxValue})
          }}
          value={this.state.maxValue || '10'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          maxValue={this.state.maxValue * 1 || '10' * 1}
          defaultValue={5}
        />
      </div>
    </div>
  }
}

export default () => <App />
Number
default: undefined
Input min value.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 10, id: 10 },
  { label: 50, id: 50 },
  { label: 100, id: 100 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { minValue: 10 }
  }

  render() {
    return <div>
      <p>
        Pick a minValue
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(minValue) => {
            this.setState({minValue})
          }}
          value={this.state.minValue || '10'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          minValue={this.state.minValue * 1 || '10' * 1}
          defaultValue={120}
        />
      </div>
    </div>
  }
}

export default () => <App />
Number
default: undefined
Number of decimal places allowed.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 2, id: 2 },
  { label: 3, id: 3},
  { label: 5, id: 5 },
  { label: 10, id: 10 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { precision: 2 }
  }

  render() {
    return <div>
      <p>
        Pick a number of digits
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(precision) => {
            this.setState({precision})
          }}
          value={this.state.precision || '2'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          precision={this.state.precision * 1 || '2' * 1}
          defaultValue={3.141592653589}
        />
      </div>
    </div>
  }
}

export default () => <App />
string
default: undefined
Text added before value.
For text after value see suffix.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  style={{ width: 200 }}
  defaultValue={30}
  prefix="Age:"
/>
Bool
default: true
Whether NumericInput /> should have focus when value is changed onWheel.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      requireFocusOnStep: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.requireFocusOnStep}
          onChange={(requireFocusOnStep) => this.setState({ requireFocusOnStep })}
        >
        Require focus on step
        </CheckBox>
      </div>
      <NumericInput
        style={{ width: 200 }}
        requireFocusOnStep={this.state.requireFocusOnStep}
      />
    </div>
  }
}

export default () => <App />
Number
default: 10
Step used when value is changed with scroll wheel or with arrows while Shift key is pressed.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 10, id: 10 },
  { label: 30, id: 30 },
  { label: 50, id: 50 },
  { label: 100, id: 100 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { shiftStep: 10 }
  }

  render() {
    return <div>
      <p>
        Pick a number of steps, press Shift key and change the value
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(shiftStep) => {
            this.setState({shiftStep})
          }}
          value={this.state.shiftStep || '10'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          shiftStep={this.state.shiftStep * 1 || '10' * 1}
          defaultValue={30}
        />
      </div>
    </div>
  }
}

export default () => <App />
Bool
default: true
Enable value with ArrowUp and ArrowDown.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      spinOnArrowKeys: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.spinOnArrowKeys}
          onChange={(spinOnArrowKeys) => this.setState({ spinOnArrowKeys })}
        >
          Spin on arrow keys
        </CheckBox>
      </div>
      <NumericInput
        style={{ width: 200 }}
        spinOnArrowKeys={this.state.spinOnArrowKeys}
      />
    </div>
  }
}

export default () => <App />
Number
default: 1
Step used when value is changed with scroll wheel or with arrows.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 1, id: 1 },
  { label: 2, id: 2 },
  { label: 3, id: 3 },
  { label: 5, id: 5 },
  { label: 10, id: 10 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { step: 1 }
  }

  render() {
    return <div>
      <p>
        Pick a step and change the value
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(step) => {
            this.setState({step})
          }}
          value={this.state.step || '1'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          step={this.state.step * 1 || '1' * 1}
          defaultValue={30}
        />
      </div>
    </div>
  }
}

export default () => <App />
Number
default: 60
Delay between increments/decrements of value, when mouse is down over the spinner arrow.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 60, id: 60 },
  { label: 100, id: 100 },
  { label: 300, id: 300 },
  { label: 500, id: 500 },
  { label: 1000, id: 1000 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { stepDelay: 60 }
  }

  render() {
    return <div>
      <p>
        Step delay
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(stepDelay) => {
            this.setState({stepDelay})
          }}
          value={this.state.stepDelay || '60'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          stepDelay={this.state.stepDelay * 1 || '60' * 1}
          defaultValue={30}
        />
      </div>
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether to change value onWheel.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      stepOnWheel: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.stepOnWheel}
          onChange={(stepOnWheel) => this.setState({ stepOnWheel })}
        >
          Step on wheel
        </CheckBox>
      </div>
      <NumericInput
        style={{ width: 200 }}
        stepOnWheel={this.state.stepOnWheel}
      />
    </div>
  }
}

export default () => <App />
string
default: undefined
Text added after value.
For text before value see prefix.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  style={{ width: 200 }}
  defaultValue={30}
  suffix="years."
/>
start|end
default: "end"
Position of SpinnerTools relative to input.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 'start', id: 'start' },
  { label: 'end', id: 'end'}
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { toolPosition: 'end' }
  }

  render() {
    return <div>
      <p>
        Chose the position of the tools
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(toolPosition) => {
            this.setState({toolPosition})
          }}
          value={this.state.toolPosition || 'end'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          toolPosition={this.state.toolPosition || 'end'}
          defaultValue={30}
        />
      </div>
    </div>
  }
}

export default () => <App />
Number
default: undefined
Controlled value prop, used in combination with onChange to react to changes.
For uncontrolled behaviour, see defaultValue.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = { value: null }
  }

  render() {
    return <div>
      <p>Current value is: {this.state.value}.</p>
      <NumericInput
        style={{ width: 200 }}
        value={this.state.value}
        onChange={(value) => this.setState({ value })}
      />
    </div>
  }
}

export default () => <App />
string
default: undefined
When enableSpinnerTools=true a wrapper is used to hold the input and arrows.
This props adds props directly on the div wrapper.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

const exportAction = () => {
  zippy.notification.first.addNotification({
      title: 'wrapperProps',
      content: <p>Wrapper was clicked!</p>
    });
  }

export default () => <div>
  <NumericInput
    defaultValue={30}
    style={{ width: 200 }}
    wrapperProps={{
      onClick: exportAction,
      style: { border: '1px solid black' }
    }}
  />
  <NotificationBoard id="first" />
</div>
Fn(value)
default: undefined
Called when value changes.
It can be used to react to value change when is controlled.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = { value: null }
  }
  render() {
    return <NumericInput
      value={this.state.value}
      style={{ width: 200 }}
      onChange={(value) => this.setState({ value })}
    />
  }
}

export default () => <App />
Object
default: undefined
Inline style applied on arrow up spinner tool.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  defaultValue={30}
  arrowSize={20}
  style={{ width: 200 }}
  enableSpinnerTools
  arrowDownStyle={{ background: 'lightgreen' }}
/>
Number
default: 11
Size of SpinnerTools.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 10, id: 10 },
  { label: 14, id: 14 },
  { label: 18, id: 18 },
  { label: 20, id: 20 },
  { label: 30, id: 30 },
  { label: 40, id: 40 },
  { label: 50, id: 50 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { arrowSize: 10 }
  }

  render() {
    return <div>
      <p>
        Pick a size for arrows
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(arrowSize) => {
            this.setState({arrowSize})
          }}
          value={this.state.arrowSize || '10'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          arrowSize={this.state.arrowSize * 1 || '10' * 1}
          defaultValue={120}
        />
      </div>
    </div>
  }
}

export default () => <App />
Object
default: undefined
Inline style applied on arrow down spinner tool.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  defaultValue={30}
  arrowSize={20}
  style={{ width: 200 }}
  enableSpinnerTools
  arrowUpStyle={{ background: 'lightgreen' }}
/>
String
default: undefined
A className to be applied to the <NumericInput />. The passed value is appended to other classNames that the <NumericInput /> adds by default.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  defaultValue={30}
  style={{ width: 200 }}
  className="numeric-input-custom-class"
/>
String
default: undefined
A CSS className to be applied to the clear button.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  defaultValue={30}
  style={{ width: 200 }}
  clearButtonClassName="numeric-input-clear-button-class"
/>
String
default: undefined
Specify a color for clear button.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  defaultValue={30}
  style={{ width: 200 }}
  clearButtonColor="green"
/>
number
default: 9
Size of clear button.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/NumericInput/index.css'

const dataSource = [
  { label: 10, id: 10 },
  { label: 18, id: 18 },
  { label: 20, id: 20 },
  { label: 30, id: 30 },
  { label: 40, id: 40 },
  { label: 50, id: 50 }
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { clearButtonSize: 10 }
  }

  render() {
    return <div>
      <p>
        Pick a size for clear button
      </p>
      <div>
        <ComboBox
          inlineFlex
          style={{ width: 100, marginRight: 20 }}
          dataSource={dataSource}
          onChange={(clearButtonSize) => {
            this.setState({clearButtonSize})
          }}
          value={this.state.clearButtonSize || '10'}
          collapseOnSelect
        />
        <NumericInput
          style={{ width: 200 }}
          clearButtonSize={this.state.clearButtonSize * 1 || '10' * 1}
          defaultValue={12}
        />
      </div>
    </div>
  }
}

export default () => <App />
Object
default: undefined
Inline style applied on clear button.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  defaultValue={30}
  style={{ width: 200 }}
  clearButtonStyle={{ border: '1px solid #d3d3d3' }}
/>
Object
default: undefined
A style object to be applied to the <NumericInput />.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

export default () => <NumericInput
  defaultValue={30}
  style={{ background: '#d3d3d3', width: 200 }}
/>
Fn()
number
Returns the current numeric value.
It's value can be a string, see format.
import React from 'react'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: null}
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.setState({value: this.input.getNumericValue()})}>
          getNumericValue
        </Button>
      </div>
      {this.state.value && <div>The value is: {this.state.value}</div>}
      <NumericInput
        ref={ref => this.input = ref}
        defaultValue={30}
        style={{ width: 200 }}
        locale='en-GB'
        format="currency"
      />
    </div>
    }
}

export default () => <App />