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.

The Checkbox component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

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 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

Is this article helpful?

Not finding the help you need?

Contact Support