docs(radio-button): add standalone example

Author: metonym

docs/src/pages/components/RadioButton.svx

@@ -11,6 +11,8 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
 
 ## Default
 
+`RadioButton` is intended to be used within a `RadioButtonGroup`. See [Standalone usage](#standalone-usage) for individual usage.
+
 Create a group of radio buttons with a shared name and legend.
 
 <RadioButtonGroup legendText="Storage tier (disk)" name="plan" selected="standard">
@@ -19,6 +21,12 @@ Create a group of radio buttons with a shared name and legend.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
+## Standalone usage
+
+Use `RadioButton` individually with a bindable `checked` prop for simple use cases.
+
+<FileSource src="/framed/RadioButton/RadioButtonStandalone" />
+
 ## Hidden legend
 
 Visually hide the legend while maintaining accessibility.

docs/src/pages/framed/RadioButton/RadioButtonStandalone.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { RadioButton, Button } from "carbon-components-svelte";
+
+  let agreedToTerms = false;
+</script>
+
+<div style:display="flex">
+  <RadioButton
+    bind:checked={agreedToTerms}
+    labelText="I agree to the terms and conditions"
+    name="terms"
+    value="agreed"
+  />
+</div>
+
+<div style:margin="var(--cds-layout-02) 0">
+  <Button
+    size="small"
+    kind="secondary"
+    disabled={!agreedToTerms}
+    on:click={() => (agreedToTerms = !agreedToTerms)}
+  >
+    Reset
+  </Button>
+</div>