How to create a Xamarin.Forms RadioButton (SfRadioButton)?

1 min read

This KB article shows how to add the Xamarin.Forms SfRadioButton in your application to obtain a single selection among the multiple choices.

Let us have a use case of choosing the payment option to make a successful transaction. Here, you need to select any one of the options from the list of payment options. The following steps will guide you to obtain a similar UI that is shown as follows.

Getting started with radio button

Step 1: Install the Syncfusion.Xamarin.Buttons NuGet to your application as specified in the following guidelines.

https://help.syncfusion.com/xamarin/radio-button/getting-started#adding-sfradiobutton-reference

Step 2: Include a namespace to access the RadioButton in the application.

 xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"

Step 3: Initialize the list of Xamarin RadioButton inside the SfRadioGroup or layout with group key functionality to maintain the grouping. Please use the following code sample to obtain the above-mentioned UI.

[XAML]

 
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
 
    <StackLayout Margin="40">
        <Label Text="Select your payment options : (Most recommended option is cash)"/>
        <buttons:SfRadioGroup  Margin="20">
        <buttons:SfRadioButton Text="Credit Card" />
        <buttons:SfRadioButton Text="Debit Card" />
        <buttons:SfRadioButton Text="Net banking" />
        <buttons:SfRadioButton Text="Cash" IsChecked="{Binding IsChecked}"/>
        </buttons:SfRadioGroup>
        <Button Text="Proceed Transaction" HorizontalOptions="Center" VerticalOptions="Center" Margin="20" Command="{Binding TransactionCommmand}"/>
    </StackLayout>

[C#] ViewModel.cs

public class ViewModel
    {
        private bool isChecked = true;
 
        public Command TransactionCommmand { get; set; }
        public bool IsChecked
        {
            get { return isChecked; }
            set { isChecked = value; }
        }
 
        public ViewModel()
        {
            TransactionCommmand = new Command(DoTransaction);
        }
        
        private void DoTransaction()
        {
            App.Current.MainPage.DisplayAlert("Hello","Transaction is Initiated ","Ok");
        }
    }

View the sample in GitHub.

How to create a Xamarin.Forms RadioButton (SfRadioButton)?

See also:

Access denied