diff --git a/docs/components/radio-button.md b/docs/components/radio-button.md
index df6de475..87297f21 100644
--- a/docs/components/radio-button.md
+++ b/docs/components/radio-button.md
@@ -7,8 +7,8 @@ Radios buttons allow the user to select a single option from a group using a but
 Radio buttons are designed to be used with [radio groups](/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio-button name="a" value="1" checked>Option 1</sl-radio-button>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button name="a" value="1">Option 1</sl-radio-button>
   <sl-radio-button name="a" value="2">Option 2</sl-radio-button>
   <sl-radio-button name="a" value="3">Option 3</sl-radio-button>
 </sl-radio-group>
@@ -18,8 +18,8 @@ Radio buttons are designed to be used with [radio groups](/components/radio-grou
 import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton name="option" value="1" checked>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton name="option" value="1">
       Option 1
     </SlRadioButton>
     <SlRadioButton name="option" value="2">
@@ -34,43 +34,13 @@ const App = () => (
 
 ## Examples
 
-### Checked
-
-To set the initial checked state, use the `checked` attribute.
-
-```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio-button name="option" value="1" checked>Option 1</sl-radio-button>
-  <sl-radio-button name="option" value="2">Option 2</sl-radio-button>
-  <sl-radio-button name="option" value="3">Option 3</sl-radio-button>
-</sl-radio-group>
-```
-
-```jsx react
-import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton name="option" value="1" checked>
-      Option 1
-    </SlRadioButton>
-    <SlRadioButton name="option" value="2">
-      Option 2
-    </SlRadioButton>
-    <SlRadioButton name="option" value="3">
-      Option 3
-    </SlRadioButton>
-  </SlRadioGroup>
-);
-```
-
 ### Disabled
 
 Use the `disabled` attribute to disable a radio button.
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio-button name="option" value="1" checked>Option 1</sl-radio-button>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button name="option" value="1">Option 1</sl-radio-button>
   <sl-radio-button name="option" value="2">Option 2</sl-radio-button>
   <sl-radio-button name="option" value="3" disabled>Option 3</sl-radio-button>
 </sl-radio-group>
@@ -80,8 +50,8 @@ Use the `disabled` attribute to disable a radio button.
 import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton name="option" value="1" checked>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton name="option" value="1">
       Option 1
     </SlRadioButton>
     <SlRadioButton name="option" value="2">
@@ -99,24 +69,24 @@ const App = () => (
 Use the `size` attribute to change a radio button's size.
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio-button size="small" name="option" value="1" checked>Option 1</sl-radio-button>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button size="small" name="option" value="1">Option 1</sl-radio-button>
   <sl-radio-button size="small" name="option" value="2">Option 2</sl-radio-button>
   <sl-radio-button size="small" name="option" value="3">Option 3</sl-radio-button>
 </sl-radio-group>
 
 <br />
 
-<sl-radio-group label="Select an option">
-  <sl-radio-button size="medium" name="option" value="1" checked>Option 1</sl-radio-button>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button size="medium" name="option" value="1">Option 1</sl-radio-button>
   <sl-radio-button size="medium" name="option" value="2">Option 2</sl-radio-button>
   <sl-radio-button size="medium" name="option" value="3">Option 3</sl-radio-button>
 </sl-radio-group>
 
 <br />
 
-<sl-radio-group label="Select an option">
-  <sl-radio-button size="large" name="option" value="1" checked>Option 1</sl-radio-button>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button size="large" name="option" value="1">Option 1</sl-radio-button>
   <sl-radio-button size="large" name="option" value="2">Option 2</sl-radio-button>
   <sl-radio-button size="large" name="option" value="3">Option 3</sl-radio-button>
 </sl-radio-group>
@@ -126,24 +96,24 @@ Use the `size` attribute to change a radio button's size.
 import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton size="small" name="option" value="1" checked>Option 1</SlRadioButton>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton size="small" name="option" value="1">Option 1</SlRadioButton>
     <SlRadioButton size="small" name="option" value="2">Option 2</SlRadioButton>
     <SlRadioButton size="small" name="option" value="3">Option 3</SlRadioButton>
   </SlRadioGroup>
 
   <br />
 
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton size="medium" name="option" value="1" checked>Option 1</SlRadioButton>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton size="medium" name="option" value="1">Option 1</SlRadioButton>
     <SlRadioButton size="medium" name="option" value="2">Option 2</SlRadioButton>
     <SlRadioButton size="medium" name="option" value="3">Option 3</SlRadioButton>
   </SlRadioGroup>
 
   <br />
 
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton size="large" name="option" value="1" checked>Option 1</SlRadioButton>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton size="large" name="option" value="1">Option 1</SlRadioButton>
     <SlRadioButton size="large" name="option" value="2">Option 2</SlRadioButton>
     <SlRadioButton size="large" name="option" value="3">Option 3</SlRadioButton>
   </SlRadioGroup>
@@ -155,24 +125,24 @@ const App = () => (
 Use the `pill` attribute to give radio buttons rounded edges.
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio-button pill size="small" name="option" value="1" checked>Option 1</sl-radio-button>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button pill size="small" name="option" value="1">Option 1</sl-radio-button>
   <sl-radio-button pill size="small" name="option" value="2">Option 2</sl-radio-button>
   <sl-radio-button pill size="small" name="option" value="3">Option 3</sl-radio-button>
 </sl-radio-group>
 
 <br />
 
-<sl-radio-group label="Select an option">
-  <sl-radio-button pill size="medium" name="option" value="1" checked>Option 1</sl-radio-button>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button pill size="medium" name="option" value="1">Option 1</sl-radio-button>
   <sl-radio-button pill size="medium" name="option" value="2">Option 2</sl-radio-button>
   <sl-radio-button pill size="medium" name="option" value="3">Option 3</sl-radio-button>
 </sl-radio-group>
 
 <br />
 
-<sl-radio-group label="Select an option">
-  <sl-radio-button pill size="large" name="option" value="1" checked>Option 1</sl-radio-button>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button pill size="large" name="option" value="1">Option 1</sl-radio-button>
   <sl-radio-button pill size="large" name="option" value="2">Option 2</sl-radio-button>
   <sl-radio-button pill size="large" name="option" value="3">Option 3</sl-radio-button>
 </sl-radio-group>
@@ -182,24 +152,24 @@ Use the `pill` attribute to give radio buttons rounded edges.
 import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton pill size="small" name="option" value="1" checked>Option 1</SlRadioButton>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton pill size="small" name="option" value="1">Option 1</SlRadioButton>
     <SlRadioButton pill size="small" name="option" value="2">Option 2</SlRadioButton>
     <SlRadioButton pill size="small" name="option" value="3">Option 3</SlRadioButton>
   </SlRadioGroup>
 
   <br />
 
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton pill size="medium" name="option" value="1" checked>Option 1</SlRadioButton>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton pill size="medium" name="option" value="1">Option 1</SlRadioButton>
     <SlRadioButton pill size="medium" name="option" value="2">Option 2</SlRadioButton>
     <SlRadioButton pill size="medium" name="option" value="3">Option 3</SlRadioButton>
   </SlRadioGroup>
 
   <br />
 
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton pill size="large" name="option" value="1" checked>Option 1</SlRadioButton>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton pill size="large" name="option" value="1">Option 1</SlRadioButton>
     <SlRadioButton pill size="large" name="option" value="2">Option 2</SlRadioButton>
     <SlRadioButton pill size="large" name="option" value="3">Option 3</SlRadioButton>
   </SlRadioGroup>
@@ -211,8 +181,8 @@ const App = () => (
 Use the `prefix` and `suffix` slots to add icons.
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio-button name="a" value="1" checked>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio-button name="a" value="1">
     <sl-icon slot="prefix" name="archive"></sl-icon>
     Option 1
   </sl-radio-button>
@@ -234,8 +204,8 @@ Use the `prefix` and `suffix` slots to add icons.
 import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadioButton name="a" value="1" checked>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadioButton name="a" value="1">
       <SlIcon slot="prefix" name="archive" />
       Option 1
     </SlRadioButton>
@@ -259,7 +229,7 @@ const App = () => (
 You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
 
 ```html preview
-<sl-radio-group label="Select an option">
+<sl-radio-group label="Select an option" value="neutral">
   <sl-radio-button name="a" value="angry">
     <sl-icon name="emoji-angry" label="Angry"></sl-icon>
   </sl-radio-button>
@@ -268,7 +238,7 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
     <sl-icon name="emoji-frown" label="Sad"></sl-icon>
   </sl-radio-button>
 
-  <sl-radio-button name="a" value="neutral" checked>
+  <sl-radio-button name="a" value="neutral">
     <sl-icon name="emoji-neutral" label="Neutral"></sl-icon>
   </sl-radio-button>
 
@@ -286,7 +256,7 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
 import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
+  <SlRadioGroup label="Select an option" value="neutral">
     <SlRadioButton name="a" value="angry">
       <SlIcon name="emoji-angry" label="Angry" />
     </SlRadioButton>
@@ -295,7 +265,7 @@ const App = () => (
       <SlIcon name="emoji-frown" label="Sad" />
     </SlRadioButton>
 
-    <SlRadioButton name="a" value="neutral" checked>
+    <SlRadioButton name="a" value="neutral">
       <SlIcon name="emoji-neutral" label="Neutral" />
     </SlRadioButton>
 
@@ -310,77 +280,4 @@ const App = () => (
 );
 ```
 
-### Custom Validity
-
-Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
-
-```html preview
-<form class="custom-validity">
-  <sl-radio-group label="Select an option">
-    <sl-radio-button name="a" value="1" checked>Not me</sl-radio-button>
-    <sl-radio-button name="a" value="2">Me neither</sl-radio-button>
-    <sl-radio-button name="a" value="3">Choose me</sl-radio-button>
-  </sl-radio-group>
-  <br />
-  <sl-button type="submit" variant="primary">Submit</sl-button>
-</form>
-<script>
-  const form = document.querySelector('.custom-validity');
-  const radioButton = form.querySelectorAll('sl-radio-button')[2];
-  const errorMessage = 'You must choose this option';
-  // Set initial validity as soon as the element is defined
-  customElements.whenDefined('sl-radio-button').then(() => {
-    radioButton.setCustomValidity(errorMessage);
-  });
-  // Update validity when a selection is made
-  form.addEventListener('sl-change', () => {
-    const isValid = radioButton.checked;
-    radioButton.setCustomValidity(isValid ? '' : errorMessage);
-  });
-  // Handle form submit
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
-  });
-</script>
-```
-
-```jsx react
-import { useEffect, useRef } from 'react';
-import { SlButton, SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
-const App = () => {
-  const radio = useRef(null);
-  const errorMessage = 'You must choose this option';
-  function handleChange(event) {
-    radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
-  }
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-  useEffect(() => {
-    radio.current.setCustomValidity(errorMessage);
-  }, []);
-  return (
-    <form class="custom-validity" onSubmit={handleSubmit}>
-      <SlRadioGroup label="Select an option">
-        <SlRadioButton name="a" value="1" checked onSlChange={handleChange}>
-          Not me
-        </SlRadioButton>
-        <SlRadioButton name="a" value="2" onSlChange={handleChange}>
-          Me neither
-        </SlRadioButton>
-        <SlRadioButton ref={radio} name="a" value="3" onSlChange={handleChange}>
-          Choose me
-        </SlRadioButton>
-      </SlRadioGroup>
-      <br />
-      <SlButton type="submit" variant="primary">
-        Submit
-      </SlButton>
-    </form>
-  );
-};
-```
-
 [component-metadata:sl-radio-button]
diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index d860877d..e22eefc7 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -86,4 +86,77 @@ const App = () => (
 );
 ```
 
+### Custom Validity
+
+Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
+
+```html preview
+<form class="custom-validity">
+  <sl-radio-group label="Select an option" value="1">
+    <sl-radio name="a" value="1">Not me</sl-radio>
+    <sl-radio name="a" value="2">Me neither</sl-radio>
+    <sl-radio name="a" value="3">Choose me</sl-radio>
+  </sl-radio-group>
+  <br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+</form>
+<script>
+  const form = document.querySelector('.custom-validity');
+  const radioGroup = form.querySelector('sl-radio-group');
+  const errorMessage = 'You must choose the last option';
+  // Set initial validity as soon as the element is defined
+  customElements.whenDefined('sl-radio-group').then(() => {
+    radioGroup.setCustomValidity(errorMessage);
+  });
+  // Update validity when a selection is made
+  form.addEventListener('sl-change', () => {
+    const isValid = radioGroup.value === '3';
+    radioGroup.setCustomValidity(isValid ? '' : errorMessage);
+  });
+  // Handle form submit
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    // alert('All fields are valid!');
+  });
+</script>
+```
+
+```jsx react
+import { useEffect, useRef } from 'react';
+import { SlButton, SlIcon, SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+const App = () => {
+  const radio = useRef(null);
+  const errorMessage = 'You must choose this option';
+  function handleChange(event) {
+    radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+  useEffect(() => {
+    radio.current.setCustomValidity(errorMessage);
+  }, []);
+  return (
+    <form class="custom-validity" onSubmit={handleSubmit}>
+      <SlRadioGroup label="Select an option" value="1">
+        <SlRadio name="a" value="1" onSlChange={handleChange}>
+          Not me
+        </SlRadio>
+        <SlRadio name="a" value="2" onSlChange={handleChange}>
+          Me neither
+        </SlRadio>
+        <SlRadio ref={radio} name="a" value="3" onSlChange={handleChange}>
+          Choose me
+        </SlRadio>
+      </SlRadioGroup>
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+```
+
 [component-metadata:sl-radio-group]
diff --git a/docs/components/radio.md b/docs/components/radio.md
index 25b481ed..33773de9 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -7,8 +7,8 @@ Radios allow the user to select a single option from a group.
 Radios are designed to be used with [radio groups](/components/radio-group).
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio name="option" value="1" checked>Option 1</sl-radio>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio name="option" value="1">Option 1</sl-radio>
   <sl-radio name="option" value="2">Option 2</sl-radio>
   <sl-radio name="option" value="3">Option 3</sl-radio>
 </sl-radio-group>
@@ -18,8 +18,8 @@ Radios are designed to be used with [radio groups](/components/radio-group).
 import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadio name="option" value="1" checked>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadio name="option" value="1">
       Option 1
     </SlRadio>
     <SlRadio name="option" value="2">
@@ -41,8 +41,8 @@ const App = () => (
 To set the initial checked state, use the `checked` attribute.
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio name="option" value="1" checked>Option 1</sl-radio>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio name="option" value="1">Option 1</sl-radio>
   <sl-radio name="option" value="2">Option 2</sl-radio>
   <sl-radio name="option" value="3">Option 3</sl-radio>
 </sl-radio-group>
@@ -52,8 +52,8 @@ To set the initial checked state, use the `checked` attribute.
 import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadio name="option" value="1" checked>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadio name="option" value="1">
       Option 1
     </SlRadio>
     <SlRadio name="option" value="2">
@@ -71,8 +71,8 @@ const App = () => (
 Use the `disabled` attribute to disable a radio.
 
 ```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio name="option" value="1" checked>Option 1</sl-radio>
+<sl-radio-group label="Select an option" value="1">
+  <sl-radio name="option" value="1">Option 1</sl-radio>
   <sl-radio name="option" value="2">Option 2</sl-radio>
   <sl-radio name="option" value="3" disabled>Option 3</sl-radio>
 </sl-radio-group>
@@ -82,8 +82,8 @@ Use the `disabled` attribute to disable a radio.
 import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadio name="option" value="1" checked>
+  <SlRadioGroup label="Select an option" value="1">
+    <SlRadio name="option" value="1">
       Option 1
     </SlRadio>
     <SlRadio name="option" value="2">
@@ -96,77 +96,4 @@ const App = () => (
 );
 ```
 
-### Custom Validity
-
-Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
-
-```html preview
-<form class="custom-validity">
-  <sl-radio-group label="Select an option">
-    <sl-radio name="a" value="1" checked>Not me</sl-radio>
-    <sl-radio name="a" value="2">Me neither</sl-radio>
-    <sl-radio name="a" value="3">Choose me</sl-radio>
-  </sl-radio-group>
-  <br />
-  <sl-button type="submit" variant="primary">Submit</sl-button>
-</form>
-<script>
-  const form = document.querySelector('.custom-validity');
-  const radio = form.querySelectorAll('sl-radio')[2];
-  const errorMessage = 'You must choose this option';
-  // Set initial validity as soon as the element is defined
-  customElements.whenDefined('sl-radio').then(() => {
-    radio.setCustomValidity(errorMessage);
-  });
-  // Update validity when a selection is made
-  form.addEventListener('sl-change', () => {
-    const isValid = radio.checked;
-    radio.setCustomValidity(isValid ? '' : errorMessage);
-  });
-  // Handle form submit
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
-  });
-</script>
-```
-
-```jsx react
-import { useEffect, useRef } from 'react';
-import { SlButton, SlIcon, SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
-const App = () => {
-  const radio = useRef(null);
-  const errorMessage = 'You must choose this option';
-  function handleChange(event) {
-    radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
-  }
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-  useEffect(() => {
-    radio.current.setCustomValidity(errorMessage);
-  }, []);
-  return (
-    <form class="custom-validity" onSubmit={handleSubmit}>
-      <SlRadioGroup label="Select an option">
-        <SlRadio name="a" value="1" checked onSlChange={handleChange}>
-          Not me
-        </SlRadio>
-        <SlRadio name="a" value="2" onSlChange={handleChange}>
-          Me neither
-        </SlRadio>
-        <SlRadio ref={radio} name="a" value="3" onSlChange={handleChange}>
-          Choose me
-        </SlRadio>
-      </SlRadioGroup>
-      <br />
-      <SlButton type="submit" variant="primary">
-        Submit
-      </SlButton>
-    </form>
-  );
-};
-```
-
 [component-metadata:sl-radio]