Inputs / Checkbox / Getting Started
material theme

Getting Started with KendoReact Checkbox

The KendoReact Checkbox lets the user toggle between checked, unchecked and the optional indeterminate states.

The Checkbox is designed to replace the <input type="checkbox"> HTML5 tag and provides the Kendo UI specific styling.

Basic Usage

The CheckBox is typically used to represent boolean values via a binary checked state. All regular input type="checkbox" HTML attributes are applicable.

The KendoReact Checkbox component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-inputs package.

The following example demonstrates the Checkbox component in action.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Checkbox } from '@progress/kendo-react-inputs';

class App extends React.Component {
    render() {
        return (
            <div>
                <Checkbox label={'Unchecked state'}/>
                <br />
                <Checkbox defaultChecked={true} label={'Checked state'}/>
                <br />
                <Checkbox value={null} label={'Indeterminate state'}/>
                <br />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Functionality and Features

 /