React RadioButtonGroup

Overview

The KendoReact RadioButtonGroup is a component that is used when two or more options need to be available from a RadioButton. This helps with managing the current values available for users, validation and integration with forms, and how to display the group of RadioButtons on the page.

See React RadioButtonGroup Overview demo

Controlled and Uncontrolled Modes

By default, the KendoReact RadioButtonGroup maintains its own state (controlled mode). But by setting the state of the component, the KendoReact RadioButtonGroup becomes an uncontrolled React component.

See React RadioButtonGroup Controlled and Uncontrolled Modes demo

Default State

The React RadioButtonGroup enables developers to either render the component without an initial value or set an initial value through a default value property.

See React RadioButtonGroup Default State demo

Layout

Toggling between horizontal and vertical layouts for the KendoReact RadioButtonGroup component can be done by interacting with a single property.

See React RadioButtonGroup Layout demo

Forms Support

The KendoReact RadioButtonGroup component can easily be added to a HTML form element, third-party React form libraries or the KendoReact Form component.

See React RadioButtonGroup Forms Support demo

Keyboard Navigation

Navigating through and selecting values in the React RadioButtonGroup can be done 100% via keyboard interactions.

See React RadioButtonGroup Keyboard Navigation demo

Accessibility

Thanks to compliance with Section 508 and WAI-ARIA standards, the KendoReact RadioButtonGroup is compliant with modern accessibility standards. It also has a AAA rating with WCAG 2.0.

See React RadioButtonGroup Accessibility demo