React UI Components Documentation

Sets or gets the check state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
 
class App extends React.PureComponent<{}, ISwitchButtonProps> {
  private mySwitchButton = React.createRef<JqxSwitchButton>();  
  
  public render() {
    return (
      <JqxSwitchButton ref={this.mySwitchButton} 
        checked={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the switch button is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
 
class App extends React.PureComponent<{}, ISwitchButtonProps> {
  private mySwitchButton = React.createRef<JqxSwitchButton>();  
  
  public render() {
    return (
      <JqxSwitchButton ref={this.mySwitchButton} 
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height.

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

Determines the jqxSwitchButton's orientation.

'horizontal' 

'vertical'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
 
class App extends React.PureComponent<{}, ISwitchButtonProps> {
  private mySwitchButton = React.createRef<JqxSwitchButton>();  
  
  public render() {
    return (
      <JqxSwitchButton ref={this.mySwitchButton} 
        orientation={'vertical'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the string displayed when the button is checked.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
 
class App extends React.PureComponent<{}, ISwitchButtonProps> {
  private mySwitchButton = React.createRef<JqxSwitchButton>();  
  
  public render() {
    return (
      <JqxSwitchButton ref={this.mySwitchButton} 
        onLabel={'On Label'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the string displayed when the button is unchecked.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
 
class App extends React.PureComponent<{}, ISwitchButtonProps> {
  private mySwitchButton = React.createRef<JqxSwitchButton>();  
  
  public render() {
    return (
      <JqxSwitchButton ref={this.mySwitchButton} 
        offLabel={'Off Label'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the size of the thumb in percentages.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
 
class App extends React.PureComponent<{}, ISwitchButtonProps> {
  private mySwitchButton = React.createRef<JqxSwitchButton>();  
  
  public render() {
    return (
      <JqxSwitchButton ref={this.mySwitchButton} 
        thumbSize={'30%'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Sets or gets the width.

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

This event is triggered when the switch button is checked.

Code examples

Bind to the checked event of jqxSwitchButton.

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

This event is triggered when the switch button's state changes from one state to another.

Code examples

Bind to the change event of jqxSwitchButton.

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

This event is triggered when the switch button is unchecked.

Code examples

Bind to the unchecked event of jqxSwitchButton.

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

Checks the button.

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

Disables the switch button.

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

Enables the switch button.

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

Toggles the check state. This method is automatically called when the user clicks the switch button.

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

Unchecks the button.

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

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 JqxSwitchButton, { ISwitchButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxswitchbutton';
 
class App extends React.PureComponent<{}, ISwitchButtonProps> {
  private mySwitchButton = React.createRef<JqxSwitchButton>();
 
  public componentDidMount(): void {
    this.mySwitchButton.current!.val();
  }
   
  
  public render() {
    return (
      <JqxSwitchButton ref={this.mySwitchButton} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);