Properties

NameTypeDefault
allowNull boolean true

Determines whether the widget's value could be null. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        allowNull={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
decimal number | string 0

Sets or gets the input's number. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        decimal={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Determines whether jqxNumberInput is disabled. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
decimalDigits number | string 2

Indicates the number of decimal places to use in numeric values. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        decimalDigits={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
decimalSeparator number | string '.'

Sets or gets the char to use as the decimal separator in numeric values. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        decimalSeparator={','}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
digits number | string 8

Sets or gets the digits in the input 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        digits={8}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
groupSeparator string ','

Sets or gets the string that separates groups of digits to the left of the decimal in numeric values. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        groupSeparator={'.'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
groupSize number | string 3

Sets or gets the number of digits in each group to the left of the decimal in numeric values. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        groupSize={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height string | number null

Sets or gets the height of the input in pixels. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
inputMode NumberInputMode 'advanced'
NumberInputMode: "advanced" | "simple"

Sets or gets the input's mode.

Possible Values: 
'advanced'- the number input behavior resembles a masked input with numeric mask
'simple'-the  widget works as a normal textbox, but restricts the user's input to numbers
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        inputMode={'simple'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
min number | string -99999999

Sets or gets the input's minimum value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        min={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
max number | string 99999999

Sets or gets the input's maximum value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        max={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
negativeSymbol string '-'

Sets or gets the string to use as negative symbol. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        negativeSymbol={'-'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
placeHolder number | string ""

Determines the widget's place holder displayed when the widget's value is null.

promptChar NumberInputPromptChar -
NumberInputPromptChar: "_" | "?" | ";" | "#"

Sets or gets the prompt char displayed when an editable char is empty.

Possible Values: 
'_'
'?'
';'
'#'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        promptChar={'#'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        rtl={true} spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
readOnly boolean false

Sets or gets the readOnly state of the input. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        readOnly={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinMode NumberInputMode 'advanced'
NumberInputMode: "advanced" | "simple"

Sets or gets the spin mode.

Possible Values: 
'advanced'- the value is increased depending on the caret's position
'simple'-pecifies that the spin behavior is disabled
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true} spinMode={'simple'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinButtons boolean false

Shows or hides the spin buttons. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinButtonsWidth number 18

Sets or gets the width of the spin buttons. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true} spinButtonsWidth={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinButtonsStep number | string 1

Sets or gets the increase/decrease step. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true} spinButtonsStep={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
symbol string ''

Sets or gets the string to use as currency or percentage symbol. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        symbol={'$'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
symbolPosition NumberInputSymbolPosition 'left'
NumberInputSymbolPosition: "left" | "right"

Sets or gets the position of the symbol in the input.

Possible Values: 
'left'
'right'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        symbol={'@'} symbolPosition={'right'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
textAlign NumberInputTextAlign 'right'
NumberInputTextAlign: "left" | "right" | "center"

Sets or gets the alignment. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        textAlign={'left'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
template NumberInputTemplate 'default'
NumberInputTemplate: "default" | "primary" | "success" | "warning" | "danger" | "info"

Determines the template as an alternative of the default styles.

Possible Values: 
'default' - the default template. The style depends only on the "theme" property value.
'primary' - dark blue style for extra visual weight.
'success' - green style for successful or positive action.
'warning' - orange style which indicates caution.
'danger' - red style which indicates a dangerous or negative action.
'info' - blue button, not tied to a semantic action or use.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true} template={'success'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
theme string '' 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value number | string null 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        value={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width string | number null

Sets or gets the width of the input in pixels. Only positive values have effect. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        width={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

change Event

This event is triggered when the value is changed and the control's focus is lost.

Code examples

Bind to the change event of jqxNumberInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} onChange={this.onChange} 
       
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
textchanged Event

This event is triggered when the user entered entered a text.

Code examples

Bind to the textchanged event of jqxNumberInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} onTextchanged={this.onTextchanged} 
       
      />
    );
  }
 
  private onTextchanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
valueChanged Event

This event is triggered after value is changed.

Code examples

Bind to the valueChanged event of jqxNumberInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} onValueChanged={this.onValueChanged} 
       
      />
    );
  }
 
  private onValueChanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
clear None

Clears the value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.clear();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
destroy None

Destroys the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
focus None

Focuses the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getDecimal None

Gets the value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.getDecimal();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
setDecimal index

Sets the value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.setDecimal(200);
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
val value

Sets or gets the value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.val();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);