From 37a7525336b171847bf32dacb92651c154463e77 Mon Sep 17 00:00:00 2001
From: Lucas Vas <lvas463@gmail.com>
Date: Sun, 23 Nov 2025 17:10:26 -0500
Subject: [PATCH] fix: create unique IDs for checkbox and radio lists

---
 src/components/checkbox.rs | 10 ++++++++--
 src/components/chips.rs    |  6 ++----
 src/components/mod.rs      |  1 +
 src/components/radio.rs    | 12 +++++++++---
 src/components/utils.rs    |  8 ++++++++
 src/pages/home_page.rs     | 13 +++++++++++++
 6 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 src/components/utils.rs

diff --git a/src/components/checkbox.rs b/src/components/checkbox.rs
index a245834..f4af14c 100644
--- a/src/components/checkbox.rs
+++ b/src/components/checkbox.rs
@@ -1,16 +1,20 @@
 use crate::common::ValueType;
 use leptos::prelude::*;
 use std::collections::HashMap;
+use crate::components::utils::create_unique_id;
 
 #[component]
 pub fn Checkbox(
     #[prop()] checked: Signal<bool>,
     #[prop(into)] on_change: Callback<(), ()>,
     #[prop(into)] value: String,
+    #[prop(into)] name: String,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
+    let id = create_unique_id(&name, &value);
+    
     view! {
-        <label for=value class="flex items-center">
+        <label for=id class="flex items-center">
             <input
                 // Using the "peer" class links this input with the div "peer" at the same level.
                 // By using the "peer-checked" selector this div can toggle states based on this
@@ -19,7 +23,8 @@ pub fn Checkbox(
                 relative peer shrink-0
                 hidden"
                 type="checkbox"
-                id=value.clone()
+                id=id.clone()
+                name=name.clone()
                 on:change=move |_| on_change.run(())
                 prop:checked=checked
                 disabled=disabled
@@ -109,6 +114,7 @@ pub fn CheckboxList(
                             on_change=on_change
                             // The actual selected values are tracked by this element, not by the checkboxes themselves.
                             value=item.clone()
+                            name=data_member.clone()
                             disabled=disabled
                         />
                     }
diff --git a/src/components/chips.rs b/src/components/chips.rs
index bc3a31c..ba5ce14 100644
--- a/src/components/chips.rs
+++ b/src/components/chips.rs
@@ -1,6 +1,7 @@
 use std::collections::HashMap;
 use leptos::prelude::*;
 use crate::common::ValueType;
+use crate::components::utils::create_unique_id;
 
 /// # Chip Component
 /// 
@@ -31,10 +32,7 @@ pub fn Chip(
 ) -> impl IntoView {
     // Generate a unique id - ensure that the value doesn't contain spaces.
     // Without this id, checkbox/radio inputs can interfere with each other.
-    let value_no_spaces = value.clone().chars()
-        .filter(|c| !c.is_whitespace())
-        .collect::<String>();
-    let id = format!("{}-{}", name.clone(), value_no_spaces);
+    let id = create_unique_id(&name, &value);
     
     view! {
         <label for=id>
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 2616640..3cb092a 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -8,6 +8,7 @@ mod row;
 mod select;
 mod text_field;
 mod chips;
+mod utils;
 
 pub use self::{
     action_button::*, checkbox::*, loading::*, multi_entry::*, panel::*, radio::*, row::*,
diff --git a/src/components/radio.rs b/src/components/radio.rs
index 73cc789..f3bc8c7 100644
--- a/src/components/radio.rs
+++ b/src/components/radio.rs
@@ -1,16 +1,20 @@
 use crate::common::ValueType;
 use leptos::prelude::*;
 use std::collections::HashMap;
+use crate::components::utils::create_unique_id;
 
 #[component]
 pub fn Radio(
     #[prop()] checked: Signal<bool>,
     #[prop(into)] on_change: Callback<(), ()>,
     #[prop(into)] value: String,
+    #[prop(into)] name: String,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
 ) -> impl IntoView {
+    let id = create_unique_id(&name, &value);
+    
     view! {
-        <label for=value class="flex items-center">
+        <label for=id class="flex items-center">
             <input
                 // Using the "peer" class links this input with the div "peer" at the same level.
                 // By using the "peer-checked" selector this div can toggle states based on this
@@ -18,8 +22,9 @@ pub fn Radio(
                 class="
                 relative peer shrink-0
                 hidden"
-                type="checkbox"
-                id=value.clone()
+                type="radio"
+                id=id.clone()
+                name=name.clone()
                 on:change=move |_| on_change.run(())
                 prop:checked=checked
                 disabled=disabled
@@ -96,6 +101,7 @@ pub fn RadioList(
                             on_change=on_change
                             // The actual selected values are tracked by this element, not by the checkboxes themselves.
                             value=item.clone()
+                            name=data_member.clone()
                             disabled=disabled
                         />
                     }
diff --git a/src/components/utils.rs b/src/components/utils.rs
new file mode 100644
index 0000000..2090468
--- /dev/null
+++ b/src/components/utils.rs
@@ -0,0 +1,8 @@
+/// Creates a unique ID for use in components like the [`CheckboxList`],
+/// [`RadioList`], and [`ChipsList`].
+pub fn create_unique_id(name: &String, value: &String) -> String {
+    let value_no_spaces = value.clone().chars()
+        .filter(|c| !c.is_whitespace())
+        .collect::<String>();
+    format!("{}-{}", name.clone(), value_no_spaces)
+}
\ No newline at end of file
diff --git a/src/pages/home_page.rs b/src/pages/home_page.rs
index d04cae9..c770480 100644
--- a/src/pages/home_page.rs
+++ b/src/pages/home_page.rs
@@ -241,6 +241,19 @@ pub fn HomePage() -> impl IntoView {
                                                     data_map = expandable_react.data
                                                 />
                                             </Row>
+                                            <Row>
+                                                // Radio { data_member, label, items }
+                                                <RadioList
+                                                    label="Town:"
+                                                    items=vec!["Southbury", "Middlebury"]
+                                                        .into_iter()
+                                                        .map(|s| s.into())
+                                                        .collect()
+                                                    disabled=elements_disabled
+                                                    data_member="town_too"
+                                                    data_map = expandable_react.data
+                                                />
+                                            </Row>
                                             <Row>
                                                 // Checkbox { data_member, label, items }
                                                 <CheckboxList