Visual Customization in Xamarin CheckBox (SfCheckBox)

22 Aug 20227 minutes to read

Customizing a shape

The check box shape can be customized using the CornerRadius property. This property specifies the uniform radius value to the every corner of the check box.

<syncfusion:SfCheckBox x:Name="checkBox" Text="CheckBox" IsChecked="True" CornerRadius="5.0"/>
SfCheckBox checkBox = new SfCheckBox();
checkBox.Text = "CheckBox";
checkBox.IsChecked = true;
checkBox.CornerRadius = 5.0f;

CheckBox CornerRadius

Customizing a state color

The default state colors can be customized using the CheckedColor and UncheckedColor properties. The checked or indeterminate state color is updated to the CheckedColor property value when the state is changed to the checked or indeterminate.The unchecked state color is updated to UncheckedColor property value when the state is changed to unchecked.

<syncfusion:SfCheckBox x:Name="check" Text="CheckBox" IsChecked="True" CheckedColor="Green"/>
<syncfusion:SfCheckBox x:Name="uncheck" Text="CheckBox" UncheckedColor="Violet"/>
<syncfusion:SfCheckBox x:Name="indeterminate " Text="CheckBox" IsThreeState="True" IsChecked="{x:Null}" CheckedColor="Purple"/>
SfCheckBox check= new SfCheckBox();
check.Text = "CheckBox";
check.IsChecked = true;
check.CheckedColor = Color.Green;
SfCheckBox uncheck = new SfCheckBox();
uncheck.Text = "CheckBox";
uncheck.UncheckedColor = Color.Violet;
SfCheckBox indeterminate = new SfCheckBox();
indeterminate.IsChecked = null;
indeterminate.IsThreeState = true;
indeterminate.Text = "CheckBox";
indeterminate.CheckedColor = Color.Purple;

CheckedColor and UncheckedColor in Checkbox


The tick box border thickness of the checkbox control can be customized using the BorderWidth property.

<syncfusion:SfCheckBox Text="Hello" BorderWidth="2" UncheckedColor="Blue" FontSize="20"/>
<syncfusion:SfCheckBox Text="Hello" BorderWidth="4" UncheckedColor="Blue" FontSize="25"/>
<syncfusion:SfCheckBox Text="Hello" BorderWidth="6" UncheckedColor="Blue" FontSize="30"/>
SfCheckBox check1= new SfCheckBox();
check1.Text = "Hello";
check1.BorderWidth = 2;
check1.FontSize = 20;
check1.UncheckedColor = Color.Blue;
SfCheckBox check2 = new SfCheckBox();
check2.Text = "Hello";
check2.BorderWidth = 4;
check2.FontSize = 25;
check2.UncheckedColor = Color.Blue;
SfCheckBox check3 = new SfCheckBox();
check3.Text = "Hello";
check3.BorderWidth = 6;
check3.FontSize = 30;
check3.UncheckedColor = Color.Blue;

CheckBox BorderWidth

Setting a caption text appearance

You can customize the display text appearance of the SfCheckBox control using the following properties:

<syncfusion:SfCheckBox x:Name="caption" Text="CheckBox" IsChecked="True" TextColor="Violet" HorizontalTextAlignment="Center" FontFamily="Arial" FontAttributes="Bold" FontSize="20"/>
SfCheckBox caption = new SfCheckBox();
caption.IsChecked = true;
caption.Text = "CheckBox";
caption.TextColor = Color.Violet;
caption.HorizontalTextAlignment = TextAlignment.Center;
caption.FontFamily = "Arial";
caption.FontAttributes = FontAttributes.Bold;
caption.FontSize = 20;

CheckBox TextAppearance


The LineBreakMode allows you to wrap or truncate the text. The default value of this property is NoWrap. The following other options are available in LineBreakMode:

TickColor Customization

The TickColor property customizes the color of the tick in SfCheckBox control using the following properties:

<ContentPage xmlns=""
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"  x:Class="CheckBoxCustomization.checkbox">
                <syncfusion:SfCheckBox x:Name="checkBox" IsChecked="True" CheckedColor="Aqua" TickColor="Fuchsia" Text="CheckBox" />
using System;
using Syncfusion.XForms.Buttons;
using Xamarin.Forms;

namespace CheckBoxCustomization
    public partial class MainPage : ContentPage
        public MainPage()
            StackLayout stackLayout = new StackLayout();
            SfCheckBox checkBox = new SfCheckBox();
            checkBox.IsChecked = true;
            checkBox.Text = "CheckBox";
            checkBox.CheckedColor = Color.Aqua;
            checkBox.TickColor = Color.Fuchsia;
            this.Content = stackLayout;

SfCheckBox with TickColor

Size Customization

The ControlSize property is used to customize the CheckBox control size.

    <syncfusion:SfCheckBox Text="CheckBox" ControlSize="60"/>
StackLayout stackLayout = new StackLayout();
SfCheckBox  sfCheckBox  = new SfCheckBox();
sfCheckBox.Text = "Radio Button";
sfCheckBox.ControlSize = 60;

See also

How to get the values of selected checkboxes in a group using Xamarin.Forms