Add radio group (#1963)

* add radio group

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Fabio Pliger <fpliger@users.noreply.github.com>

pyscript.core/src/stdlib/pyweb/ui/shoelace.py

@@ -377,19 +377,68 @@ class Icon(ShoeBase):
         )
 
 
-class Radio(ShoeBase):
+class Radio(TextShoeBase):
     tag = "sl-radio"
     value = js_property("value")
     size = js_property("size")
     disabled = js_property("disabled")
     update_complete = js_property("updateComplete")
 
-    def __init__(self, value=None, size=None, disabled=None, style=None, **kwargs):
+    def __init__(
+        self, content, value=None, size=None, disabled=None, style=None, **kwargs
+    ):
         super().__init__(
-            value=value, size=size, disabled=disabled, style=style, **kwargs
+            content, value=value, size=size, disabled=disabled, style=style, **kwargs
         )
 
 
+class RadioGroup(ShoeBase):
+    tag = "sl-radio-group"
+    label = js_property("label")
+    help_text = js_property("helpText")
+    name = js_property("name")
+    value = js_property("value")
+    size = js_property("size")
+    form = js_property("form")
+    required = js_property("required")
+    validity = js_property("validity")
+    validation_message = js_property("validationMessage")
+    update_complete = js_property("updateComplete")
+
+    def __init__(
+        self,
+        children: list[Radio] = None,
+        label=None,
+        help_text=None,
+        name=None,
+        value=None,
+        size=None,
+        form=None,
+        required=None,
+        validity=None,
+        validation_message=None,
+        update_complete=None,
+        **kwargs,
+    ):
+        super().__init__(
+            label=label,
+            help_text=help_text,
+            name=name,
+            value=value,
+            size=size,
+            form=form,
+            required=required,
+            validity=validity,
+            validation_message=validation_message,
+            update_complete=update_complete,
+            **kwargs,
+        )
+        if children:
+            for radio in children:
+                if isinstance(radio, Radio):
+                    self.append(radio)
+
+
 class CopyButton(ShoeBase):
     tag = "sl-copy-button"
     value = js_property("value")

pyscript.core/test/ui/examples.py

@@ -30,6 +30,7 @@ from pyweb.ui.shoelace import (
     Divider,
     Icon,
     Radio,
+    RadioGroup,
     Range,
     Rating,
     RelativeTime,
@@ -138,6 +139,25 @@ Card(p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscri
             "code": "Rating()",
         },
         "Radio": {
+            "instance": Radio("Option 42"),
+            "code": el.code('Radio("Option 42")'),
+        },
+        "Radio Group": {
+            "instance": RadioGroup(
+                [
+                    Radio("radio 1", name="radio 1", value=1, style={"margin": "20px"}),
+                    Radio("radio 2", name="radio 2", value=2, style={"margin": "20px"}),
+                    Radio("radio 3", name="radio 3", value=3, style={"margin": "20px"}),
+                ],
+                label="Select an option",
+            ),
+            "code": el.code(
+                """
+                RadioGroup([Radio("radio 1", name="radio 1", value=1, style={"margin": "20px"}),
+                                     Radio("radio 2", name="radio 2", value=2, style={"margin": "20px"}),
+                                     Radio("radio 3", name="radio 3", value=3, style={"margin": "20px"})],
+                                    label="Select an option"),"""
+            ),
             "instance": Radio(),
             "code": "Radio()",
         },