---
title: Overview
position: 1
seo_title: Overview of the RadioGroup Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  RadioGroup component and its types, check out the extensive set of available
  options in its live demo, and master its appearance by setting the layout as
  you wish on the fly.
---
## RadioGroup Overview

The RadioGroup is a user interface (UI) element that allows users to select a single option from a group of mutually exclusive choices. It provides a clear and organized way to present and manage options, ensuring that only one radio button can be selected at a time within the group. The RadioGroup component simplifies user input and enhances usability by guiding users to make a single selection from a predefined set of options.

### Live Demo

<LiveDemo data='{"links":[{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/radiogroup/appearance"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/radiogroup/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/inputs/radiogroup"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/radiogroup"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/radiogroup"}],"demo":"components/radio-group/overview"}'></LiveDemo>

### Appearance

RadioGroups provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI RadioGroup, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

#### Anatomy

The next image shows the anatomy of a RadioGroup and summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"RadioButton"},{"text":"RadioGroup"}]}'>![A Telerik and Kendo UI RadioGroup component with the radio button and radio button group.](images/components-radiogroup-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI RadioGroup including a radio button and a radio button group")</BlueprintImage>

#### Layout

The `layout` property of the RadioGroup component allows you to choose between a horizontal and vertical layout, depending on the specific design requirements and available space. The horizontal layout is ideal when the space is limited or when a side-by-side comparison of options is desired, while the vertical layout is well-suited for scenarios where there is ample vertical space and a clear, top-to-bottom presentation of options is preferred. With the ability to customize the layout, the RadioGroup provides a versatile solution for organizing and selecting from a set of mutually exclusive options.

`layout`  provides the following available options:

* `horizontal`&mdash;Renders radio buttons in a horizontal layout.
* `vertical`&mdash;Renders radio buttons in a vertical layout.

<BlueprintImage data='{"description":"","labels":[{"text":"Vertical"},{"text":"Horizontal"}]}'>![Two Telerik and Kendo UI RadioGroup components demonstrating the horizontal and the vertical layout respectively](images/components-radiogroup-overview-layout.png "The available layout options for the Telerik and Kendo UI RadioGroup including horizontal and vertical")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>

<ExternalResource data='{"title":"Telerik UI for Blazor RadioGroup","description":"Find more information about the Telerik UI for Blazor RadioGroup in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/radiogroup/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery RadioGroup","description":"Find more information about the Kendo UI for jQuery RadioGroup in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/radiogroup/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact RadioGroup","description":"Find more information about the KendoReact RadioGroup in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup"}'>![KendoReact logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue RadioGroup","description":"Find more information about the Kendo UI for Vue RadioGroup in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/inputs/radiogroup"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core RadioGroup","description":"Find more information about the Telerik UI for ASP.NET Core RadioGroup component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/editors/radiogroup/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC RadioGroup","description":"Find more information about the Telerik UI for ASP.NET MVC RadioGroup component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/editors/radiogroup/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>