# KendoReact RadioGroup Overview

The KendoReact RadioGroup is a wrapper used to group two or more RadioButton components.

The KendoReact RadioGroup component is part of the KendoReact library of React UI components. It is distributed through NPM under the [kendo-react-inputs package](https://www.npmjs.com/package/@progress/kendo-react-inputs).

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates the RadioGroup component in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/radiogroup/overview/func/source.txt)

## Layout

The RadioGroup supports `horizontal` and `vertical` layouts, controlled via the [`layout`](https://www.telerik.com/kendo-react-ui/components/inputs/api/radiogroupprops#layout) property. The default layout is `vertical`.

The following example demonstrates how to toggle between horizontal and vertical `layout` options for the RadioGroup.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/radiogroup/overview/layout/source.txt)

## Label Placement

The RadioGroup allows you to control whether labels appear before or after their radio button via the [`labelPlacement`](https://www.telerik.com/kendo-react-ui/components/inputs/api/radiogroupprops#labelplacement) property. The default placement is `after`.

The following example demonstrates how to toggle the `labelPlacement` between `before` and `after` positions in the RadioGroup.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/radiogroup/overview/label-placement/source.txt)

> The RadioGroup is part of the [KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs) component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the RadioGroup and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/get-started) guide.

## Key Features

* [Controlled Mode](https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup/controlled_mode)—Take advantage of the built-in options that allow you to control the state of the RadioGroup.
* [Default State](https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup/default_state)—The RadioGroup allows you to set its default value.
* [Layout](https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup/layout)—You can customize the radio buttons and arrange them in the built-in horizontal and vertical layouts.
* [Forms Support](https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup/forms_support)—You can easily integrate the RadioGroup with an [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), a [`KendoReact Form`](https://www.telerik.com/kendo-react-ui/components/form), or a third-party React form library.
* [Globalization](https://www.telerik.com/kendo-react-ui/components/inputs/globalization)—The KendoReact RadioGroup comes with globalization features that allow you to create applications that can be used all over the world.
* [Keyboard Navigation](https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup/keyboard-navigation)—The RadioGroup support numerous keyboard shortcuts that allow users to interact with the component.
* [Accessibility](https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup/accessibility/wai-aria-support)—The RadioGroup is accessible for screen readers and provides full WAI-ARIA support.

## Suggested Links

* [Getting Started with the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/get-started)
* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/)
* [API Reference of the RadioGroupProps](https://www.telerik.com/kendo-react-ui/components/inputs/api/radiogroupprops)