React UI Components Documentation

Sets or gets the checked property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27} checked={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the orientation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27} orientation={'vertical'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onLabel property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27} onLabel={'On'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the offLabel property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27} offLabel={'Off'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the thumbSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27} thumbSize={'30%'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the switch button is checked.

Code examples

Bind to the checked event of jqxSwitchButton.

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

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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.

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

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the switch button is unchecked.

Code examples

Bind to the unchecked event of jqxSwitchButton.

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

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxSwitchButton from 'jqwidgets-react/react_jqxswitchbutton.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.mySwitchButton.toggle();
    }

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {          
        return (
            <JqxSwitchButton ref='mySwitchButton'
                width={81} height={27}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));