diff --git a/docs/docs/native/radio.md b/docs/docs/native/radio.md
index b3c222e58..6649695b3 100644
--- a/docs/docs/native/radio.md
+++ b/docs/docs/native/radio.md
@@ -11,8 +11,8 @@ file: styles/native/radio.css
 
 ```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="a" value="1" checked> Option 1</label>
+  <label><input type="radio" name="a" value="2"> Option 2</label>
 </div>
 ```
 
@@ -24,9 +24,9 @@ To set the initial value and checked state, use the `checked` attribute on the c
 
 ```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>
+  <label><input type="radio" name="b" value="1" checked> Option 1</label>
+  <label><input type="radio" name="b" value="2"> Option 2</label>
+  <label><input type="radio" name="b" value="3"> Option 3</label>
 </div>
 ```
 
@@ -36,9 +36,9 @@ Use the `disabled` attribute to disable a radio.
 
 ```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" disabled> Option 2</label>
-  <label><input type="radio" name="radio" value="3"> Option 3</label>
+  <label><input type="radio" name="c" value="1" checked> Option 1</label>
+  <label><input type="radio" name="c" value="2" disabled> Option 2</label>
+  <label><input type="radio" name="c" value="3"> Option 3</label>
 </div>
 ```
 
@@ -49,26 +49,26 @@ Use the [size utilities](/docs/utilities/size) to change the radios' size.
 ```html {.example}
 <fieldset class="wa-size-s wa-cluster">
   <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>
+  <label><input type="radio" name="d" value="1" checked> Option 1</label>
+  <label><input type="radio" name="d" value="2"> Option 2</label>
+  <label><input type="radio" name="d" value="3"> Option 3</label>
 </fieldset>
 
 <br />
 <fieldset class="wa-size-m wa-cluster">
   <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>
+  <label><input type="radio" name="e" value="1" checked> Option 1</label>
+  <label><input type="radio" name="e" value="2"> Option 2</label>
+  <label><input type="radio" name="e" value="3"> Option 3</label>
 </fieldset>
 
 <br />
 
 <fieldset class="wa-size-l wa-cluster">
 	  <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>
+    <label><input type="radio" name="f" value="1" checked> Option 1</label>
+    <label><input type="radio" name="f" value="2"> Option 2</label>
+    <label><input type="radio" name="f" value="3"> Option 3</label>
 </fieldset>
 ```
 
@@ -78,16 +78,16 @@ You can wrap native radios in a flex container to give them a horizontal or vert
 
 ```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>
+  <label><input type="radio" name="g" value="1" checked> Option 1</label>
+  <label><input type="radio" name="g" value="2"> Option 2</label>
+  <label><input type="radio" name="g" value="3"> 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>
+  <label><input type="radio" name="h" value="1" checked> Option 1</label>
+  <label><input type="radio" name="h" value="2"> Option 2</label>
+  <label><input type="radio" name="h" value="3"> Option 3</label>
 </div>
 ```
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 700ca9040..8ace09e29 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -15,10 +15,11 @@ During the alpha period, things might break! We take breaking changes very serio
 ## Next
 
 - 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparer>` and improved compatibility for non-image content
+- Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `<wa-icon>`
 - Fixed a bug that caused `<wa-radio-group>` to have an undesired margin below it
 - Fixed a bug in `<wa-select>` that caused incorrect spacing of icons
 - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control
-- Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `<wa-icon>`
+- Improved native radio alignment
 
 ## 3.0.0-alpha.12
 
diff --git a/src/styles/native/radio.css b/src/styles/native/radio.css
index dbd67fb55..8715834b6 100644
--- a/src/styles/native/radio.css
+++ b/src/styles/native/radio.css
@@ -10,7 +10,7 @@ label:has(input[type='radio']),
   --box-shadow: none;
   --checked-icon-color: var(--wa-form-control-activated-color);
   --checked-icon-scale: 0.75;
-  --toggle-size: 1lh;
+  --toggle-size: round(1lh, 1px);
 
   color: var(--wa-form-control-value-color);
   display: inline-flex;
@@ -34,10 +34,8 @@ input[type='radio'] {
     background-color: var(--checked-icon-color);
     border-radius: 50%;
     content: '';
-    position: absolute;
-    width: calc(var(--toggle-size) - var(--border-width));
-    height: calc(var(--toggle-size) - var(--border-width));
-    scale: var(--checked-icon-scale);
+    width: round(calc(100% * var(--checked-icon-scale)), 1px);
+    aspect-ratio: 1;
   }
 }