From 2941db66e44256fe58bba8fc6c66f0286c50338d Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 28 May 2024 13:35:40 -0400
Subject: [PATCH] add <br>

---
 docs/docs/components/radio.md | 50 +++++++++++++++++------------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md
index 96b0a3e99..eb97102f3 100644
--- a/docs/docs/components/radio.md
+++ b/docs/docs/components/radio.md
@@ -8,8 +8,8 @@ Radios are designed to be used with [radio groups](/components/radio-group).
 
 ```html {.example}
 <wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="1">Option 1</wa-radio><br>
+  <wa-radio value="2">Option 2</wa-radio><br>
   <wa-radio value="3">Option 3</wa-radio>
 </wa-radio-group>
 ```
@@ -21,8 +21,8 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio>
-    <WaRadio value="2">Option 2</WaRadio>
+    <WaRadio value="1">Option 1</WaRadio><br />
+    <WaRadio value="2">Option 2</WaRadio><br />
     <WaRadio value="3">Option 3</WaRadio>
   </WaRadioGroup>
 );
@@ -41,8 +41,8 @@ To set the initial value and checked state, use the `value` attribute on the con
 
 ```html {.example}
 <wa-radio-group label="Select an option" name="a" value="3">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="1">Option 1</wa-radio><br>
+  <wa-radio value="2">Option 2</wa-radio><br>
   <wa-radio value="3">Option 3</wa-radio>
 </wa-radio-group>
 ```
@@ -54,8 +54,8 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <WaRadioGroup label="Select an option" name="a" value="3">
-    <WaRadio value="1">Option 1</WaRadio>
-    <WaRadio value="2">Option 2</WaRadio>
+    <WaRadio value="1">Option 1</WaRadio><br />
+    <WaRadio value="2">Option 2</WaRadio><br />
     <WaRadio value="3">Option 3</WaRadio>
   </WaRadioGroup>
 );
@@ -68,8 +68,8 @@ Use the `disabled` attribute to disable a radio.
 
 ```html {.example}
 <wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2" disabled>Option 2</wa-radio>
+  <wa-radio value="1">Option 1</wa-radio><br>
+  <wa-radio value="2" disabled>Option 2</wa-radio><br>
   <wa-radio value="3">Option 3</wa-radio>
 </wa-radio-group>
 ```
@@ -81,10 +81,8 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio>
-    <WaRadio value="2" disabled>
-      Option 2
-    </WaRadio>
+    <WaRadio value="1">Option 1</WaRadio><br />
+    <WaRadio value="2" disabled>Option 2</WaRadio><br />
     <WaRadio value="3">Option 3</WaRadio>
   </WaRadioGroup>
 );
@@ -97,24 +95,24 @@ Add the `size` attribute to the [Radio Group](/components/radio-group) to change
 
 ```html {.example}
 <wa-radio-group size="small" value="1">
-  <wa-radio value="1">Small 1</wa-radio>
-  <wa-radio value="2">Small 2</wa-radio>
+  <wa-radio value="1">Small 1</wa-radio><br>
+  <wa-radio value="2">Small 2</wa-radio><br>
   <wa-radio value="3">Small 3</wa-radio>
 </wa-radio-group>
 
 <br />
 
 <wa-radio-group size="medium" value="1">
-  <wa-radio value="1">Medium 1</wa-radio>
-  <wa-radio value="2">Medium 2</wa-radio>
+  <wa-radio value="1">Medium 1</wa-radio><br>
+  <wa-radio value="2">Medium 2</wa-radio><br>
   <wa-radio value="3">Medium 3</wa-radio>
 </wa-radio-group>
 
 <br />
 
 <wa-radio-group size="large" value="1">
-  <wa-radio value="1">Large 1</wa-radio>
-  <wa-radio value="2">Large 2</wa-radio>
+  <wa-radio value="1">Large 1</wa-radio><br>
+  <wa-radio value="2">Large 2</wa-radio><br>
   <wa-radio value="3">Large 3</wa-radio>
 </wa-radio-group>
 ```
@@ -125,24 +123,24 @@ import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
 const App = () => (
   <>
     <WaRadioGroup size="small" value="1">
-      <WaRadio value="1">Small 1</WaRadio>
-      <WaRadio value="2">Small 2</WaRadio>
+      <WaRadio value="1">Small 1</WaRadio><br />
+      <WaRadio value="2">Small 2</WaRadio><br />
       <WaRadio value="3">Small 3</WaRadio>
     </WaRadioGroup>
 
     <br />
 
     <WaRadioGroup size="medium" value="1">
-      <WaRadio value="1">Medium 1</WaRadio>
-      <WaRadio value="2">Medium 2</WaRadio>
+      <WaRadio value="1">Medium 1</WaRadio><br />
+      <WaRadio value="2">Medium 2</WaRadio><br />
       <WaRadio value="3">Medium 3</WaRadio>
     </WaRadioGroup>
 
     <br />
 
     <WaRadioGroup size="large" value="1">
-      <WaRadio value="1">Large 1</WaRadio>
-      <WaRadio value="2">Large 2</WaRadio>
+      <WaRadio value="1">Large 1</WaRadio><br />
+      <WaRadio value="2">Large 2</WaRadio><br />
       <WaRadio value="3">Large 3</WaRadio>
     </WaRadioGroup>
   </>