diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx
index 8e2e69fa..ff2d0c68 100644
--- a/docs/src/pages/components/RadioTile.svx
+++ b/docs/src/pages/components/RadioTile.svx
@@ -9,14 +9,14 @@ components: ["TileGroup", "RadioTile"]
 
 ## Default
 
-<TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
+<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
+  <RadioTile value="lite">
     Lite plan
   </RadioTile>
-  <RadioTile value="1">
+  <RadioTile value="standard">
     Standard plan
   </RadioTile>
-  <RadioTile value="2">
+  <RadioTile value="plus">
     Plus plan
   </RadioTile>
 </TileGroup>
@@ -33,28 +33,28 @@ Binding to the `selected` prop is a more concise approach to managing state.
 
 ## Light variant
 
-<TileGroup legend="Service pricing tiers">
-  <RadioTile light value="0" checked>
+<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
+  <RadioTile light value="lite">
     Lite plan
   </RadioTile>
-  <RadioTile light value="1">
+  <RadioTile light value="standard">
     Standard plan
   </RadioTile>
-  <RadioTile light value="2">
+  <RadioTile light value="plus">
     Plus plan
   </RadioTile>
 </TileGroup>
 
 ## Disabled state
 
-<TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
+<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
+  <RadioTile value="lite" disabled>
     Lite plan
   </RadioTile>
-  <RadioTile value="1" disabled>
+  <RadioTile value="standard">
     Standard plan
   </RadioTile>
-  <RadioTile value="2" disabled>
+  <RadioTile value="plus" disabled>
     Plus plan
   </RadioTile>
 </TileGroup>
\ No newline at end of file
diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
index 51c07468..839a9e8e 100644
--- a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
@@ -3,10 +3,10 @@
 
   const values = ["Lite plan", "Standard plan", "Plus plan"];
 
-  let selected = values[0];
+  let selected = values[1];
 </script>
 
-<TileGroup legend="Service pricing tiers" bind:selected>
+<TileGroup legend="Service pricing tiers" name="plan" bind:selected>
   {#each values as value}
     <RadioTile value="{value}">{value}</RadioTile>
   {/each}
diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
index d2b3997a..727ae996 100644
--- a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
@@ -3,16 +3,18 @@
 
   const values = ["Lite plan", "Standard plan", "Plus plan"];
 
-  let selected = values[0];
+  let selected = values[1];
 </script>
 
 <TileGroup
   legend="Service pricing tiers"
+  name="plan"
   on:select="{({ detail }) => (selected = detail)}"
 >
   {#each values as value}
-    <RadioTile value="{value}" checked="{selected === value}">{value}</RadioTile
-    >
+    <RadioTile value="{value}" checked="{selected === value}">
+      {value}
+    </RadioTile>
   {/each}
 </TileGroup>