Inputs / RadioButton / Getting Started
material theme

Getting Started with KendoReact RadioButton

The KendoReact RadioButton lets the user to choose only one from multiple options.

The RadioButton is designed to replace the <input type="radio"> HTML5 tag and provides the Kendo UI specific styling.

The Inputs package is part of KendoReact, a professionally built commercial UI library. To try out this package 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 RadioButton is typically used within a RadioGroup with the same name attribute. All regular input type="radio" HTML attributes are applicable.

The KendoReact RadioButton is distributed through NPM under the kendo-react-inputs package.

The following example demonstrates the RadioButton component in action.

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

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

const App = () => {
    const [selectedValue, setSelectedValue] = React.useState('first');

    const handleChange = React.useCallback(
        (e) => {
            setSelectedValue(e.value);
        },
        [setSelectedValue]
    );

    return (
        <div>
            <RadioButton name="group1" value="first" checked={selectedValue === 'first'} label="First" onChange={handleChange} />
            <br />
            <RadioButton name="group1" value="second" checked={selectedValue === 'second'} label="Second" onChange={handleChange} />
            <br />
            <RadioButton name="group1" value="third" checked={selectedValue === 'third'} label="Third" onChange={handleChange} />
        </div>
    );
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Functionality and Features

Is this article helpful?

Not finding the help you need?

Contact Support