React UI Components Documentation

Sets or gets the animationShowDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} animationShowDelay={400}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationHideDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} animationHideDelay={400}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the boxSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} boxSize={'18px'}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the checked property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} checked={true}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} disabled={true}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableContainerClick property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} enableContainerClick={false}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the groupName property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} groupName={groupName}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the hasThreeStates property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} hasThreeStates={true}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} rtl={true}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25} theme={'artic'}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the Radio Button is checked.

Code examples

Bind to the checked event of jqxRadioButton.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.on('checked', (event) => {
            // Do Something...
        });
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the change event of jqxRadioButton.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.on('change', (event) => {
            // Do Something...
        });
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the Radio Button is unchecked.

Code examples

Bind to the unchecked event of jqxRadioButton.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.on('unchecked', (event) => {
            // Do Something...
        });
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.check();
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.disable();
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.destroy();
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.enable();
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.focus();
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.render();
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRadioButton.uncheck();
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRadioButton from 'jqwidgets-react/react_jqxradiobutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myRadioButton.val();
    }

    render() {          
        return (
            <div>
                <JqxRadioButton ref='myRadioButton'
                    width={250} height={25}>
                    <span>6 Months Contract</span>
                </JqxRadioButton>
                <JqxRadioButton
                    width={250} height={25}>
                    <span>12 Months Contract</span>
                </JqxRadioButton>
            </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));