From e79a3f7a3a8b7bac2b5a37c1f31a095f010c76cd Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 27 Nov 2024 16:19:02 +0200
Subject: [PATCH] docs(radio): multiple groups

---
 elements/pf-radio/demo/multiple-groups.html | 42 +++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 elements/pf-radio/demo/multiple-groups.html

diff --git a/elements/pf-radio/demo/multiple-groups.html b/elements/pf-radio/demo/multiple-groups.html
new file mode 100644
index 0000000000..c86f235b84
--- /dev/null
+++ b/elements/pf-radio/demo/multiple-groups.html
@@ -0,0 +1,42 @@
+<section class="container">
+  <div class="radio-group">
+    <p>Salutation</p>
+    <pf-radio value="mr"    name="title" label="Mr"></pf-radio>
+    <pf-radio value="miss"  name="title" label="Miss"></pf-radio>
+    <pf-radio value="mrs"   name="title" label="Mrs"></pf-radio>
+    <pf-radio value="ms"    name="title" label="Ms"></pf-radio>
+    <pf-radio value="dr"    name="title" label="Dr"></pf-radio>
+    <pf-radio value="other" name="title" label="Other"></pf-radio>
+  </div>
+  <div class="radio-group">
+    <p>Score</p>
+    <pf-radio value="a" name="score" label="A"></pf-radio>
+    <pf-radio value="b" name="score" label="B"></pf-radio>
+    <pf-radio value="c" name="score" label="C"></pf-radio>
+  </div>
+  <pf-button> Submit</pf-button>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-radio/pf-radio.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>
+
+<style>
+.container{
+  padding: 3rem;
+}
+.container p {
+  font-size: 1.5rem;
+  margin-block-end: 0.5rem;
+}
+.radio-group{
+  display: flex;
+  justify-content: flex-start;
+  padding-bottom: 1rem;
+}
+.radio-group pf-radio{
+  padding-right: 1rem;
+}
+</style>
+