docs(radio-tile): add reactive examples (#979)

Enabled by #971

docs/src/pages/components/RadioTile.svx

@@ -22,6 +22,16 @@ source: Tile/RadioTile.svelte
   </RadioTile>
 </TileGroup>
 
+### Reactive (one-way binding)
+
+<FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />
+
+### Reactive (two-way binding)
+
+Binding to the `selected` prop is a more concise approach to managing state.
+
+<FileSource src="/framed/RadioTile/RadioTileReactive" />
+
 ### Light variant
 
 <TileGroup legend="Service pricing tiers">

docs/src/pages/framed/RadioTile/RadioTileReactive.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { TileGroup, RadioTile, Button } from "carbon-components-svelte";
+
+  const values = ["Lite plan", "Standard plan", "Plus plan"];
+
+  let selected = values[0];
+</script>
+
+<TileGroup legend="Service pricing tiers" bind:selected>
+  {#each values as value}
+    <RadioTile value="{value}">{value}</RadioTile>
+  {/each}
+</TileGroup>
+
+<div>
+  Selected: <strong>{selected}</strong>
+</div>
+
+<Button
+  size="small"
+  disabled="{selected === values[1]}"
+  on:click="{() => (selected = values[1])}"
+>
+  Set to "{values[1]}"
+</Button>
+
+<style>
+  div {
+    margin: var(--cds-spacing-05) 0;
+  }
+</style>

docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { TileGroup, RadioTile } from "carbon-components-svelte";
+
+  const values = ["Lite plan", "Standard plan", "Plus plan"];
+
+  let selected = values[0];
+</script>
+
+<TileGroup
+  legend="Service pricing tiers"
+  on:select="{({ detail }) => (selected = detail)}"
+>
+  {#each values as value}
+    <RadioTile value="{value}" checked="{selected === value}">{value}</RadioTile
+    >
+  {/each}
+</TileGroup>
+
+<br />
+
+Selected: <strong>{selected}</strong>