From bc29d9ee0dd6140e4df8ef5c97f62b76f3914c19 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 22 Nov 2020 09:25:05 -0800
Subject: [PATCH] docs(radio-button): add reactive example

---
 docs/src/pages/components/RadioButton.svx     |  6 ++++
 .../ProgrammaticRadioButton.svelte            | 36 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte

diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx
index 189e3ffc..b1aed1ce 100644
--- a/docs/src/pages/components/RadioButton.svx
+++ b/docs/src/pages/components/RadioButton.svx
@@ -17,6 +17,12 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
   </RadioButtonGroup>
 </FormGroup>
 
+### Programmatic usage
+
+Bind the selected value using the `selected` prop.
+
+<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />
+
 ### Label text aligned left
 
 <FormGroup legendText="Storage tier (disk)">
diff --git a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
new file mode 100644
index 00000000..ef014adb
--- /dev/null
+++ b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
@@ -0,0 +1,36 @@
+<script>
+  import {
+    ButtonSet,
+    Button,
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+
+  let plan = "standard";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup bind:selected="{plan}">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+<ButtonSet>
+  {#each ['free', 'standard', 'pro'] as value}
+    <Button
+      on:click="{() => {
+        plan = value;
+      }}"
+    >
+      Select "{value}"
+    </Button>
+  {/each}
+</ButtonSet>
+
+<div style="margin: var(--cds-layout-01) 0">
+  Selected plan:
+  <strong>{plan}</strong>
+</div>