Themes / TemplatesDownload

🔹 Kt-RadioButton

Overview

KtRadioButton is a modern radio button control rendered as a styled button that provides mutually exclusive selections with rich visual customization. Combining the functionality of traditional radio buttons with the appearance of buttons, it offers gradient backgrounds, icons, and smooth state transitions for creating engaging user interfaces in Windows Forms applications.

Key Properties

Property
Type
Default
Description

Checked

bool

false

Gets or sets whether the radio button is selected

Text

string

""

The text displayed on the button

Icon

string

""

Icon identifier for unchecked state

Icon_Checked

string

"tabler.solid.circle_check_filled"

Icon identifier for checked state

Background

KtBrush

Solid

Background brush for unchecked state

Background_Checked

KtBrush

Solid

Background brush for checked state

Border

KtBrush

Gradient

Border brush for unchecked state

Border_Checked

KtBrush

Solid

Border brush for checked state

BorderRadius

float

10

Roundness of button corners

BorderWidth

float

2

Thickness of the border

BorderStyle

DashStyle

Solid

Border style for unchecked state

BorderStyle_Checked

DashStyle

Solid

Border style for checked state

Foreground

KtColor

Empty

Text/icon color for unchecked state

Foreground_Checked

KtColor

Empty

Text/icon color for checked state

IconColor

KtColor

Empty

Icon color for unchecked state

IconColor_Checked

KtColor

Empty

Icon color for checked state

IconSize

int

16

Size of the icon in pixels

IconStroke

double

2.5

Stroke width for icon rendering

TextAlign

ContentAlignment

MiddleCenter

Alignment of text within button

ImageAlign

ContentAlignment

MiddleLeft

Alignment of icon within button

TextMargin

int

0

Spacing between text and icon

Padding

Padding

7,7,7,7

Internal padding of button content

Events

Event
Description

CheckedChanged

Fires when the Checked property changes

Basic Usage

Simple Radio Button

var radioButton = new KtRadioButton
{
    Text = "Option 1",
    Location = new Point(20, 20),
    Size = new Size(150, 40)
};

// Handle state changes
radioButton.CheckedChanged += (s, e) =>
{
    var isChecked = ((KtRadioButton)s).Checked;
    MessageBox.Show($"Option 1 is now {(isChecked ? "selected" : "deselected")}");
};

this.Controls.Add(radioButton);

Radio Button with Icon

var iconRadio = new KtRadioButton
{
    Text = "Premium Plan",
    Icon = "tabler.circle",
    Icon_Checked = "tabler.circle_check_filled",
    IconSize = 20,
    TextAlign = ContentAlignment.MiddleCenter,
    ImageAlign = ContentAlignment.MiddleLeft,
    Size = new Size(160, 45)
};

Styling Examples

Gradient Background

var gradientRadio = new KtRadioButton
{
    Text = "Option A",
    Background = KtBrush.Solid,
    Background_Checked = new KtBrushGradient
    {
        StartColor = KtColor.PRIMARY,
        StopColor = KtColor.SECONDARY,
        Angle = 45
    },
    BorderRadius = 15,
    Foreground_Checked = KtColor.WHITE,
    Size = new Size(140, 40)
};

Solid Color Style

var solidRadio = new KtRadioButton
{
    Text = "Standard",
    Background = new KtBrushSolid { Color = KtColor.BASE_1 },
    Background_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
    Border = new KtBrushSolid { Color = KtColor.BASE_300 },
    Border_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
    Foreground_Checked = KtColor.WHITE,
    BorderRadius = 10,
    Size = new Size(120, 40)
};

Outline Style

var outlineRadio = new KtRadioButton
{
    Text = "Outline",
    Background = KtBrush.None,
    Background_Checked = KtBrush.None,
    Border = new KtBrushSolid { Color = KtColor.PRIMARY },
    Border_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
    BorderWidth = 2,
    Foreground = KtColor.PRIMARY,
    Foreground_Checked = KtColor.PRIMARY,
    Size = new Size(120, 40)
};

