From 9b3240a14fb6c90e2a340c9ac65b045641fd6316 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 4 Aug 2022 08:23:50 -0400
Subject: [PATCH] update examples

---
 docs/components/radio-button.md | 10 +++++-----
 docs/components/radio-group.md  | 26 ++++++++++++++++++++++++++
 docs/components/radio.md        | 14 +++++++-------
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/docs/components/radio-button.md b/docs/components/radio-button.md
index 03046ef09..388b9aa6f 100644
--- a/docs/components/radio-button.md
+++ b/docs/components/radio-button.md
@@ -59,8 +59,8 @@ Use the `disabled` attribute to disable a radio button.
 ```html preview
 <sl-radio-group label="Select an option" name="a" value="1">
   <sl-radio-button value="1">Option 1</sl-radio-button>
-  <sl-radio-button value="2">Option 2</sl-radio-button>
-  <sl-radio-button value="3" disabled>Option 3</sl-radio-button>
+  <sl-radio-button value="2" disabled>Option 2</sl-radio-button>
+  <sl-radio-button value="3">Option 3</sl-radio-button>
 </sl-radio-group>
 ```
 
@@ -70,10 +70,10 @@ import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
     <SlRadioButton value="1">Option 1</SlRadioButton>
-    <SlRadioButton value="2">Option 2</SlRadioButton>
-    <SlRadioButton value="3" disabled>
-      Option 3
+    <SlRadioButton value="2" disabled>
+      Option 2
     </SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
   </SlRadioGroup>
 );
 ```
diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index 9c1bf9a5b..8e1d9864f 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -74,6 +74,32 @@ const App = () => (
 );
 ```
 
+### Disabling Options
+
+Radios and radio buttons can be disabled by adding the `disabled` attribute to the respective options inside the radio group.
+
+```html preview
+<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio value="1">Option 1</sl-radio>
+  <sl-radio value="2" disabled>Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+```
+
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2" disabled>
+      Option 2
+    </SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+```
+
 ### Validation
 
 Setting the `required` attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.
diff --git a/docs/components/radio.md b/docs/components/radio.md
index ef7497ba1..cd40541cc 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -35,7 +35,7 @@ const App = () => (
 To set the initial value and checked state, use the `value` attribute on the containing radio group.
 
 ```html preview
-<sl-radio-group label="Select an option" name="a" value="1">
+<sl-radio-group label="Select an option" name="a" value="3">
   <sl-radio value="1">Option 1</sl-radio>
   <sl-radio value="2">Option 2</sl-radio>
   <sl-radio value="3">Option 3</sl-radio>
@@ -46,7 +46,7 @@ To set the initial value and checked state, use the `value` attribute on the con
 import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
+  <SlRadioGroup label="Select an option" name="a" value="3">
     <SlRadio value="1">Option 1</SlRadio>
     <SlRadio value="2">Option 2</SlRadio>
     <SlRadio value="3">Option 3</SlRadio>
@@ -61,8 +61,8 @@ Use the `disabled` attribute to disable a radio.
 ```html preview
 <sl-radio-group label="Select an option" name="a" value="1">
   <sl-radio value="1">Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3" disabled>Option 3</sl-radio>
+  <sl-radio value="2" disabled>Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
 </sl-radio-group>
 ```
 
@@ -72,10 +72,10 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
     <SlRadio value="1">Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3" disabled>
-      Option 3
+    <SlRadio value="2" disabled>
+      Option 2
     </SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
   </SlRadioGroup>
 );
 ```