Implement CheckBox component by Copilot · Pull Request #280 · FritzAndFriends/BlazorWebFormsComponents

Copilot · 2026-01-28T19:06:15Z

Implements the CheckBox component emulating ASP.NET Web Forms System.Web.UI.WebControls.CheckBox with label positioning support.

Implementation

CheckBox component: Inherits BaseStyledComponent, supports Checked, Text, TextAlign, Enabled, and standard style properties
TextAlign enum: Left | Right for label positioning (default: Right)
HTML structure: Renders <span><input><label></span> when text present, or bare <input> without text
Events: CheckedChanged for two-way binding, OnCheckedChanged for change handling

Usage

@using BlazorWebFormsComponents.Enums

<!-- Basic usage with two-way binding -->
<CheckBox Text="I agree to terms" @bind-Checked="agreed" />

<!-- Label positioning -->
<CheckBox Text="Label on left" TextAlign="TextAlign.Left" />

<!-- Event handling -->
<CheckBox Text="Notify me" OnCheckedChanged="HandleChange" />

<!-- Without label (no span wrapper) -->
<CheckBox @bind-Checked="option1" />

Testing

26 tests covering:

Checked state and two-way binding
Text rendering with proper for/id attributes
TextAlign behavior (Left/Right/default)
No-text rendering (bare input)
Enabled/disabled states
Style application (span vs input)
Event firing
Visibility control

Documentation

Component documentation: docs/EditorControls/CheckBox.md
Sample pages: Index, Style, Events with navigation
Updated mkdocs.yml and README.md

Original prompt

This section details on the original issue you should resolve

<issue_title>Issue: Implement CheckBox Component</issue_title>
<issue_description>## Overview

Implement the CheckBox Blazor component that emulates the ASP.NET Web Forms System.Web.UI.WebControls.CheckBox control. This is a fundamental form control for boolean input with an optional text label.

Microsoft Docs Reference: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.checkbox?view=netframework-4.8

Phase 1: Research & Reference Setup

Step 1: Add Web Forms Sample Page

Create sample page at samples/BeforeWebForms/ControlSamples/CheckBox/Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html>
<head><title>CheckBox Sample</title></head>
<body>
    <form id="form1" runat="server">
        <h2>Basic CheckBox</h2>
        <asp:CheckBox ID="chkBasic" Text="I agree to terms" runat="server" />
        
        <h2>Checked CheckBox</h2>
        <asp:CheckBox ID="chkChecked" Text="Already checked" Checked="true" runat="server" />
        
        <h2>Text on Left</h2>
        <asp:CheckBox ID="chkLeft" Text="Label on left" TextAlign="Left" runat="server" />
        
        <h2>Text on Right (default)</h2>
        <asp:CheckBox ID="chkRight" Text="Label on right" TextAlign="Right" runat="server" />
        
        <h2>Disabled CheckBox</h2>
        <asp:CheckBox ID="chkDisabled" Text="Cannot change" Enabled="false" runat="server" />
        
        <h2>With CSS Class</h2>
        <asp:CheckBox ID="chkStyled" Text="Styled checkbox" CssClass="custom-check" runat="server" />
        
        <h2>With Inline Styles</h2>
        <asp:CheckBox ID="chkColors" Text="Colored" BackColor="LightBlue" ForeColor="Navy" runat="server" />
        
        <h2>No Text (checkbox only)</h2>
        <asp:CheckBox ID="chkNoText" runat="server" />
    </form>
</body>
</html>

Step 2: Capture HTML Output

Run the BeforeWebForms project and document the exact HTML output. Expected patterns:

CheckBox with Text (TextAlign=Right, default):

<span class="custom-check">
    <input id="chkBasic" type="checkbox" name="chkBasic" />
    <label for="chkBasic">I agree to terms</label>
</span>

CheckBox with Text (TextAlign=Left):

<span>
    <label for="chkLeft">Label on left</label>
    <input id="chkLeft" type="checkbox" name="chkLeft" />
</span>

CheckBox without Text:

<input id="chkNoText" type="checkbox" name="chkNoText" />

Checked CheckBox:

<span>
    <input id="chkChecked" type="checkbox" name="chkChecked" checked="checked" />
    <label for="chkChecked">Already checked</label>
</span>

Phase 2: Blazor Implementation

Step 3: Create Component Files

Create src/BlazorWebFormsComponents/CheckBox.razor:

@inherits BaseStyledComponent

@if (Visible)
{
    @if (!string.IsNullOrEmpty(Text))
    {
        <span class="@CssClass" style="@this.ToStyle().Build().NullIfEmpty()">
            @if (TextAlign == TextAlign.Left)
            {
                <label for="@_inputId">@Text</label>
                <input id="@_inputId" type="checkbox" checked="@Checked" 
                       disabled="@(!Enabled)" @onchange="HandleChange" />
            }
            else
            {
                <input id="@_inputId" type="checkbox" checked="@Checked" 
                       disabled="@(!Enabled)" @onchange="HandleChange" />
                <label for="@_inputId">@Text</label>
            }
        </span>
    }
    else
    {
        <input type="checkbox" checked="@Checked" disabled="@(!Enabled)" 
               class="@CssClass" style="@this.ToStyle().Build().NullIfEmpty()"
               @onchange="HandleChange" />
    }
}

Create src/BlazorWebFormsComponents/CheckBox.razor.cs:

namespace BlazorWebFormsComponents
{
    public partial class CheckBox : BaseStyledComponent
    {
        private string _inputId = Guid.NewGuid().ToString("N");
        
        [Parameter] public bool Checked { get; set; }
        [Parameter] public EventCallback<bool> CheckedChanged { get; set; }
        [Parameter] public string Text { get; set; }
        [Parameter] public TextAlign TextAlign { get; set; } = TextAlign.Right;
        [Parameter] public EventCallback<ChangeEventArgs> OnCheckedChanged { get; set; }
        
        [Parameter, Obsolete("AutoPostBack is not supported in Blazor. Use OnCheckedChanged event instead.")]
        public bool AutoPostBack { get; set; }
        
        private async Task HandleChange(ChangeEventArgs e)
        {
            Checked = (bool)e.Value;
            await CheckedChanged.InvokeAsync(Checked);
            await OnCheckedChanged.InvokeAsync(e);
        }
    }
}

Step 4: Implement Core Features

Properties to implement:

Checked - Boolean state of the checkbox
Text - Label text displayed next to checkbox
TextAlign - Left or Right posi...

Fixes Issue: Implement CheckBox Component #279

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Initial plan

ef62944

Copilot AI assigned Copilot and csharpfritz Jan 28, 2026

Copilot started work on behalf of csharpfritz January 28, 2026 19:06 View session

Copilot AI and others added 3 commits January 28, 2026 19:10

Add CheckBox component with TextAlign enum and unit tests

f0dbd53

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Add CheckBox Blazor sample pages

a64f11e

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Add CheckBox documentation and update README/mkdocs

d19f179

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Implement CheckBox component for Blazor~~ Implement CheckBox component Jan 28, 2026

Copilot AI requested a review from csharpfritz January 28, 2026 19:18

Copilot finished work on behalf of csharpfritz January 28, 2026 19:18

csharpfritz marked this pull request as ready for review January 28, 2026 19:42

csharpfritz merged commit 50717c9 into dev Jan 28, 2026
1 check passed

csharpfritz deleted the copilot/implement-checkbox-component branch January 28, 2026 19:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement CheckBox component#280

Implement CheckBox component#280
csharpfritz merged 4 commits intodevfrom
copilot/implement-checkbox-component

Copilot AI commented Jan 28, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation

Usage

Testing

Documentation

Phase 1: Research & Reference Setup

Step 1: Add Web Forms Sample Page

Step 2: Capture HTML Output

Phase 2: Blazor Implementation

Step 3: Create Component Files

Step 4: Implement Core Features

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jan 28, 2026 •

edited

Loading