Rounded Pill Style

var pillRadio = new KtRadioButton
{
    Text = "Pill Style",
    BorderRadius = 25,
    Background_Checked = new KtBrushSolid { Color = KtColor.SUCCESS },
    Foreground_Checked = KtColor.WHITE,
    Size = new Size(140, 50)
};

Radio Button Groups

Creating Mutually Exclusive Groups

Radio buttons in the same container automatically form a mutually exclusive group:

// Create a button group for size selection
var sizeOptions = new[] { "Small", "Medium", "Large", "X-Large" };
var sizeButtons = new List<KtRadioButton>();

int xPos = 20;
foreach (var size in sizeOptions)
{
    var radio = new KtRadioButton
    {
        Text = size,
        Location = new Point(xPos, 20),
        Size = new Size(100, 40),
        Background_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
        Foreground_Checked = KtColor.WHITE,
        Checked = size == "Medium" // Default selection
    };
    
    sizeButtons.Add(radio);
    this.Controls.Add(radio);
    
    xPos += 110;
}

Separate Groups with Panels

// Panel 1: Shipping Method
var shippingPanel = new Panel
{
    Location = new Point(20, 20),
    Size = new Size(400, 60),
    BorderStyle = BorderStyle.FixedSingle
};

var shippingOptions = new[] { "Standard", "Express", "Overnight" };
int xPos = 10;

foreach (var option in shippingOptions)
{
    var radio = new KtRadioButton
    {
        Text = option,
        Location = new Point(xPos, 10),
        Size = new Size(120, 40),
        Background_Checked = new KtBrushSolid { Color = KtColor.INFO },
        Foreground_Checked = KtColor.WHITE,
        Checked = option == "Standard"
    };
    
    shippingPanel.Controls.Add(radio);
    xPos += 130;
}

// Panel 2: Payment Method (independent group)
var paymentPanel = new Panel
{
    Location = new Point(20, 100),
    Size = new Size(400, 60),
    BorderStyle = BorderStyle.FixedSingle
};

var paymentOptions = new[] { "Credit Card", "PayPal", "Bank Transfer" };
xPos = 10;

foreach (var option in paymentOptions)
{
    var radio = new KtRadioButton
    {
        Text = option,
        Location = new Point(xPos, 10),
        Size = new Size(120, 40),
        Background_Checked = new KtBrushSolid { Color = KtColor.SUCCESS },
        Foreground_Checked = KtColor.WHITE,
        Checked = option == "Credit Card"
    };
    
    paymentPanel.Controls.Add(radio);
    xPos += 130;
}

this.Controls.Add(shippingPanel);
this.Controls.Add(paymentPanel);

Common Patterns

Horizontal Button Group

private void CreateHorizontalButtonGroup()
{
    var options = new Dictionary<string, KtColor>
    {
        ["Daily"] = KtColor.PRIMARY,
        ["Weekly"] = KtColor.SECONDARY,
        ["Monthly"] = KtColor.INFO,
        ["Yearly"] = KtColor.SUCCESS
    };
    
    int xPos = 20;
    foreach (var option in options)
    {
        var radio = new KtRadioButton
        {
            Text = option.Key,
            Location = new Point(xPos, 20),
            Size = new Size(100, 45),
            Background = new KtBrushSolid { Color = KtColor.BASE_1 },
            Background_Checked = new KtBrushSolid { Color = option.Value },
            Border = new KtBrushSolid { Color = option.Value },
            Foreground = option.Value,
            Foreground_Checked = KtColor.WHITE,
            BorderRadius = 8,
            Checked = option.Key == "Monthly"
        };
        
        radio.CheckedChanged += (s, e) =>
        {
            if (((KtRadioButton)s).Checked)
            {
                UpdateDataView(((KtRadioButton)s).Text);
            }
        };
        
        this.Controls.Add(radio);
        xPos += 110;
    }
}

Vertical Stack with Icons

