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.

Copy Codeimport * 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

• Disabled Checkbox
• Controlled mode
• Default state
• Labels
• Forms support
• Globalization
• Keyboard navigation
• Accessibility

Suggested Links

• API Reference of the Checkbox