src/Connected.Components.Showcase.Runner/Pages/Index.razor

@@ -6,13 +6,21 @@
 
 <p>SelectedValue: @SelectedValue.ToString()</p>
 
-<SimpleSelect
-    Items="@items" 
-    Label="Simple select" 
-    @bind-Value=@SelectedValue
-/>
-
+<RadioGroup Name="Group1">
+    <Radio Id="radio1" Label="Group 1, Radio 1"></Radio>
+    <Radio Id="radio2" Label="Group 1, Radio 2"></Radio>
+    <Radio Id="radio3" Label="Group 1, Radio 3"></Radio>
+    <Radio Id="radio4" Label="Group 1, Radio 4"></Radio>
+    <Radio Id="radio5" Label="Group 1, Radio 5" Disabled=true></Radio>
+</RadioGroup>
 
+<RadioGroup Name="Group2" Disabled=true>
+    <Radio Id="radio21" Label="Group 2, Radio 1"></Radio>
+    <Radio Id="radio22" Label="Group 2, Radio 2"></Radio>
+    <Radio Id="radio23" Label="Group 2, Radio 3"></Radio>
+    <Radio Id="radio24" Label="Group 2, Radio 4"></Radio>
+    <Radio Id="radio25" Label="Group 2, Radio 5"></Radio>
+</RadioGroup>
 @code {
 
     int SelectedValue;

src/Connected.Components/Components/CheckBox.razor

@@ -0,0 +1,13 @@
+@using Connected.Models;
+
+@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>

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

@@ -0,0 +1,21 @@
+using Connected.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class CheckBox: InputBase
+{
+	[Parameter]
+	public bool Checked { get; set; } = false;
+
+	[Parameter, EditorRequired]
+	public string Id { get; set; }
+
+	[Parameter]
+	public EventCallback<bool> CheckedChange { get; set; }
+	public async Task OnChange(ChangeEventArgs args)
+	{
+		Checked = (bool)args.Value;
+		CheckedChange.InvokeAsync(Checked);
+	}
+
+}

src/Connected.Components/Components/CheckBoxGroup.razor

@@ -0,0 +1,9 @@
+@using Connected.Models;
+
+@inherits InputBase;
+
+<div>
+    <div class="container">
+        @ChildContent
+    </div>
+</div>

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

@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class CheckBoxGroup
+{
+	[Parameter, EditorRequired]
+	public string Id { get; set; }
+
+	[Parameter]
+	public RenderFragment ChildContent { get; set; }
+}

src/Connected.Components/Components/NumberInput.razor.cs

@@ -228,5 +228,14 @@ public partial class NumberInput<NumberType>:InputBase where NumberType : INumbe
 		await base.OnParametersSetAsync();
     }
 
-    #endregion
+	protected override async Task OnInitializedAsync()
+	{
+		await base.OnInitializedAsync();
+		if (Required)
+		{
+			if (!InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
+		}
+	}
+
+	#endregion
 }

src/Connected.Components/Components/Radio.razor

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

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

@@ -0,0 +1,31 @@
+using Connected.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class Radio: InputBase
+{
+	[CascadingParameter]
+	public RadioGroup? ParentRadioGroup { get; set; }
+
+	[Parameter]
+	public bool Checked { get; set; } = false;
+
+	[Parameter, EditorRequired]
+	public string Id { get; set; }
+
+	[Parameter]
+	public EventCallback<bool> CheckedChange { get; set; }
+	public async Task OnChange(ChangeEventArgs args)
+	{
+		Checked = (bool)args.Value;
+		CheckedChange.InvokeAsync(Checked);
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
+		await base.OnInitializedAsync();
+		if (ParentRadioGroup.Disabled) Disabled = true;
+		if (!InputAttributes.ContainsKey("disabled"))
+			InputAttributes.Add("disabled", Disabled);
+	}
+}

src/Connected.Components/Components/RadioGroup.razor

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

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

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class RadioGroup
+{
+	[Parameter, EditorRequired]
+	public string Name { get; set; }
+
+	[Parameter]
+	public RenderFragment ChildContent { get; set; }
+
+}

src/Connected.Components/Components/SimpleSelect.razor

@@ -7,7 +7,6 @@
 @if (Items is not null)
 {
    <div class="@InputFieldClassList">
-        
         <select type="textarea" style="height:0px;" @attributes=@InputAttributes>
             </select>
             @if (IsLabel)
@@ -42,8 +41,7 @@
                         <input type="text"
                             placeholder="Enter search string..."
                             class="dropdown-item"
-                            @bind-value="@SearchText"
-                        />
+                            @bind-value="@SearchText" />
                     }
                     @foreach (ValueType item in Items)
                     {

src/Connected.Components/Components/SimpleSelect.razor.cs

@@ -29,30 +29,13 @@ public partial class SimpleSelect<ValueType> : InputBase
 		}
 	}
 
-	private string DropDownClass { get; set; } = "drop-down";
-
-	bool DropDownClicked = false;
-
-	public void DropDownClassToggle()
-	{
-		DropDownClicked = !DropDownClicked;
-		if (DropDownClicked)
-		{
-			DropDownClass = "";
-		} else
-		{
-			DropDownClass = "drop-down";
-		}
-		StateHasChanged();
-	}
-
 	private async Task SetSelectedItem(ValueType item)
 	{
 		//DropDownClassToggle();
 		await ValueChanged.InvokeAsync(item);
 	}
 
-	private async Task FilterItems()
+	private void FilterItems()
 	{
 		if (string.IsNullOrEmpty(_searchText))
 		{
@@ -76,13 +59,18 @@ public partial class SimpleSelect<ValueType> : InputBase
 
 	protected override async Task OnParametersSetAsync()
 	{
-		if (base.InputAttributes is null) base.InputAttributes = new();
-		if (base.Required)
-		{
-			if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
-		}
+		
 		OriginalItems = Items;
-		if (_searchText.Length>0) await FilterItems();
+		if (_searchText.Length>0) FilterItems();
+		await base.OnParametersSetAsync();
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
 		await base.OnInitializedAsync();
+		if (Required)
+		{
+			if (InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
+		}
 	}
 }

src/Connected.Components/Components/TextInput.razor.cs

@@ -56,14 +56,13 @@ public partial class TextInput: InputBase
 
 	}
 
-	protected override async Task OnParametersSetAsync()
-    {
-		if (base.InputAttributes is null) base.InputAttributes = new();
-		if (base.Required)
-		{
-			if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
-		}
+	protected override async Task OnInitializedAsync()
+   {
 		await base.OnInitializedAsync();
-    }
+		if (Required)
+		{
+			if (!InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
+		}
+   }
 
 }

src/Connected.Components/Models/InputBase.cs

@@ -1,7 +1,5 @@
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
-using static Connected.Colors;
-using static System.Net.Mime.MediaTypeNames;
 
 namespace Connected.Models;
 public class InputBase : ComponentBase
@@ -124,4 +122,9 @@ public class InputBase : ComponentBase
 
 	[Parameter]
 	public string Placeholder { get; set; } = string.Empty;
+
+	protected override async Task OnInitializedAsync()
+	{
+		if (InputAttributes is null) InputAttributes = new();
+	}
 }