private void CreateVerticalIconStack()
{
    var plans = new[]
    {
        new { Name = "Basic", Icon = "tabler.user", Price = "$9.99/mo", Color = KtColor.BASE_300 },
        new { Name = "Pro", Icon = "tabler.star", Price = "$19.99/mo", Color = KtColor.PRIMARY },
        new { Name = "Enterprise", Icon = "tabler.building", Price = "$49.99/mo", Color = KtColor.SUCCESS }
    };
    
    int yPos = 20;
    foreach (var plan in plans)
    {
        var radio = new KtRadioButton
        {
            Text = $"{plan.Name}\n{plan.Price}",
            Icon = plan.Icon,
            Icon_Checked = plan.Icon,
            IconSize = 24,
            Location = new Point(20, yPos),
            Size = new Size(200, 60),
            TextAlign = ContentAlignment.MiddleCenter,
            ImageAlign = ContentAlignment.MiddleLeft,
            Background_Checked = new KtBrushSolid { Color = plan.Color },
            Foreground_Checked = KtColor.WHITE,
            IconColor = plan.Color,
            IconColor_Checked = KtColor.WHITE,
            BorderRadius = 12,
            Padding = new Padding(15, 10, 15, 10)
        };
        
        this.Controls.Add(radio);
        yPos += 70;
    }
}

Card-Style Selection

private void CreateCardStyleOptions()
{
    var subscriptions = new[]
    {
        new { Title = "Monthly", Price = "$12", Icon = "tabler.calendar_month" },
        new { Title = "Quarterly", Price = "$32", Badge = "Save 10%", Icon = "tabler.calendar" },
        new { Title = "Annual", Price = "$99", Badge = "Save 30%", Icon = "tabler.calendar_year" }
    };
    
    int xPos = 20;
    foreach (var sub in subscriptions)
    {
        var radio = new KtRadioButton
        {
            Text = $"{sub.Title}\n{sub.Price}/mo",
            Icon = sub.Icon,
            Icon_Checked = sub.Icon,
            IconSize = 28,
            Location = new Point(xPos, 20),
            Size = new Size(140, 80),
            TextAlign = ContentAlignment.BottomCenter,
            ImageAlign = ContentAlignment.TopCenter,
            Background = new KtBrushSolid { Color = KtColor.BASE_1 },
            Background_Checked = new KtBrushGradient
            {
                StartColor = KtColor.PRIMARY,
                StopColor = KtColor.SECONDARY,
                Angle = 135
            },
            Border = new KtBrushSolid { Color = KtColor.BASE_300 },
            Foreground_Checked = KtColor.WHITE,
            IconColor_Checked = KtColor.WHITE,
            BorderRadius = 15,
            BorderWidth = 2
        };
        
        this.Controls.Add(radio);
        xPos += 150;
    }
}

Tab-Style Navigation

private Panel CreateTabNavigation()
{
    var tabPanel = new Panel
    {
        Location = new Point(0, 0),
        Size = new Size(600, 50),
        BackColor = Color.White
    };
    
    var tabs = new[] { "Overview", "Analytics", "Reports", "Settings" };
    int xPos = 0;
    
    foreach (var tab in tabs)
    {
        var radio = new KtRadioButton
        {
            Text = tab,
            Location = new Point(xPos, 5),
            Size = new Size(150, 40),
            Background = KtBrush.None,
            Background_Checked = KtBrush.None,
            Border = KtBrush.None,
            BorderRadius = 8,
            Foreground = KtColor.BASE_CONTENT,
            Foreground_Checked = KtColor.PRIMARY,
            TextAlign = ContentAlignment.MiddleCenter
        };
        
        // Add bottom border effect for checked state
        radio.CheckedChanged += (s, e) =>
        {
            if (((KtRadioButton)s).Checked)
            {
                LoadTabContent(((KtRadioButton)s).Text);
            }
        };
        
        tabPanel.Controls.Add(radio);
        xPos += 150;
    }
    
    return tabPanel;
}

