Skip to main content

Number Input

A number input component. Can be used as part of an ISLE dashboard or standalone. In the latter case, you want to handle changes via the onChange attribute or bind the value to a global variable via the bind attribute.

Options​

  • bind | string: name of global variable for the number to be assigned to. Default: ''.
  • defaultValue | number: value indicating the default value of the input at startup. Default: 0.
  • disabled | boolean: boolean indicating whether the input is active or not. Default: false.
  • inline | boolean: indicates whether the input is displayed inline. Default: false.
  • legend | (string|node): string indicating the text displayed next to the number input. Default: none.
  • max | number: number indicating the maximum value that may be inserted. Default: null.
  • min | number: number indicating the smallest possible value that may be inserted. Default: null.
  • numbersOnly | boolean: controls whether only numbers are accepted. Default: true.
  • placeholder | string: string indicating the text displayed when the input is empty (requires defaultValue to be set to null or undefined). Default: '0'.
  • onBlur | function: callback function to be invoked when using a blur method. Default: onBlur() {}.
  • onChange | function: callback function to be invoked when number input is changed. Default: onChange() {}.
  • onKeyDown | function: callback function to be invoked when any key is pressed down. Default: onKeyDown() {}.
  • onKeyPress | function: callback function to be invoked when any key is entered. Default: onKeyPress() {}.
  • onKeyUp | function: callback function to be invoked when key is released. Default: onKeyUp() {}.
  • step | (number|string): number indicating the incremental changes when using the increment arrows. Default: 1.
  • style | object: CSS inline styles. Default: {}.
  • inputStyle | object: CSS inline styles for input element. Default: {}.
  • value | number: number value (for controlled component). Default: none.
  • tooltip | string: tooltip string (if not set, the tooltip is automatically generated). Default: none.
  • tooltipPlacement | string: direction of the tooltip. Default: 'left'.

Examples​

Live Editor
Result
ReferenceError: Provider is not defined