CheckBox & Radio Group

Overview

The CheckBox, CheckBoxGroup, and RadioGroup controls provide Material Design 3.0 toggle selection, rendered entirely with SkiaSharp. CheckBox is an independent toggle with a square checkmark icon that animates between checked and unchecked states. CheckBoxGroup manages a collection of checkboxes with multi-select support. RadioGroup enforces single-selection among a set of radio buttons with circular indicators.

All toggle controls follow MD3 design: the check/radio icon animates with a 200ms easing curve, ripple effects emanate from the pointer contact point, and state layers provide hover/focus/pressed feedback. Labels are rendered using BodyLarge typography with configurable text positioning relative to the icon.

CheckBox Properties

CheckBoxStyle.Toggle (Switch) Properties

When CheckBoxStyle is set to Toggle, the control renders as a Material Design switch with additional properties:

CheckBoxGroup Properties

CheckBoxGroup is a container control that manages a collection of CheckBox children:

RadioGroup Properties

RadioGroup manages a mutually-exclusive set of radio buttons. Unlike CheckBoxGroup, only one item can be selected at a time.

Events

Code Example

var darkModeCheck = new CheckBox
{
    Text = "Enable Dark Mode",
    IsChecked = false,
    X = 40, Y = 40,
    Width = 200, Height = 40
};

darkModeCheck.Initialize();
darkModeCheck.CheckedChanged += (s, state) =>
    Console.WriteLine($"Dark mode: {state}");

var notificationsToggle = new CheckBox
{
    Text = "Push Notifications",
    CheckBoxStyle = CheckBoxStyle.Toggle,
    IsChecked = true,
    X = 40, Y = 90,
    Width = 220, Height = 40
};

notificationsToggle.Initialize();

drawingManager.AddComponent(darkModeCheck);
drawingManager.AddComponent(notificationsToggle);
drawingManager.RequestRedraw();

var child1 = new CheckBox { Text = "Option A", X = 0, Y = 0 };
var child2 = new CheckBox { Text = "Option B", X = 0, Y = 0 };
var child3 = new CheckBox { Text = "Option C", X = 0, Y = 0 };

var selectAll = new CheckBox
{
    Text = "Select All",
    IsThreeState = true,
    IsChecked = false,
    X = 40, Y = 150,
    Width = 200, Height = 40
};
selectAll.Initialize();

selectAll.CheckedChanged += (s, state) =>
{
    if (state == true || state == false)
    {
        child1.IsChecked = state;
        child2.IsChecked = state;
        child3.IsChecked = state;
    }
};

Action updateParent = () =>
{
    var states = new[] { child1.IsChecked, child2.IsChecked, child3.IsChecked };
    if (states.All(c => c == true)) selectAll.IsChecked = true;
    else if (states.All(c => c == false)) selectAll.IsChecked = false;
    else selectAll.IsChecked = null;
};

child1.CheckedChanged += (s, v) => updateParent();
child2.CheckedChanged += (s, v) => updateParent();
child3.CheckedChanged += (s, v) => updateParent();

drawingManager.AddComponent(selectAll);

var group = new CheckBoxGroup
{
    X = 300, Y = 40,
    Width = 250,
    LayoutDirection = LayoutDirection.Vertical,
    ItemSpacing = 4f,
    Items = new List<CheckBox>
    {
        new() { Text = "Feature A: Auto-save" },
        new() { Text = "Feature B: Spell check" },
        new() { Text = "Feature C: Live preview" },
        new() { Text = "Feature D: Dark theme" },
        new() { Text = "Feature E: Compact mode" }
    }
};

foreach (var cb in group.Items) cb.Initialize();

group.Initialize();
group.SelectedIndicesChanged += (s, indices) =>
    Console.WriteLine($"Selected: {string.Join(", ", indices)}");

drawingManager.AddComponent(group);

var radioGroup = new RadioGroup
{
    X = 300, Y = 280,
    Width = 250,
    LayoutDirection = LayoutDirection.Vertical,
    SelectedIndex = 0,
    Items = new List<RadioItem>
    {
        new() { Text = "Small (12px)",  Value = 12 },
        new() { Text = "Medium (16px)", Value = 16 },
        new() { Text = "Large (20px)",  Value = 20 },
        new() { Text = "Extra Large (24px)", Value = 24 }
    }
};

radioGroup.Initialize();
radioGroup.SelectedIndexChanged += (s, idx) =>
{
    int fontSize = (int)radioGroup.SelectedValue;
    Console.WriteLine($"Font size set to: {fontSize}px");
};

drawingManager.AddComponent(radioGroup);
drawingManager.RequestRedraw();