Creating an application with .NET MAUI Radio Button

26 Feb 20246 minutes to read

This section explains the steps required to work with the SfRadioButton control for .NET MAUI.

To get start quickly with our .NET MAUI Radio Button, you can check the below video.

Adding a .NET MAUI Radio Button reference

Syncfusion .NET MAUI controls are available on Nuget.org. To add the .NET MAUI Radio Button to your project, open the NuGet Package Manager in Visual Studio, search for Syncfusion.Maui.Buttons, and install it.

Handler registration

In the MauiProgram.cs file, register the handler for the Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace ButtonSample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }      
    }
}

Create a Simple .NET MAUI SfRadioButton

Step 1: Add the NuGet to the project as discussed in the above reference section.

Step 2: Add the namespace as shown in the following code sample.

XAML

xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"

C#

using Syncfusion.Maui.Buttons;

Step 3: Set the control to content in ContentPage.

XAML

<?xml version="1.0" encoding="utf-8">
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:local="clr-namespace:GettingStarted"
	                xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons" 
	                x:Class="GettingStarted.MainPage">
        <ContentPage.Content>
            <StackLayout>
                <syncfusion:SfRadioButton x:Name="radioButton"/>        
            </StackLayout>
        </ContentPage.Content>
     </ContentPage>

C#

using Syncfusion.Maui.Buttons;

    namespace GettingStarted
    {
        public partial class MainPage : ContentPage
        {
            public MainPage()
            {
                InitializeComponent();
                StackLayout stackLayout = new StackLayout();
                SfRadioButton radioButton = new SfRadioButton();
                stackLayout.Children.Add(radioButton);
                this.Content = stackLayout;
            }
        }
    }

Setting caption

The radio button caption can be defined using the Text property of SfRadioButton. This caption typically describes the meaning of the radio button and is displayed next to the radio button.

XAML

<syncfusion:SfRadioButton x:Name="radioButton" Text="Radio Button"/>

C#

SfRadioButton radioButton = new SfRadioButton();
    radioButton.Text = "Radio Button";
    this.Content = radioButton;

Change the Radio Button state

The two different visual states of the SfRadioButton are:

• Checked
• Unchecked

To change the state of the radio button, you can utilize the IsChecked property of SfRadioButton. When the radio button is checked, an inner circle is added to its visualization.

The radio buttons are used when there is a list of two or more options or groups that are mutually exclusive, and the user must select exactly one choice, such as “Select Gender” or “Choose the best option!”.

XAML

<syncfusion:SfRadioGroup x:Name="radioGroup">
         <syncfusion:SfRadioButton x:Name="male" Text="Male" IsChecked="True"/>
         <syncfusion:SfRadioButton x:Name="female" Text="Female"/>
    </syncfusion:SfRadioGroup>

C#

SfRadioGroup radioGroup = new SfRadioGroup();
    SfRadioButton male = new SfRadioButton();
    male.IsChecked = true;
    male.Text = "Male";
    SfRadioButton female = new SfRadioButton();
    female.Text = "Female";
    radioGroup.Children.Add(male);
    radioGroup.Children.Add(female);
    this.Content = radioGroup;

NOTE

SfRadioButtons are mutually exclusive when they are defined within SfRadioGroup.

You can find the complete getting started sample of the .NET MAUI Radio Button from this link.