Visual Customization in .NET MAUI Radio Button

5 Aug 202612 minutes to read

This section covers the visual properties of .NET MAUI Radio Button and how to customize them.

Prerequisites

Before using the SfRadioButton, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Buttons

For a step-by-step setup, refer to the Getting Started documentation.

State Colors

The checked and unchecked state colors of Radio Button can be customized using the CheckedColor and UncheckedColor properties. The circle is filled with CheckedColor when the state is checked and with UncheckedColor when the state is unchecked.

<syncfusion:SfRadioGroup x:Name="radioGroup">
    <syncfusion:SfRadioButton x:Name="check" 
                              Text="Checked" 
                              IsChecked="True" 
                              CheckedColor="Green"/>
    <syncfusion:SfRadioButton x:Name="uncheck" 
                              Text="Unchecked" 
                              UncheckedColor="Violet"/>
</syncfusion:SfRadioGroup>
SfRadioGroup radioGroup = new SfRadioGroup();
SfRadioButton check = new SfRadioButton();
check.Text = "Checked";
check.IsChecked = true;
check.CheckedColor = Colors.Green;
SfRadioButton uncheck = new SfRadioButton();
uncheck.Text = "Unchecked";
uncheck.UncheckedColor = Colors.Violet;
radioGroup.Children.Add(check);
radioGroup.Children.Add(uncheck);
this.Content = radioGroup;

CheckedColor and UncheckedColor in Radio Button

StrokeThickness

The stroke thickness of the circle in Radio Button can be customized using the StrokeThickness property.

Platform note: StrokeThickness is not supported on the Android platform. The value is ignored on Android and the default stroke is rendered.

<syncfusion:SfRadioGroup>
    <syncfusion:SfRadioButton Text="Checked state" 
                              IsChecked="True" 
                              StrokeThickness="3"/>
    <syncfusion:SfRadioButton Text="Unchecked state" 
                              StrokeThickness="3"/>
</syncfusion:SfRadioGroup>
SfRadioGroup radioGroup = new SfRadioGroup();
SfRadioButton check = new SfRadioButton();
check.Text = "Checked state";
check.IsChecked = true;
check.StrokeThickness = 3;
SfRadioButton uncheck = new SfRadioButton();
uncheck.Text = "Unchecked state";
uncheck.StrokeThickness = 3;
radioGroup.Children.Add(check);
radioGroup.Children.Add(uncheck);
this.Content = radioGroup;

StrokeThickness applied to the radio circle

StrokeThickness

Setting the Caption

The Radio Button caption is defined using the Text property. This caption typically describes the meaning of the Radio Button and is displayed next to it.

<syncfusion:SfRadioButton Text="Radio Button" />
SfRadioButton radioButton = new SfRadioButton();
radioButton.Text = "Radio Button";
this.Content = radioButton;

.NET MAUI Radio Button

Text Appearance

The display text of Radio Button can be customized using the following properties:

Property Type Description
TextColor Color Color of the caption text.
HorizontalTextAlignment TextAlignment Horizontal alignment of the caption text. Values: Start, Center, End.
FontFamily string Font family of the caption text.
FontAttributes FontAttributes Font style of the caption text. Values: None, Bold, Italic.
FontSize double Font size of the caption text. Default: platform-default. 
<syncfusion:SfRadioButton x:Name="radioButton"
                          Text="Radio Button"
                          IsChecked="True"
                          TextColor="Blue"
                          HorizontalTextAlignment="Center"
                          FontFamily="Arial"
                          FontAttributes="Bold"
                          FontSize="20"/>
SfRadioButton radioButton = new SfRadioButton();
radioButton.Text = "Radio Button";
radioButton.IsChecked = true;
radioButton.TextColor = Colors.Blue;
radioButton.HorizontalTextAlignment = TextAlignment.Center;
radioButton.FontFamily = "Arial";
radioButton.FontAttributes = FontAttributes.Bold;
radioButton.FontSize = 20;
this.Content = radioButton;

Text appearance

LineBreakMode

The LineBreakMode property controls how the caption text is wrapped or truncated when it does not fit in the available space. The default value is NoWrap, with other options available such as:

Value Description
NoWrap Does not wrap the text.
WordWrap Wraps the text at word boundaries.
CharacterWrap Wraps the text at character boundaries.
HeadTruncation Truncates the text at the start.
MiddleTruncation Truncates the text in the middle.
TailTruncation Truncates the text at the end. 
<syncfusion:SfRadioButton x:Name="radioButton"
                          IsChecked="True"
                          WidthRequest="200"
                          LineBreakMode="WordWrap"
                          Text="The LineBreakMode allows you to wrap or truncate the text."/>
StackLayout stackLayout = new StackLayout();
SfRadioButton radioButton = new SfRadioButton();
radioButton.Text = "The LineBreakMode allows you to wrap or truncate the text.";
radioButton.LineBreakMode = LineBreakMode.WordWrap;
radioButton.WidthRequest = 200;
stackLayout.Children.Add(radioButton);
this.Content = stackLayout;

LineBreakMode

Download a working sample demonstrating LineBreakMode from the GitHub link.

Font auto-scaling

The FontAutoScalingEnabled property controls whether the caption text automatically scales with the operating system’s text size.

When true, the caption text respects the user’s accessibility text-size preferences on each platform. When false, the text is rendered at the explicit FontSize regardless of the OS setting.

<syncfusion:SfRadioButton Text="Radio Button" 
                          FontAutoScalingEnabled="True"/>
SfRadioButton radioButton = new SfRadioButton();
radioButton.Text = "Radio Button";
radioButton.FontAutoScalingEnabled = true;
this.Content = radioButton;

Size customization

The ControlSize property customizes the size of the radio circle and caption in Radio Button. Larger values produce a larger circle and proportionally larger caption text.

<VerticalStackLayout>
    <syncfusion:SfRadioButton Text="Small" ControlSize="20"/>
    <syncfusion:SfRadioButton Text="Default" ControlSize="40"/>
    <syncfusion:SfRadioButton Text="Large" ControlSize="60"/>
</VerticalStackLayout>
StackLayout stackLayout = new StackLayout();
SfRadioButton small = new SfRadioButton() { Text = "Small", ControlSize = 20 };
SfRadioButton defaultSize = new SfRadioButton() { Text = "Default", ControlSize = 40 };
SfRadioButton large = new SfRadioButton() { Text = "Large", ControlSize = 60 };
stackLayout.Children.Add(small);
stackLayout.Children.Add(defaultSize);
stackLayout.Children.Add(large);
this.Content = stackLayout;

Content spacing

The ContentSpacing property adjusts the space between the radio circle and the caption text.

<syncfusion:SfRadioButton Text="Radio Button"
                          ContentSpacing="25"/>
SfRadioButton radioButton = new SfRadioButton();
radioButton.Text = "Radio Button";
radioButton.ContentSpacing = 25;
this.Content = radioButton;

ContentSpacing

Enable animation

The EnabledAnimation property enables or disables the state-change animation of Radio Button.

When true, the circle is animated when the checked state changes. When false, the state change is applied instantly without animation.

<syncfusion:SfRadioButton Text="Radio Button" 
                          EnabledAnimation="False"/>
SfRadioButton radioButton = new SfRadioButton
{
    Text = "Radio Button",
    EnabledAnimation = false
};
this.Content = radioButton;

See Also