Getting Selected Value

public string GetSelectedValue(Panel container)
{
    foreach (Control control in container.Controls)
    {
        if (control is KtRadioButton radio && radio.Checked)
        {
            return radio.Text;
        }
    }
    
    return null;
}

// Usage
string selectedShipping = GetSelectedValue(shippingPanel);
if (selectedShipping != null)
{
    MessageBox.Show($"Selected shipping: {selectedShipping}");
}

Using Tag Property

var options = new[]
{
    new { Display = "Personal - Free", Value = "PERSONAL" },
    new { Display = "Professional - $29", Value = "PRO" },
    new { Display = "Business - $99", Value = "BUSINESS" }
};

foreach (var option in options)
{
    var radio = new KtRadioButton
    {
        Text = option.Display,
        Tag = option.Value,  // Store the actual value
        Size = new Size(180, 45),
        Background_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
        Foreground_Checked = KtColor.WHITE
    };
    
    radio.CheckedChanged += (s, e) =>
    {
        if (((KtRadioButton)s).Checked)
        {
            string value = ((KtRadioButton)s).Tag.ToString();
            ProcessSelection(value);
        }
    };
    
    this.Controls.Add(radio);
}

Advanced Features

Custom Icon Colors

var customIconRadio = new KtRadioButton
{
    Text = "Favorite",
    Icon = "tabler.heart",
    Icon_Checked = "tabler.heart_filled",
    IconColor = KtColor.BASE_300,
    IconColor_Checked = KtColor.ERROR,
    IconSize = 22,
    IconStroke = 2.0,
    Background_Checked = new KtBrushSolid { Color = KtColor.ERROR % 10 },
    Foreground_Checked = KtColor.ERROR
};

Dynamic Border Styles

var dashedRadio = new KtRadioButton
{
    Text = "Dashed Border",
    BorderStyle = DashStyle.Dash,
    BorderStyle_Checked = DashStyle.Solid,
    BorderWidth = 2,
    Border = new KtBrushSolid { Color = KtColor.PRIMARY },
    Border_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
    Size = new Size(150, 40)
};

Programmatic Control

// Select a radio button
radioButton1.Checked = true;

// Find and select by criteria
foreach (Control control in panel.Controls)
{
    if (control is KtRadioButton radio && radio.Tag?.ToString() == "PREMIUM")
    {
        radio.Checked = true;
        break;
    }
}

// Refresh appearance
radioButton1.Render();

// Batch updates
radioButton1.SuspendLayout();
radioButton1.Background_Checked = new KtBrushSolid { Color = KtColor.SUCCESS };
radioButton1.BorderRadius = 15;
radioButton1.ResumeLayout(true);

Text and Icon Alignment

// Icon on top, text below
var topIconRadio = new KtRadioButton
{
    Text = "Upload",
    Icon = "tabler.upload",
    Icon_Checked = "tabler.upload",
    ImageAlign = ContentAlignment.TopCenter,
    TextAlign = ContentAlignment.BottomCenter,
    IconSize = 32,
    Size = new Size(100, 100),
    Padding = new Padding(10, 15, 10, 10)
};

// Icon on right, text on left
var rightIconRadio = new KtRadioButton
{
    Text = "Next",
    Icon = "tabler.arrow_right",
    Icon_Checked = "tabler.arrow_right",
    ImageAlign = ContentAlignment.MiddleRight,
    TextAlign = ContentAlignment.MiddleLeft,
    TextMargin = 5
};

Responsive Layouts

Auto-Adjust Based on Container

private void CreateResponsiveButtonGroup(FlowLayoutPanel container)
{
    var options = new[] { "Option 1", "Option 2", "Option 3", "Option 4" };
    
    foreach (var option in options)
    {
        var radio = new KtRadioButton
        {
            Text = option,
            Size = new Size(120, 40),
            Margin = new Padding(5),
            Background_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
            Foreground_Checked = KtColor.WHITE
        };
        
        container.Controls.Add(radio);
    }
    
    container.FlowDirection = FlowDirection.LeftToRight;
    container.WrapContents = true;
    container.AutoScroll = true;
}

