Implement CheckBox component

README.md

@@ -27,7 +27,7 @@ There are a significant number of controls in ASP.NET Web Forms, and we will foc
     - BulletedList
     - [Button](docs/EditorControls/Button.md)
     - Calendar
-    - CheckBox
+    - [CheckBox](docs/EditorControls/CheckBox.md)
     - CheckBoxList
     - DropDownList
     - FileUpload

docs/EditorControls/CheckBox.md

@@ -0,0 +1,197 @@
+# CheckBox
+
+The CheckBox component provides a Blazor implementation of the ASP.NET Web Forms CheckBox control, enabling boolean input with an optional text label.
+
+Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.checkbox?view=netframework-4.8
+
+## Features Supported in Blazor
+
+- `Checked` property for boolean state
+- `Text` property for label display
+- `TextAlign` property (Left or Right) for label positioning
+- Two-way binding with `@bind-Checked`
+- `OnCheckedChanged` event handler
+- `Enabled` property to disable the checkbox
+- Style attributes (BackColor, ForeColor, CssClass, etc.)
+- `Visible` property to show/hide the checkbox
+
+## Web Forms Features NOT Supported
+
+- `AutoPostBack` is not supported in Blazor. Use the `OnCheckedChanged` event instead to react to state changes.
+- `InputAttributes` property is not implemented
+- `LabelAttributes` property is not implemented
+
+## Web Forms Declarative Syntax
+
+```html
+<asp:CheckBox
+    AccessKey="string"
+    AutoPostBack="True|False"
+    BackColor="color name|#dddddd"
+    BorderColor="color name|#dddddd"
+    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
+        Inset|Outset"
+    BorderWidth="size"
+    Checked="True|False"
+    CssClass="string"
+    Enabled="True|False"
+    EnableTheming="True|False"
+    EnableViewState="True|False"
+    Font-Bold="True|False"
+    Font-Italic="True|False"
+    Font-Names="string"
+    Font-Overline="True|False"
+    Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
+        Large|X-Large|XX-Large"
+    Font-Strikeout="True|False"
+    Font-Underline="True|False"
+    ForeColor="color name|#dddddd"
+    Height="size"
+    ID="string"
+    OnCheckedChanged="CheckedChanged event handler"
+    OnDataBinding="DataBinding event handler"
+    OnDisposed="Disposed event handler"
+    OnInit="Init event handler"
+    OnLoad="Load event handler"
+    OnPreRender="PreRender event handler"
+    OnUnload="Unload event handler"
+    runat="server"
+    SkinID="string"
+    Style="string"
+    TabIndex="integer"
+    Text="string"
+    TextAlign="Left|Right"
+    ToolTip="string"
+    ValidationGroup="string"
+    Visible="True|False"
+    Width="size"
+/>
+```
+
+## Blazor Syntax
+
+### Basic CheckBox
+
+```razor
+<CheckBox Text="I agree to the terms and conditions" />
+```
+
+### Pre-checked CheckBox
+
+```razor
+<CheckBox Text="Remember me" Checked="true" />
+```
+
+### Two-way Binding
+
+```razor
+<CheckBox Text="Subscribe to newsletter" @bind-Checked="isSubscribed" />
+
+@code {
+    private bool isSubscribed = false;
+}
+```
+
+### Text Alignment
+
+By default, the label appears to the right of the checkbox. Use `TextAlign` to position it on the left:
+
+```razor
+<CheckBox Text="Label on right (default)" />
+<CheckBox Text="Label on left" TextAlign="TextAlign.Left" />
+```
+
+### Event Handling
+
+```razor
+<CheckBox Text="Notify me" OnCheckedChanged="HandleChange" />
+
+@code {
+    private void HandleChange(ChangeEventArgs e)
+    {
+        bool isChecked = (bool)e.Value;
+        // Handle the change
+    }
+}
+```
+
+### Disabled CheckBox
+
+```razor
+<CheckBox Text="This option is disabled" Enabled="false" Checked="true" />
+```
+
+### Styled CheckBox
+
+```razor
+@using static BlazorWebFormsComponents.WebColor
+
+<CheckBox Text="Custom styled" 
+          CssClass="my-checkbox" 
+          BackColor="LightBlue" 
+          ForeColor="Navy" />
+```
+
+### CheckBox without Text
+
+When no `Text` is provided, the checkbox renders without a `<span>` wrapper or `<label>`:
+
+```razor
+<CheckBox @bind-Checked="option1" />
+<CheckBox @bind-Checked="option2" />
+<CheckBox @bind-Checked="option3" />
+```
+
+## HTML Output
+
+The CheckBox component renders different HTML depending on whether text is provided:
+
+**With Text (TextAlign=Right, default):**
+```html
+<span class="custom-class" style="...">
+    <input id="guid" type="checkbox" />
+    <label for="guid">Label text</label>
+</span>
+```
+
+**With Text (TextAlign=Left):**
+```html
+<span class="custom-class" style="...">
+    <label for="guid">Label text</label>
+    <input id="guid" type="checkbox" />
+</span>
+```
+
+**Without Text:**
+```html
+<input type="checkbox" class="custom-class" style="..." />
+```
+
+## Migration Notes
+
+When migrating from Web Forms to Blazor:
+
+1. Remove the `asp:` prefix and `runat="server"` attribute
+2. Replace `AutoPostBack="true"` with the `OnCheckedChanged` event handler
+3. Use `@bind-Checked` for two-way data binding instead of reading `Checked` in code-behind
+4. The `ID` property is obsolete in Blazor; use `@ref` to get a reference to the component instance
+
+### Before (Web Forms):
+```html
+<asp:CheckBox ID="chkAgree" 
+              Text="I agree" 
+              AutoPostBack="true"
+              OnCheckedChanged="CheckBox_Changed" 
+              runat="server" />
+```
+
+### After (Blazor):
+```razor
+<CheckBox Text="I agree" 
+          @bind-Checked="agreed"
+          OnCheckedChanged="HandleChange" />
+```
+
+## Live Sample
+
+See the CheckBox component in action on the [live samples site](https://blazorwebformscomponents.azurewebsites.net/ControlSamples/CheckBox).

mkdocs.yml

@@ -65,6 +65,7 @@ nav:
   - Editor Controls:
     - AdRotator: EditorControls/AdRotator.md
     - Button: EditorControls/Button.md
+    - CheckBox: EditorControls/CheckBox.md
     - HiddenField: EditorControls/HiddenField.md
     - HyperLink: EditorControls/HyperLink.md
     - Image: EditorControls/Image.md

samples/AfterBlazorServerSide/Components/Pages/ControlSamples/CheckBox/Events.razor

@@ -0,0 +1,56 @@
+@page "/ControlSamples/CheckBox/Events"
+
+<h2>CheckBox Event Samples</h2>
+
+<Nav></Nav>
+
+<h3>OnCheckedChanged Event</h3>
+<CheckBox Text="Click to trigger event" OnCheckedChanged="HandleEvent" />
+<p>Last event time: <strong>@lastEventTime</strong></p>
+
+<h3>Two-way Binding</h3>
+<CheckBox Text="Option 1" @bind-Checked="option1" />
+<CheckBox Text="Option 2" @bind-Checked="option2" />
+<CheckBox Text="Option 3" @bind-Checked="option3" />
+<p>Selected options: 
+	@if (option1) { <span>Option 1 </span> }
+	@if (option2) { <span>Option 2 </span> }
+	@if (option3) { <span>Option 3 </span> }
+	@if (!option1 && !option2 && !option3) { <span>None</span> }
+</p>
+
+<h3>Form Submission</h3>
+<EditForm Model="formData" OnValidSubmit="HandleSubmit">
+	<CheckBox Text="Accept terms and conditions" @bind-Checked="formData.AcceptTerms" />
+	<br />
+	<CheckBox Text="Subscribe to newsletter" @bind-Checked="formData.Subscribe" />
+	<br />
+	<Button Text="Submit" CausesValidation="true" OnClick="HandleSubmit" />
+</EditForm>
+<p>Submission result: <strong>@submitResult</strong></p>
+
+@code {
+	private string lastEventTime = "Never";
+	private bool option1 = false;
+	private bool option2 = false;
+	private bool option3 = false;
+
+	private FormData formData = new FormData();
+	private string submitResult = "";
+
+	private void HandleEvent(ChangeEventArgs e)
+	{
+		lastEventTime = DateTime.Now.ToString("HH:mm:ss");
+	}
+
+	private void HandleSubmit()
+	{
+		submitResult = $"Terms: {formData.AcceptTerms}, Newsletter: {formData.Subscribe}";
+	}
+
+	private class FormData
+	{
+		public bool AcceptTerms { get; set; }
+		public bool Subscribe { get; set; }
+	}
+}

samples/AfterBlazorServerSide/Components/Pages/ControlSamples/CheckBox/Index.razor

@@ -0,0 +1,48 @@
+@page "/ControlSamples/CheckBox"
+@using BlazorWebFormsComponents.Enums
+@using static BlazorWebFormsComponents.WebColor
+
+<h2>CheckBox Component Samples</h2>
+
+<Nav></Nav>
+
+<h3>Basic CheckBox</h3>
+<CheckBox Text="I agree to terms" @bind-Checked="agreed" />
+<p>Agreed: <strong>@agreed</strong></p>
+
+<h3>Pre-checked CheckBox</h3>
+<CheckBox Text="Already checked" Checked="true" />
+
+<h3>Text Alignment</h3>
+<CheckBox Text="Label on right (default)" />
+<br />
+<CheckBox Text="Label on left" TextAlign="TextAlign.Left" />
+
+<h3>Disabled CheckBox</h3>
+<CheckBox Text="Cannot change (enabled)" Enabled="true" Checked="true" />
+<br />
+<CheckBox Text="Cannot change (disabled)" Enabled="false" Checked="true" />
+
+<h3>CheckBox without Text</h3>
+<CheckBox @bind-Checked="noTextValue" />
+<p>Value: <strong>@noTextValue</strong></p>
+
+<h3>Styled CheckBox</h3>
+<CheckBox Text="Custom CSS class" CssClass="custom-check" />
+<br />
+<CheckBox Text="Colored background" BackColor="LightYellow" ForeColor="DarkGreen" />
+
+<h3>Event Handling</h3>
+<CheckBox Text="Click to trigger event" OnCheckedChanged="HandleCheckedChanged" />
+<p>Event fired: <strong>@eventCount</strong> times</p>
+
+@code {
+	private bool agreed = false;
+	private bool noTextValue = false;
+	private int eventCount = 0;
+
+	private void HandleCheckedChanged(ChangeEventArgs e)
+	{
+		eventCount++;
+	}
+}

samples/AfterBlazorServerSide/Components/Pages/ControlSamples/CheckBox/Nav.razor

@@ -0,0 +1,5 @@
+<ul>
+	<li><a href="/ControlSamples/CheckBox">CheckBox Samples</a></li>
+	<li><a href="/ControlSamples/CheckBox/Style">Styling Samples</a></li>
+	<li><a href="/ControlSamples/CheckBox/Events">Event Samples</a></li>
+</ul>

samples/AfterBlazorServerSide/Components/Pages/ControlSamples/CheckBox/Style.razor

@@ -0,0 +1,24 @@
+@page "/ControlSamples/CheckBox/Style"
+@using BlazorWebFormsComponents.Enums
+@using static BlazorWebFormsComponents.WebColor
+
+<h2>CheckBox Style Samples</h2>
+
+<Nav></Nav>
+
+<h3>CSS Classes</h3>
+<CheckBox Text="Primary class" CssClass="btn-primary" />
+<br />
+<CheckBox Text="Success class" CssClass="btn-success" />
+
+<h3>Colors</h3>
+<CheckBox Text="Light blue background" BackColor="LightBlue" ForeColor="Navy" />
+<br />
+<CheckBox Text="Yellow background" BackColor="Yellow" ForeColor="Red" />
+
+<h3>Width and Height</h3>
+<CheckBox Text="Custom width" Width="Unit.Pixel(300)" BackColor="LightGray" />
+
+@code {
+
+}