1 files changed, 45 insertions, 10 deletions

diff --git a/web/src/widget/radio.rs b/web/src/widget/radio.rs
index e00e26db..5a9bc379 100644
--- a/web/src/widget/radio.rs
+++ b/web/src/widget/radio.rs
@@ -35,6 +35,8 @@ pub struct Radio<Message> {
     is_selected: bool,
     on_click: Message,
     label: String,
+    id: Option<String>,
+    name: Option<String>,
     style: Box<dyn StyleSheet>,
 }
 
@@ -47,9 +49,12 @@ impl<Message> Radio<Message> {
     ///   * the current selected value
     ///   * a function that will be called when the [`Radio`] is selected. It
     ///   receives the value of the radio and must produce a `Message`.
-    ///
-    /// [`Radio`]: struct.Radio.html
-    pub fn new<F, V>(value: V, label: &str, selected: Option<V>, f: F) -> Self
+    pub fn new<F, V>(
+        value: V,
+        label: impl Into<String>,
+        selected: Option<V>,
+        f: F,
+    ) -> Self
     where
         V: Eq + Copy,
         F: 'static + Fn(V) -> Message,
@@ -57,18 +62,30 @@ impl<Message> Radio<Message> {
         Radio {
             is_selected: Some(value) == selected,
             on_click: f(value),
-            label: String::from(label),
+            label: label.into(),
+            id: None,
+            name: None,
             style: Default::default(),
         }
     }
 
     /// Sets the style of the [`Radio`] button.
-    ///
-    /// [`Radio`]: struct.Radio.html
     pub fn style(mut self, style: impl Into<Box<dyn StyleSheet>>) -> Self {
         self.style = style.into();
         self
     }
+
+    /// Sets the name attribute of the [`Radio`] button.
+    pub fn name(mut self, name: impl Into<String>) -> Self {
+        self.name = Some(name.into());
+        self
+    }
+
+    /// Sets the id of the [`Radio`] button.
+    pub fn id(mut self, id: impl Into<String>) -> Self {
+        self.id = Some(id.into());
+        self
+    }
 }
 
 impl<Message> Widget<Message> for Radio<Message>
@@ -82,17 +99,35 @@ where
         _style_sheet: &mut Css<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
+        use dodrio::bumpalo::collections::String;
 
-        let radio_label = bumpalo::format!(in bump, "{}", self.label);
+        let radio_label =
+            String::from_str_in(&self.label, bump).into_bump_str();
 
         let event_bus = bus.clone();
         let on_click = self.on_click.clone();
 
+        let (label, input) = if let Some(id) = &self.id {
+            let id = String::from_str_in(id, bump).into_bump_str();
+
+            (label(bump).attr("for", id), input(bump).attr("id", id))
+        } else {
+            (label(bump), input(bump))
+        };
+
+        let input = if let Some(name) = &self.name {
+            let name = String::from_str_in(name, bump).into_bump_str();
+
+            dodrio::builder::input(bump).attr("name", name)
+        } else {
+            input
+        };
+
         // TODO: Complete styling
-        label(bump)
+        label
             .attr("style", "display: block; font-size: 20px")
             .children(vec![
-                input(bump)
+                input
                     .attr("type", "radio")
                     .attr("style", "margin-right: 10px")
                     .bool_attr("checked", self.is_selected)
@@ -100,7 +135,7 @@ where
                         event_bus.publish(on_click.clone());
                     })
                     .finish(),
-                text(radio_label.into_bump_str()),
+                text(radio_label),
             ])
             .finish()
     }