Grouping in .NET MAUI Radio Button (SfRadioButton)

19 Sep 20246 minutes to read

Group Key

The GroupKey in .NET MAUI Radio Button allows you to group a set of radio buttons present inside any layout. By grouping in this way, you can select only one radio button that comes under same GroupKey at a time.

• CheckedItem - Gets the current checked item from the .NET Maui Radio Button group.

XAML

<ContentPage.Resources>
        <syncfusion:SfRadioGroupKey x:Key="carBrand"/>
        <syncfusion:SfRadioGroupKey x:Key="bikeBrand"/>
    </ContentPage.Resources>

    <StackLayout>
        <syncfusion:SfRadioButton Text="Honda" GroupKey="{StaticResource carBrand}"/>
        <syncfusion:SfRadioButton Text="Hyundai" GroupKey="{StaticResource carBrand}"/>
        <syncfusion:SfRadioButton Text="Volkswagen" GroupKey="{StaticResource carBrand}"/>
        <syncfusion:SfRadioButton Text="Yamaha" GroupKey="{StaticResource bikeBrand}"/>
        <syncfusion:SfRadioButton Text="Bajaj" GroupKey="{StaticResource bikeBrand}"/>
    </StackLayout>

C#

SfRadioGroupKey carBrand = new SfRadioGroupKey();
    SfRadioGroupKey bikeBrand = new SfRadioGroupKey();

    SfRadioButton honda = new SfRadioButton() { Text = "Honda", GroupKey = carBrand };
    SfRadioButton hyundai = new SfRadioButton() { Text = "Hyundai", GroupKey = carBrand };
    SfRadioButton volkswagen = new SfRadioButton() { Text = "Volkswagen", GroupKey = carBrand };
    SfRadioButton yamaha = new SfRadioButton() { Text = "Yamaha", GroupKey = bikeBrand };
    SfRadioButton bajaj = new SfRadioButton() { Text = "Bajaj", GroupKey = bikeBrand };

    StackLayout stackLayout = new StackLayout();
    stackLayout.Children.Add(honda);
    stackLayout.Children.Add(hyundai);
    stackLayout.Children.Add(volkswagen);
    stackLayout.Children.Add(yamaha);
    stackLayout.Children.Add(bajaj);
    this.Content = stackLayout;

CheckedChanged event

The CheckedChanged event of SfRadioGroup occurs when a checked item is changed. The argument contains the following information:

• PreviousItem - Gets the previously checked radio button from group.
• CurrentItem - Gets the currently checked radio button from group.

.NET MAUI Radio Group

SfRadioGroup is a container that contains a set of radio buttons. When you select a radio button in a .NET MAUI Radio Button group, all other items will be automatically deselected. At any given time, you can only select one radio button from the same .NET MAUI Radio Button group. It also includes the CheckedChanged event and the CheckedItem property.

XAML

<syncfusion:SfRadioGroup>
        <syncfusion:SfRadioButton Text="Net banking" />
        <syncfusion:SfRadioButton Text="Debit card" />
        <syncfusion:SfRadioButton Text="Credit card" />
    </syncfusion:SfRadioGroup>

C#

SfRadioGroup radioGroup = new SfRadioGroup();
    SfRadioButton netBanking = new SfRadioButton() {Text = "Net banking"};
    SfRadioButton debitCard = new SfRadioButton() {Text = "Debit card"};
    SfRadioButton creditCard = new SfRadioButton() {Text = "Credit card"};

    radioGroup.Children.Add(netBanking);
    radioGroup.Children.Add(debitCard);
    radioGroup.Children.Add(creditCard);
    this.Content = radioGroup;

Orientation in .NET MAUI Radio Group

SfRadioGroup supports horizontal and vertical orientations. By default, SfRadioGroup is rendered with vertical orientation. You can change the orientation using the Orientation property.

XAML

<SyncfusionButton:SfRadioGroup Orientation="Horizontal">
        <SyncfusionButton:SfRadioButton Text="Net banking" />
        <SyncfusionButton:SfRadioButton Text="Debit card" />
        <SyncfusionButton:SfRadioButton Text="Credit card" />
    </SyncfusionButton:SfRadioGroup>

C#

SfRadioGroup radioGroup = new SfRadioGroup(){Orientation = StackOrientation.Horizontal};
    SfRadioButton netBanking = new SfRadioButton() {Text = "Net banking"};
    SfRadioButton debitCard = new SfRadioButton() {Text = "Debit card"};
    SfRadioButton creditCard = new SfRadioButton() {Text = "Credit card"};

    radioGroup.Children.Add(netBanking);
    radioGroup.Children.Add(debitCard);
    radioGroup.Children.Add(creditCard);
    this.Content = radioGroup;

Selected value

The .NET MAUI RadioGroup class defines a SelectedValue property, of type object, This property represents the Value of the checked .NET MAUI RadioButton within a group defined.

When any .NET MAUI RadioButton within a .NET MAUI RadioGroup is checked, the Value of that RadioButton is assigned to the SelectedValue property of the RadioGroup. The SelectedValue is dynamically updated whenever a different RadioButton within the RadioGroup is checked.

XAML

<syncfusion:SfRadioGroup SelectedValue="DebitCard">
    <syncfusion:SfRadioButton Text="Net banking" Value="NetBanking"/>
    <syncfusion:SfRadioButton Text="Debit card" Value="DebitCard"/>
    <syncfusion:SfRadioButton Text="Credit card" Value="CreditCard"/>
</syncfusion:SfRadioGroup>

C#

SfRadioGroup radioGroup = new SfRadioGroup
{
    SelectedValue = "DebitCard"
};
SfRadioButton netBankingRadioButton = new SfRadioButton
{
    Text = "Net banking",
    Value = "NetBanking"
};
SfRadioButton debitCardRadioButton = new SfRadioButton
{
    Text = "Debit card",
    Value = "DebitCard"
};
SfRadioButton creditCardRadioButton = new SfRadioButton
{
    Text = "Credit card",
    Value = "CreditCard"
};
radioGroup.Children.Add(netBankingRadioButton);
radioGroup.Children.Add(debitCardRadioButton);
radioGroup.Children.Add(creditCardRadioButton);