React UI Components Documentation

Sets or gets the delay of the fade animation when the Radio Button is going to be checked.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();  
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
        animationShowDelay={500}>
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the delay of the fade animation when the Radio Button is going to be unchecked.

Sets or gets the Radio Button's size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();  
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
        boxSize={'18px'}>
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the radio 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 JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();  
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
        checked={true}>
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the Radio 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 JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();  
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
        disabled={true}>
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the clicks on the container are handled as clicks on the rounded button.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();  
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
        enableContainerClick={false}>
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the group name. When this property is set, checking a radio button from the group, will uncheck only the radio buttons from the same group.

Sets or gets whether the radio button has 3 states - checked, unchecked and indeterminate.

Sets or gets the jqxRadioButton's height.

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

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 JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();  
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
        rtl={true}>
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
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 JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();  
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
        theme={'material'}>
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxRadioButton's width.

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

This event is triggered when the Radio Button is checked.

Code examples

Bind to the checked event of jqxRadioButton.

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

This is triggered when the Radio Button's state changes from one state to another.

Code examples

Bind to the change event of jqxRadioButton.

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

This event is triggered when the Radio Button is unchecked.

Code examples

Bind to the unchecked event of jqxRadioButton.

Checks the radio button.

Disables the radio button.

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 JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();
 
  public componentDidMount(): void {
    this.myRadioButton.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
       >
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables the radio button.

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 JqxRadioButton, { IRadioButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxradiobutton';
 
class App extends React.PureComponent<{}, IRadioButtonProps> {
  private myRadioButton = React.createRef<JqxRadioButton>();
 
  public componentDidMount(): void {
    this.myRadioButton.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxRadioButton ref={this.myRadioButton} 
       >
        Radio Button
      </JqxRadioButton>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the widget.

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

Unchecks the radio button.

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