Articles in this section
Category / Section

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.

 

See also:

 

Customize the appearance of Xamarin RadioButton

 

How to group the Xamarin RadioButton



 

Conclusion

I hope you enjoyed learning about how to create a Xamarin.Forms RadioButton (SfRadioButton).

You can refer to our Xamarin.Forms Radio Button feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial
to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied