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.

Example:

<NumberInput
    legend="Number of observations"
    defaultValue={20}
    step={5}
/>

Open interactive preview

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: string indicating the text displayed next to the number input. Default: ''.
  • 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.
  • 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() {}.
  • step | (number|string): number indicating the incremental changes when using the increment arrows. Default: 1.
  • value | number: number value (for controlled component). Default: none.
  • width | number: number indicating the width of the input bar in pixels. Default: 80.

results matching ""

    No results matching ""