Grid Layout

private void CreateGridLayout()
{
    var tableLayout = new TableLayoutPanel
    {
        Location = new Point(20, 20),
        Size = new Size(400, 200),
        ColumnCount = 2,
        RowCount = 3
    };
    
    tableLayout.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
    tableLayout.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
    
    var options = new[] { "Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6" };
    
    for (int i = 0; i < options.Length; i++)
    {
        var radio = new KtRadioButton
        {
            Text = options[i],
            Dock = DockStyle.Fill,
            Margin = new Padding(5),
            Background_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
            Foreground_Checked = KtColor.WHITE
        };
        
        tableLayout.Controls.Add(radio, i % 2, i / 2);
    }
    
    this.Controls.Add(tableLayout);
}

Validation

private bool ValidateRadioSelection(Panel container, string fieldName)
{
    bool hasSelection = container.Controls
        .OfType<KtRadioButton>()
        .Any(r => r.Checked);
    
    if (!hasSelection)
    {
        MessageBox.Show(
            $"Please select a {fieldName}",
            "Validation Error",
            MessageBoxButtons.OK,
            MessageBoxIcon.Warning
        );
        return false;
    }
    
    return true;
}

// Highlight missing selection
private void HighlightRequiredField(Panel container)
{
    bool hasSelection = container.Controls
        .OfType<KtRadioButton>()
        .Any(r => r.Checked);
    
    if (!hasSelection)
    {
        container.BackColor = Color.FromArgb(255, 240, 240);
        // Reset after selection
        foreach (var radio in container.Controls.OfType<KtRadioButton>())
        {
            radio.CheckedChanged += (s, e) =>
            {
                if (((KtRadioButton)s).Checked)
                    container.BackColor = Color.White;
            };
        }
    }
}

Design Tips

  1. Consistent Sizing: Use uniform sizes within a button group for visual harmony

  2. Color Schemes: Use checked state colors that clearly indicate selection

  3. Icon Usage: Choose meaningful icons that represent the option

  4. Spacing: Maintain 10-15px spacing between buttons in horizontal layouts

  5. Border Radius: Match border radius with your application's design language

  6. Text Length: Keep button text concise for better readability

  7. Hover Feedback: The control automatically provides hover effects

  8. Default Selection: Pre-select the most common or recommended option

Performance Optimization

// Batch updates for multiple properties
radio.SuspendLayout();
radio.Background_Checked = newBrush;
radio.BorderRadius = 12;
radio.Foreground_Checked = newColor;
radio.ResumeLayout(true);

// Efficient group creation
var buttons = Enumerable.Range(1, 10)
    .Select(i => new KtRadioButton
    {
        Text = $"Option {i}",
        Size = new Size(100, 40),
        Tag = i
    })
    .ToArray();

foreach (var btn in buttons)
    this.Controls.Add(btn);

Accessibility Features

  • Automatic cursor change to hand pointer

  • Keyboard navigation support (Space/Enter keys)

  • Clear visual states for checked/unchecked

  • Focus state visualization

  • Mutually exclusive selection within groups

  • RTL (Right-to-Left) text support

Migration Notes

If migrating from standard RadioButton:

// Standard RadioButton
var oldRadio = new RadioButton
{
    Text = "Option 1",
    Location = new Point(20, 20),
    Appearance = Appearance.Button,
    Checked = true
};

// KtRadioButton equivalent
var newRadio = new KtRadioButton
{
    Text = "Option 1",
    Location = new Point(20, 20),
    Size = new Size(120, 40),
    Background_Checked = new KtBrushSolid { Color = KtColor.PRIMARY },
    Foreground_Checked = KtColor.WHITE,
    Checked = true
};
Previous🔹 Kt-RadioBoxNext🔹 Kt-Switch

Last updated

Was this helpful?