React UI Components Documentation

Sets or gets the animationShowDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' animationShowDelay={300} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationHideDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' animationHideDelay={300} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the boxSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' boxSize={'15px'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the checked property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' checked={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' disabled={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableContainerClick property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' enableContainerClick={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the groupName property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' groupName={'panel'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' height={100} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the hasThreeStates property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' hasThreeStates={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the locked property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' locked={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' rtl={true} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' theme={'energyblue'} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' width={300} />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the checkbox is checked.

Code examples

Bind to the checked event of jqxCheckBox.

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the change event of jqxCheckBox.

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the checkbox's checked property is going to be null.

Code examples

Bind to the indeterminate event of jqxCheckBox.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCheckBox.on('indeterminate', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the checkbox is unchecked.

Code examples

Bind to the unchecked event of jqxCheckBox.

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCheckBox from 'jqwidgets-react/react_jqxcheckbox.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCheckBox.indeterminate();
    }

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {             
        return (
            <JqxCheckBox ref='myCheckBox' />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));