diff --git a/docs/docs/native/radio.md b/docs/docs/native/radio.md
index 6dffdea3d..da6640110 100644
--- a/docs/docs/native/radio.md
+++ b/docs/docs/native/radio.md
@@ -9,19 +9,11 @@ elements:
 file: styles/native/radio.css
 ---
 
-<style>
-	label {
-		display: inline-block;
-	}
-
-	label + label {
-		margin-inline-start: var(--wa-space);
-	}
-</style>
-
 ```html {.example}
-<label><input type="radio" name="radio" value="1"> Option 1</label>
-<label><input type="radio" name="radio" value="2"> Option 2</label>
+<div class="wa-cluster">
+  <label><input type="radio" name="radio" value="1"> Option 1</label>
+  <label><input type="radio" name="radio" value="2"> Option 2</label>
+</div>
 ```
 
 ## Examples
@@ -31,9 +23,11 @@ file: styles/native/radio.css
 To set the initial value and checked state, use the `checked` attribute on the corresponding radio.
 
 ```html {.example}
-<label><input type="radio" name="radio" value="1"> Option 1</label>
-<label><input type="radio" name="radio" value="2"> Option 2</label>
-<label><input type="radio" name="radio" value="3" checked> Option 3</label>
+<div class="wa-cluster">
+  <label><input type="radio" name="radio" value="1"> Option 1</label>
+  <label><input type="radio" name="radio" value="2"> Option 2</label>
+  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
+</div>
 ```
 
 ### Disabled
@@ -41,9 +35,11 @@ To set the initial value and checked state, use the `checked` attribute on the c
 Use the `disabled` attribute to disable a radio.
 
 ```html {.example}
-<label><input type="radio" name="radio" value="1"> Option 1</label>
-<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
-<label><input type="radio" name="radio" value="3"> Option 3</label>
+<div class="wa-cluster">
+  <label><input type="radio" name="radio" value="1"> Option 1</label>
+  <label><input type="radio" name="radio" value="2" disabled> Option 2</label>
+  <label><input type="radio" name="radio" value="3"> Option 3</label>
+</div>
 ```
 
 ### Sizes
@@ -52,26 +48,52 @@ Use the [size utilities](/docs/utilities/size) to change the radios' size.
 
 ```html {.example}
 <fieldset class="wa-size-s">
-	 <legend>Small</legend>
-	<label><input type="radio" name="radio" value="1"> Option 1</label>
-	<label><input type="radio" name="radio" value="2"> Option 2</label>
-	<label><input type="radio" name="radio" value="3"> Option 3</label>
+  <legend>Small</legend>
+  <div class="wa-cluster">
+    <label><input type="radio" name="radio" value="1"> Option 1</label>
+    <label><input type="radio" name="radio" value="2"> Option 2</label>
+    <label><input type="radio" name="radio" value="3"> Option 3</label>
+  </div>
 </fieldset>
 
 <br />
 <fieldset class="wa-size-m">
-	 <legend>Medium</legend>
-	<label><input type="radio" name="radio" value="1"> Option 1</label>
-	<label><input type="radio" name="radio" value="2"> Option 2</label>
-	<label><input type="radio" name="radio" value="3"> Option 3</label>
+  <legend>Medium</legend>
+  <div class="wa-cluster">
+    <label><input type="radio" name="radio" value="1"> Option 1</label>
+    <label><input type="radio" name="radio" value="2"> Option 2</label>
+    <label><input type="radio" name="radio" value="3"> Option 3</label>
+  </div>
 </fieldset>
 
 <br />
 
 <fieldset class="wa-size-l">
-	 <legend>Large</legend>
-	<label><input type="radio" name="radio" value="1"> Option 1</label>
-	<label><input type="radio" name="radio" value="2"> Option 2</label>
-	<label><input type="radio" name="radio" value="3"> Option 3</label>
+	<legend>Large</legend>
+  <div class="wa-cluster">
+    <label><input type="radio" name="radio" value="1"> Option 1</label>
+    <label><input type="radio" name="radio" value="2"> Option 2</label>
+    <label><input type="radio" name="radio" value="3"> Option 3</label>
+  </div>
 </fieldset>
 ```
+
+### Orientation
+
+You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience `wa-cluster` and `wa-stack` utilities make this easy.
+
+```html {.example}
+<div class="wa-cluster">
+  <label><input type="radio" name="radio" value="1"> Option 1</label>
+  <label><input type="radio" name="radio" value="2"> Option 2</label>
+  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
+</div>
+```
+
+```html {.example}
+<div class="wa-stack">
+  <label><input type="radio" name="radio" value="1"> Option 1</label>
+  <label><input type="radio" name="radio" value="2"> Option 2</label>
+  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
+</div>
+```
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 47c0809fa..73eff0e59 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -12,6 +12,10 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
+## Next
+
+- Added an orientation example to the native radio docs
+
 ## 3.0.0-alpha.10
 
 - 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.