Labels

The Checkbox enables you to add label next to the input, either before or after it.

Setting Up the Label

To set the label, use the label property, which accept string. To set position of the label, use the labelPlacement property, which accept before and after values.

class App extends React.Component {
    render() {
        return (
            <div>
                <Checkbox id={'chb1'} label={'Checkbox label'}/>
                <br />
                <br />
                <Checkbox id={'chb2'} label={'Checkbox label before'} labelPlacement={'before'}/>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Custom labels

To create a custom labels, set id prop of the Checkbox and provide custom markup for the label, including the for attribute for it.

class App extends React.Component {
    render() {
        return (
            <div>
                <Checkbox id={'chb1'}>
                  <label for={'chb1'} className={'k-checkbox-label'} style={{ 'display': 'inline-block'}}>
                      By clicking <a href="#">Sign Up</a>, you agree to our Terms and Conditions.
                  </label>
                </Checkbox>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);