new ToggleInput, Fixed binding on Radio and CheckBox

src/Connected.Components/Components/CheckBox.razor

@@ -2,12 +2,10 @@
 
 @inherits InputBase;
 
-<div class="checkbox-group">
-@if (Checked)
-{
-    <input id="@Id" name="checkbox" type="checkbox" @onchange="OnChange" @attributes=@InputAttributes checked> 
-} else {
-    <input id="@Id" name="checkbox" type="checkbox" @onchange="OnChange" @attributes=@InputAttributes>
-}
-<label for="@Id" class="checkbox-label">@Label</label>
-</div>
+<label class="checkbox-group" for="@Id">
+    <input class="checkbox-input" id="@Id" name="@ParentCheckBoxGroup.Name" type="checkbox" @attributes=@InputAttributes>
+    <div class="checkbox-fill"></div>
+    <label for="@Id" class="checkbox-label">@Label</label>
+</label>
+
+

src/Connected.Components/Components/CheckBox.razor.cs

@@ -2,20 +2,41 @@
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
-public partial class CheckBox: InputBase
+public partial class CheckBox : InputBase
 {
+	[CascadingParameter]
+	public CheckBoxGroup? ParentCheckBoxGroup { get; set; }
+
+	private bool _checked { get; set; }
+
 	[Parameter]
-	public bool Checked { get; set; } = false;
+	public bool? Checked
+	{
+		get => _checked;
+		set => _checked = (bool)value;
+	}
 
 	[Parameter, EditorRequired]
 	public string Id { get; set; }
 
 	[Parameter]
-	public EventCallback<bool> CheckedChange { get; set; }
-	public async Task OnChange(ChangeEventArgs args)
+	public EventCallback<bool> CheckedChanged { get; set; }
+
+	public async Task OnChange()
+	{
+		Checked = !Checked;
+		CheckedChanged.InvokeAsync((bool)Checked);
+	}
+
+	protected override async Task OnParametersSetAsync()
 	{
-		Checked = (bool)args.Value;
-		CheckedChange.InvokeAsync(Checked);
+		await base.OnInitializedAsync();
+		if (ParentCheckBoxGroup.Disabled) Disabled = true;
+		if (!InputAttributes.ContainsKey("disabled"))
+			InputAttributes.Add("disabled", Disabled);
+		if (!InputAttributes.ContainsKey("checked"))
+			InputAttributes.Add("checked", Checked);
+		StateHasChanged();
 	}
 
 }

src/Connected.Components/Components/CheckBoxGroup.razor

@@ -1,9 +1,13 @@
 @using Connected.Models;
 
-@inherits InputBase;
-
-<div>
-    <div class="container">
-        @ChildContent
+<CascadingValue Value="this">
+    <div>
+        @if (!string.IsNullOrEmpty(Name))
+        {
+                <h5>@Name</h5>
+        }
+        <div class="container">
+            @ChildContent
+        </div>
     </div>
-</div>
+</CascadingValue>

src/Connected.Components/Components/CheckBoxGroup.razor.cs

@@ -4,7 +4,10 @@ namespace Connected.Components;
 public partial class CheckBoxGroup
 {
 	[Parameter, EditorRequired]
-	public string Id { get; set; }
+	public string Name { get; set; }
+
+	[Parameter]
+	public bool Disabled { get; set; }
 
 	[Parameter]
 	public RenderFragment ChildContent { get; set; }

src/Connected.Components/Components/Radio.razor

@@ -2,7 +2,8 @@
 
 @inherits InputBase;
 
-<div class="radio-group">
-    <input id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes>
+<label class="radio-group" for="@Id">
+    <input class="radio-input" id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes>
+    <div class="radio-fill"></div>
     <label for="@Id" class="radio-label">@Label</label>
-</div>
+</label>

src/Connected.Components/Components/Radio.razor.cs

@@ -2,23 +2,30 @@
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
-public partial class Radio: InputBase
+public partial class Radio : InputBase
 {
 	[CascadingParameter]
 	public RadioGroup? ParentRadioGroup { get; set; }
 
+	private bool _checked { get; set; }
+
 	[Parameter]
-	public bool Checked { get; set; } = false;
+	public bool? Checked
+	{
+		get => _checked;
+		set => _checked = (bool)value;
+	}
 
 	[Parameter, EditorRequired]
 	public string Id { get; set; }
 
 	[Parameter]
-	public EventCallback<bool> CheckedChange { get; set; }
-	public async Task OnChange(ChangeEventArgs args)
+	public EventCallback<bool> CheckedChanged { get; set; }
+
+	public async Task OnChange()
 	{
-		Checked = (bool)args.Value;
-		CheckedChange.InvokeAsync(Checked);
+		Checked = !Checked;
+		CheckedChanged.InvokeAsync((bool)Checked);
 	}
 
 	protected override async Task OnInitializedAsync()

src/Connected.Components/Components/RadioGroup.razor

@@ -1,7 +1,5 @@
 @using Connected.Models;
 
-@inherits InputBase;
-
 <CascadingValue Value="this">
     <div>
         @if (!string.IsNullOrEmpty(Name))

src/Connected.Components/Components/RadioGroup.razor.cs

@@ -6,7 +6,10 @@ public partial class RadioGroup
 	[Parameter, EditorRequired]
 	public string Name { get; set; }
 
+	[Parameter]
+	public bool Disabled { get; set; }
+
 	[Parameter]
 	public RenderFragment ChildContent { get; set; }
 
-}
+}

src/Connected.Components/Components/ToggleInput.razor

@@ -0,0 +1,17 @@
+@using Connected.Models;
+
+@inherits InputBase;
+
+<label class="toggle-group" for="@Id">
+    <input class="toggle-input"
+           type="checkbox"
+           name="toggle"
+           disabled="@Disabled"
+           id="@Id"
+           checked="@Checked"
+           @onchange="@OnChange"
+           @attributes=@InputAttributes>
+
+    <div class="toggle-fill"></div>
+    <label for="@Id" class="toggle-label">@Label</label>
+</label>

src/Connected.Components/Components/ToggleInput.razor.cs

@@ -0,0 +1,27 @@
+using Connected.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class ToggleInput: InputBase
+{
+	private bool _checked { get; set; }
+
+	[Parameter]
+	public bool? Checked
+	{
+		get => _checked;
+		set => _checked= (bool)value;
+	}
+
+	[Parameter, EditorRequired]
+	public string Id { get; set; }
+
+	[Parameter]
+	public EventCallback<bool> CheckedChanged { get; set; }
+
+	public async Task OnChange()
+	{
+		Checked = !Checked;
+		CheckedChanged.InvokeAsync((bool)Checked);
+	}
+}