Labels

The RadioButton 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 accepts string. To set position of the label, use the labelPlacement property, which accepts before and after values.

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

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


const App = () => {
    return(
        <div>
            <RadioButton label="RadioButton label" name="group1" value="default label" checked/>
            <br />
            <RadioButton label="RadioButton label before" labelPlacement="before" name="group1" value="label before"/>
        </div>
    )
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Custom labels

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

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

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


const App = () => {
    return(
        <div>
            <RadioButton id="rb1" name="group1" value="on" checked>
                <label htmlFor="rb1" className={'k-radio-label'} style={{ 'display': 'inline-block'}}>
                    Right-to-left support <strong style={{color: 'green'}}>on</strong>
                </label>
            </RadioButton>
            <br />
            <RadioButton id="rb2" name="group1" value="off">
                <label htmlFor="rb2" className={'k-radio-label'} style={{ 'display': 'inline-block'}}>
                    Right-to-left support <strong style={{color: 'red'}}>off</strong>
                </label>
            </RadioButton>
        </div>
    )
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);