Layout

You can easily customize Radio Buttons as well as arrange them in two different built-in layouts inducing Horizontal, and Vertical.

Use its layout property.

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

import { RadioGroup } from '@progress/kendo-react-inputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';

const tasks = [
    { label: 'To Do', value: 'to do', className: 'task red' },
    { label: 'In Progress', value: 'in progress', className: 'task orange' },
    { label: 'Ready for Test', value: 'ready for test', className: 'task blue' },
    { label: 'Done', value: 'done', className: 'task green' }
];

const App = () => {
    const [layout, setLayout] = React.useState('vertical');
    const handleChange = (e) => {
        setLayout(e.value);
    }

    return (
        <div>
            <p>Change the layout:</p>
            <DropDownList
                data={['horizontal', 'vertical']}
                value={layout}
                onChange={handleChange}
            />
            <hr />
            <RadioGroup data={tasks} layout={layout} />
            <style>
                {`.k-radio.task { background: white; border-color: grey; box-shadow: none; }
                .k-radio.red { color: red; }
                .k-radio.orange { color: orange; }
                .k-radio.blue { color: blue; }
                .k-radio.green { color: green; }`}
            </style>
        </div>
    )
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);