From f4ade1117489339f5db3485a81d48de290b0d988 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Fri, 13 Mar 2026 11:39:23 -0400
Subject: [PATCH] feat: convert radio demos to the new format

---
 .../code/code-snippets/radio-base.classic.hbs |   6 +
 .../code/code-snippets/radio-base.classic.js} |   7 +-
 .../code/code-snippets/radio-base.gts         |  19 +++
 .../radio-field-items.classic.hbs             |  19 +++
 .../radio-field-items.classic.js              |   9 ++
 .../code/code-snippets/radio-field-items.gts  |  53 +++++++
 .../code-snippets/radio-field.classic.hbs     |   3 +
 .../code/code-snippets/radio-field.classic.js |   9 ++
 .../code/code-snippets/radio-field.gts        |  21 +++
 .../radio-group-basic.classic.hbs             |  15 ++
 .../code/code-snippets/radio-group-basic.gts  |  23 +++
 .../radio-group-extra-content.classic.hbs     |  15 ++
 .../radio-group-extra-content.gts             |  29 ++++
 .../radio-group-indicators.classic.hbs        |  19 +++
 .../code-snippets/radio-group-indicators.gts  |  42 +++++
 .../radio-group-layout.classic.hbs            |  37 +++++
 .../code/code-snippets/radio-group-layout.gts |  48 ++++++
 .../radio-group-validation.classic.hbs        |  16 ++
 .../code-snippets/radio-group-validation.gts  |  24 +++
 .../form/radio/partials/code/how-to-use.md    | 148 +-----------------
 20 files changed, 416 insertions(+), 146 deletions(-)
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.hbs
 rename website/docs/components/form/radio/{index.js => partials/code/code-snippets/radio-base.classic.js} (58%)
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-base.gts
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.hbs
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.js
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.gts
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.hbs
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.js
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-field.gts
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.classic.hbs
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.gts
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.classic.hbs
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.gts
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.classic.hbs
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.gts
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.classic.hbs
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.gts
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.classic.hbs
 create mode 100644 website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.gts

diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.hbs
new file mode 100644
index 00000000000..831d0876411
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.hbs
@@ -0,0 +1,6 @@
+<Hds::Form::Radio::Base
+  name="data-center-radio2"
+  aria-label="San Francisco datacenter number 1"
+  @value="SF1"
+  {{on "change" this.yourOnChangeFunction}}
+/>
\ No newline at end of file
diff --git a/website/docs/components/form/radio/index.js b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.js
similarity index 58%
rename from website/docs/components/form/radio/index.js
rename to website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.js
index f41dedd5b4f..80ee157774a 100644
--- a/website/docs/components/form/radio/index.js
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.classic.js
@@ -1,12 +1,7 @@
-/**
- * Copyright IBM Corp. 2021, 2025
- * SPDX-License-Identifier: MPL-2.0
- */
-
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-export default class Index extends Component {
+export default class LocalComponent extends Component {
   @action
   yourOnChangeFunction() {
     console.log('Invoked "yourOnChangeFunction"');
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-base.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.gts
new file mode 100644
index 00000000000..431a8be531a
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-base.gts
@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+
+import { HdsFormRadioBase } from '@hashicorp/design-system-components/components';
+
+export default class LocalComponent extends Component {
+  yourOnChangeFunction = () => {
+    console.log('Invoked "yourOnChangeFunction"');
+  };
+
+  <template>
+    <HdsFormRadioBase
+      name="data-center-radio2"
+      aria-label="San Francisco datacenter number 1"
+      @value="SF1"
+      {{on "change" this.yourOnChangeFunction}}
+    />
+  </template>
+}
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.hbs
new file mode 100644
index 00000000000..fddd4c57a3f
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.hbs
@@ -0,0 +1,19 @@
+<Hds::Form::Radio::Group @layout="vertical" @name="datacenter-demo5" as |G|>
+  <G.Legend>Choose datacenter</G.Legend>
+  <G.RadioField @id="datacenter-NYC1" checked @value="NYC1" {{on "change" this.yourOnChangeFunction}} as |F|>
+    <F.Label>NYC1</F.Label>
+    <F.HelperText>CoreSite- 32 Avenue of the Americas</F.HelperText>
+  </G.RadioField>
+  <G.RadioField @id="datacenter-DC1" @value="DC1" {{on "change" this.yourOnChangeFunction}} as |F|>
+    <F.Label>DC1</F.Label>
+    <F.HelperText>CoreSite- K Street</F.HelperText>
+  </G.RadioField>
+  <G.RadioField @id="datacenter-NYC2" @value="NYC2" {{on "change" this.yourOnChangeFunction}} as |F|>
+    <F.Label>NYC1</F.Label>
+    <F.HelperText>H5 Data Center - 325 Hudson Street</F.HelperText>
+  </G.RadioField>
+  <G.RadioField @id="datacenter-SF1" @value="SF1" {{on "change" this.yourOnChangeFunction}} as |F|>
+    <F.Label>SF1</F.Label>
+    <F.HelperText>INAP - 650 Townsend Street</F.HelperText>
+  </G.RadioField>
+</Hds::Form::Radio::Group>
\ No newline at end of file
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.js b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.js
new file mode 100644
index 00000000000..80ee157774a
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.classic.js
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class LocalComponent extends Component {
+  @action
+  yourOnChangeFunction() {
+    console.log('Invoked "yourOnChangeFunction"');
+  }
+}
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.gts
new file mode 100644
index 00000000000..c0dd26697d0
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field-items.gts
@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+
+import { HdsFormRadioGroup } from '@hashicorp/design-system-components/components';
+
+export default class LocalComponent extends Component {
+  yourOnChangeFunction = () => {
+    console.log('Invoked "yourOnChangeFunction"');
+  };
+
+  <template>
+    <HdsFormRadioGroup @layout="vertical" @name="datacenter-demo5" as |G|>
+      <G.Legend>Choose datacenter</G.Legend>
+      <G.RadioField
+        @id="datacenter-NYC1"
+        checked
+        @value="NYC1"
+        {{on "change" this.yourOnChangeFunction}}
+        as |F|
+      >
+        <F.Label>NYC1</F.Label>
+        <F.HelperText>CoreSite- 32 Avenue of the Americas</F.HelperText>
+      </G.RadioField>
+      <G.RadioField
+        @id="datacenter-DC1"
+        @value="DC1"
+        {{on "change" this.yourOnChangeFunction}}
+        as |F|
+      >
+        <F.Label>DC1</F.Label>
+        <F.HelperText>CoreSite- K Street</F.HelperText>
+      </G.RadioField>
+      <G.RadioField
+        @id="datacenter-NYC2"
+        @value="NYC2"
+        {{on "change" this.yourOnChangeFunction}}
+        as |F|
+      >
+        <F.Label>NYC1</F.Label>
+        <F.HelperText>H5 Data Center - 325 Hudson Street</F.HelperText>
+      </G.RadioField>
+      <G.RadioField
+        @id="datacenter-SF1"
+        @value="SF1"
+        {{on "change" this.yourOnChangeFunction}}
+        as |F|
+      >
+        <F.Label>SF1</F.Label>
+        <F.HelperText>INAP - 650 Townsend Street</F.HelperText>
+      </G.RadioField>
+    </HdsFormRadioGroup>
+  </template>
+}
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.hbs
new file mode 100644
index 00000000000..c908f59445d
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.hbs
@@ -0,0 +1,3 @@
+<Hds::Form::Radio::Field name="data-center-radio" @value="SF1" {{on "change" this.yourOnChangeFunction}} as |F|>
+  <F.Label>SF1</F.Label>
+</Hds::Form::Radio::Field>
\ No newline at end of file
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.js b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.js
new file mode 100644
index 00000000000..80ee157774a
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.classic.js
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class LocalComponent extends Component {
+  @action
+  yourOnChangeFunction() {
+    console.log('Invoked "yourOnChangeFunction"');
+  }
+}
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-field.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.gts
new file mode 100644
index 00000000000..a6d04e47ed5
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-field.gts
@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+
+import { HdsFormRadioField } from '@hashicorp/design-system-components/components';
+
+export default class LocalComponent extends Component {
+  yourOnChangeFunction = () => {
+    console.log('Invoked "yourOnChangeFunction"');
+  };
+
+  <template>
+    <HdsFormRadioField
+      name="data-center-radio"
+      @value="SF1"
+      {{on "change" this.yourOnChangeFunction}}
+      as |F|
+    >
+      <F.Label>SF1</F.Label>
+    </HdsFormRadioField>
+  </template>
+}
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.classic.hbs
new file mode 100644
index 00000000000..d574407c8fe
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.classic.hbs
@@ -0,0 +1,15 @@
+<Hds::Form::Radio::Group @name="datacenter-demo1" as |G|>
+  <G.Legend>Choose datacenter</G.Legend>
+  <G.RadioField as |F|>
+    <F.Label>NYC1</F.Label>
+  </G.RadioField>
+  <G.RadioField as |F|>
+    <F.Label>DC1</F.Label>
+  </G.RadioField>
+  <G.RadioField as |F|>
+    <F.Label>NYC2</F.Label>
+  </G.RadioField>
+  <G.RadioField as |F|>
+    <F.Label>SF1</F.Label>
+  </G.RadioField>
+</Hds::Form::Radio::Group>
\ No newline at end of file
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.gts
new file mode 100644
index 00000000000..a7b0908e52f
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-basic.gts
@@ -0,0 +1,23 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsFormRadioGroup } from '@hashicorp/design-system-components/components';
+
+const LocalComponent: TemplateOnlyComponent = <template>
+  <HdsFormRadioGroup @name="datacenter-demo1" as |G|>
+    <G.Legend>Choose datacenter</G.Legend>
+    <G.RadioField as |F|>
+      <F.Label>NYC1</F.Label>
+    </G.RadioField>
+    <G.RadioField as |F|>
+      <F.Label>DC1</F.Label>
+    </G.RadioField>
+    <G.RadioField as |F|>
+      <F.Label>NYC2</F.Label>
+    </G.RadioField>
+    <G.RadioField as |F|>
+      <F.Label>SF1</F.Label>
+    </G.RadioField>
+  </HdsFormRadioGroup>
+</template>;
+
+export default LocalComponent;
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.classic.hbs
new file mode 100644
index 00000000000..c34877ab460
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.classic.hbs
@@ -0,0 +1,15 @@
+<Hds::Form::Radio::Group @layout="horizontal" @name="method-demo1" as |G|>
+  <G.Legend>Method <Hds::Badge @size="small" @text="Beta" @color="highlight" /></G.Legend>
+  <G.HelperText>Choose which HTTP method to use for the communication channel. See
+    <Hds::Link::Inline @href="#">HTTP protocol</Hds::Link::Inline>
+    for more details.</G.HelperText>
+  <G.RadioField as |F|>
+    <F.Label>POST</F.Label>
+  </G.RadioField>
+  <G.RadioField as |F|>
+    <F.Label>GET</F.Label>
+  </G.RadioField>
+  <G.RadioField as |F|>
+    <F.Label>PUT</F.Label>
+  </G.RadioField>
+</Hds::Form::Radio::Group>
\ No newline at end of file
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.gts
new file mode 100644
index 00000000000..b42f2e31c5e
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-extra-content.gts
@@ -0,0 +1,29 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import {
+  HdsFormRadioGroup,
+  HdsBadge,
+  HdsLinkInline,
+} from '@hashicorp/design-system-components/components';
+
+const LocalComponent: TemplateOnlyComponent = <template>
+  <HdsFormRadioGroup @layout="horizontal" @name="method-demo1" as |G|>
+    <G.Legend>Method
+      <HdsBadge @size="small" @text="Beta" @color="highlight" /></G.Legend>
+    <G.HelperText>Choose which HTTP method to use for the communication channel.
+      See
+      <HdsLinkInline @href="#">HTTP protocol</HdsLinkInline>
+      for more details.</G.HelperText>
+    <G.RadioField as |F|>
+      <F.Label>POST</F.Label>
+    </G.RadioField>
+    <G.RadioField as |F|>
+      <F.Label>GET</F.Label>
+    </G.RadioField>
+    <G.RadioField as |F|>
+      <F.Label>PUT</F.Label>
+    </G.RadioField>
+  </HdsFormRadioGroup>
+</template>;
+
+export default LocalComponent;
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.classic.hbs
new file mode 100644
index 00000000000..1b2a55b08e9
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.classic.hbs
@@ -0,0 +1,19 @@
+<Hds::Form as |FORM|>
+  <FORM.Section>
+    <Hds::Form::Radio::Group @isRequired={{true}} @layout="horizontal" @name="method-demo2" as |G|>
+      <G.Legend>Method</G.Legend>
+      <G.HelperText>Choose which HTTP method to use for the communication channel.</G.HelperText>
+      <G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
+      <G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
+      <G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
+    </Hds::Form::Radio::Group>
+
+    <Hds::Form::Radio::Group @isOptional={{true}} @layout="horizontal" @name="method-demo3" as |G|>
+      <G.Legend>Method</G.Legend>
+      <G.HelperText>Choose which HTTP method to use for the communication channel.</G.HelperText>
+      <G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
+      <G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
+      <G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
+    </Hds::Form::Radio::Group>
+  </FORM.Section>
+</Hds::Form>
\ No newline at end of file
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.gts
new file mode 100644
index 00000000000..7e8fff3f166
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-indicators.gts
@@ -0,0 +1,42 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import {
+  HdsFormRadioGroup,
+  HdsForm,
+} from '@hashicorp/design-system-components/components';
+
+const LocalComponent: TemplateOnlyComponent = <template>
+  <HdsForm as |FORM|>
+    <FORM.Section>
+      <HdsFormRadioGroup
+        @isRequired={{true}}
+        @layout="horizontal"
+        @name="method-demo2"
+        as |G|
+      >
+        <G.Legend>Method</G.Legend>
+        <G.HelperText>Choose which HTTP method to use for the communication
+          channel.</G.HelperText>
+        <G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
+        <G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
+        <G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
+      </HdsFormRadioGroup>
+
+      <HdsFormRadioGroup
+        @isOptional={{true}}
+        @layout="horizontal"
+        @name="method-demo3"
+        as |G|
+      >
+        <G.Legend>Method</G.Legend>
+        <G.HelperText>Choose which HTTP method to use for the communication
+          channel.</G.HelperText>
+        <G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
+        <G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
+        <G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
+      </HdsFormRadioGroup>
+    </FORM.Section>
+  </HdsForm>
+</template>;
+
+export default LocalComponent;
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.classic.hbs
new file mode 100644
index 00000000000..db439995352
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.classic.hbs
@@ -0,0 +1,37 @@
+<Hds::Form as |FORM|>
+  <FORM.Section>
+    <Hds::Form::Radio::Group @name="datacenter-demo2" as |G|>
+      <G.Legend>Choose datacenter</G.Legend>
+      <G.RadioField as |F|>
+        <F.Label>NYC1</F.Label>
+      </G.RadioField>
+      <G.RadioField as |F|>
+        <F.Label>DC1</F.Label>
+      </G.RadioField>
+      <G.RadioField as |F|>
+        <F.Label>NYC2</F.Label>
+      </G.RadioField>
+      <G.RadioField as |F|>
+        <F.Label>SF1</F.Label>
+      </G.RadioField>
+    </Hds::Form::Radio::Group>
+  </FORM.Section>
+
+  <FORM.Section>
+    <Hds::Form::Radio::Group @layout="horizontal" @name="datacenter-demo3" as |G|>
+      <G.Legend>Choose datacenter</G.Legend>
+      <G.RadioField as |F|>
+        <F.Label>NYC1</F.Label>
+      </G.RadioField>
+      <G.RadioField as |F|>
+        <F.Label>DC1</F.Label>
+      </G.RadioField>
+      <G.RadioField as |F|>
+        <F.Label>NYC2</F.Label>
+      </G.RadioField>
+      <G.RadioField as |F|>
+        <F.Label>SF1</F.Label>
+      </G.RadioField>
+    </Hds::Form::Radio::Group>
+  </FORM.Section>
+</Hds::Form>
\ No newline at end of file
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.gts
new file mode 100644
index 00000000000..1acd3c6e9e9
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-layout.gts
@@ -0,0 +1,48 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import {
+  HdsFormRadioGroup,
+  HdsForm,
+} from '@hashicorp/design-system-components/components';
+
+const LocalComponent: TemplateOnlyComponent = <template>
+  <HdsForm as |FORM|>
+    <FORM.Section>
+      <HdsFormRadioGroup @name="datacenter-demo2" as |G|>
+        <G.Legend>Choose datacenter</G.Legend>
+        <G.RadioField as |F|>
+          <F.Label>NYC1</F.Label>
+        </G.RadioField>
+        <G.RadioField as |F|>
+          <F.Label>DC1</F.Label>
+        </G.RadioField>
+        <G.RadioField as |F|>
+          <F.Label>NYC2</F.Label>
+        </G.RadioField>
+        <G.RadioField as |F|>
+          <F.Label>SF1</F.Label>
+        </G.RadioField>
+      </HdsFormRadioGroup>
+    </FORM.Section>
+
+    <FORM.Section>
+      <HdsFormRadioGroup @layout="horizontal" @name="datacenter-demo3" as |G|>
+        <G.Legend>Choose datacenter</G.Legend>
+        <G.RadioField as |F|>
+          <F.Label>NYC1</F.Label>
+        </G.RadioField>
+        <G.RadioField as |F|>
+          <F.Label>DC1</F.Label>
+        </G.RadioField>
+        <G.RadioField as |F|>
+          <F.Label>NYC2</F.Label>
+        </G.RadioField>
+        <G.RadioField as |F|>
+          <F.Label>SF1</F.Label>
+        </G.RadioField>
+      </HdsFormRadioGroup>
+    </FORM.Section>
+  </HdsForm>
+</template>;
+
+export default LocalComponent;
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.classic.hbs b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.classic.hbs
new file mode 100644
index 00000000000..57b9a4f2695
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.classic.hbs
@@ -0,0 +1,16 @@
+<Hds::Form::Radio::Group @layout="horizontal" @name="datacenter-demo4" as |G|>
+  <G.Legend>Choose datacenter</G.Legend>
+  <G.RadioField as |F|>
+    <F.Label>NYC1</F.Label>
+  </G.RadioField>
+  <G.RadioField as |F|>
+    <F.Label>DC1</F.Label>
+  </G.RadioField>
+  <G.RadioField as |F|>
+    <F.Label>NYC2</F.Label>
+  </G.RadioField>
+  <G.RadioField as |F|>
+    <F.Label>SF1</F.Label>
+  </G.RadioField>
+  <G.Error>Error: you need to choose one datacenter.</G.Error>
+</Hds::Form::Radio::Group>
\ No newline at end of file
diff --git a/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.gts b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.gts
new file mode 100644
index 00000000000..ee72be2e265
--- /dev/null
+++ b/website/docs/components/form/radio/partials/code/code-snippets/radio-group-validation.gts
@@ -0,0 +1,24 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsFormRadioGroup } from '@hashicorp/design-system-components/components';
+
+const LocalComponent: TemplateOnlyComponent = <template>
+  <HdsFormRadioGroup @layout="horizontal" @name="datacenter-demo4" as |G|>
+    <G.Legend>Choose datacenter</G.Legend>
+    <G.RadioField as |F|>
+      <F.Label>NYC1</F.Label>
+    </G.RadioField>
+    <G.RadioField as |F|>
+      <F.Label>DC1</F.Label>
+    </G.RadioField>
+    <G.RadioField as |F|>
+      <F.Label>NYC2</F.Label>
+    </G.RadioField>
+    <G.RadioField as |F|>
+      <F.Label>SF1</F.Label>
+    </G.RadioField>
+    <G.Error>Error: you need to choose one datacenter.</G.Error>
+  </HdsFormRadioGroup>
+</template>;
+
+export default LocalComponent;
diff --git a/website/docs/components/form/radio/partials/code/how-to-use.md b/website/docs/components/form/radio/partials/code/how-to-use.md
index 9afb0f99950..de6f6531486 100644
--- a/website/docs/components/form/radio/partials/code/how-to-use.md
+++ b/website/docs/components/form/radio/partials/code/how-to-use.md
@@ -18,63 +18,13 @@ The basic invocation creates:
 
 The `@name` argument offers an easy way to provide the same name for all the Radio controls in a single place.
 
-```handlebars
-<Hds::Form::Radio::Group @name="datacenter-demo1" as |G|>
-  <G.Legend>Choose datacenter</G.Legend>
-  <G.RadioField as |F|>
-    <F.Label>NYC1</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>DC1</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>NYC2</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>SF1</F.Label>
-  </G.RadioField>
-</Hds::Form::Radio::Group>
-```
+[[code-snippets/radio-group-basic]]
 
 #### Layout
 
 To better fit your spacing requirements, choose between two different layout orientations: `vertical` or `horizontal`.
 
-```handlebars
-<Hds::Form::Radio::Group @name="datacenter-demo2" as |G|>
-  <G.Legend>Choose datacenter</G.Legend>
-  <G.RadioField as |F|>
-    <F.Label>NYC1</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>DC1</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>NYC2</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>SF1</F.Label>
-  </G.RadioField>
-</Hds::Form::Radio::Group>
-```
-
-```handlebars
-<Hds::Form::Radio::Group @layout="horizontal" @name="datacenter-demo3" as |G|>
-  <G.Legend>Choose datacenter</G.Legend>
-  <G.RadioField as |F|>
-    <F.Label>NYC1</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>DC1</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>NYC2</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>SF1</F.Label>
-  </G.RadioField>
-</Hds::Form::Radio::Group>
-```
+[[code-snippets/radio-group-layout]]
 
 #### Extra content in legend and helper text
 
@@ -89,96 +39,25 @@ The `Legend` and `HelperText` contextual components used in the Group yield thei
 
 When helper text is added, the component automatically adds an `aria-describedby` attribute to the `fieldset`, associating it with the automatically generated `ID`.
 
-```handlebars
-<Hds::Form::Radio::Group @layout="horizontal" @name="method-demo1" as |G|>
-  <G.Legend>Method <Hds::Badge @size="small" @text="Beta" @color="highlight" /></G.Legend>
-  <G.HelperText>Choose which HTTP method to use for the communication channel. See <Hds::Link::Inline @href="#">HTTP protocol</Hds::Link::Inline> for more details.</G.HelperText>
-  <G.RadioField as |F|>
-    <F.Label>POST</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>GET</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>PUT</F.Label>
-  </G.RadioField>
-</Hds::Form::Radio::Group>
-```
+[[code-snippets/radio-group-extra-content]]
 
 #### Required vs. optional
 
 Use the `@isRequired` and `@isOptional` arguments to add a visual indication that the field is “required” or “optional”.
 
-```handlebars
-<Hds::Form as |FORM|>
-  <FORM.Section>
-    <Hds::Form::Radio::Group @isRequired={{true}} @layout="horizontal" @name="method-demo2" as |G|>
-      <G.Legend>Method</G.Legend>
-      <G.HelperText>Choose which HTTP method to use for the communication channel.</G.HelperText>
-      <G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
-      <G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
-      <G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
-    </Hds::Form::Radio::Group>
-
-    <Hds::Form::Radio::Group @isOptional={{true}} @layout="horizontal" @name="method-demo3" as |G|>
-      <G.Legend>Method</G.Legend>
-      <G.HelperText>Choose which HTTP method to use for the communication channel.</G.HelperText>
-      <G.RadioField as |F|><F.Label>POST</F.Label></G.RadioField>
-      <G.RadioField as |F|><F.Label>GET</F.Label></G.RadioField>
-      <G.RadioField as |F|><F.Label>PUT</F.Label></G.RadioField>
-    </Hds::Form::Radio::Group>
-  </FORM.Section>
-</Hds::Form>
-```
+[[code-snippets/radio-group-indicators]]
 
 #### Validation
 
 To indicate a field is invalid, provide an error message using the `Error` contextual component.
 
-```handlebars
-<Hds::Form::Radio::Group @layout="horizontal" @name="datacenter-demo4" as |G|>
-  <G.Legend>Choose datacenter</G.Legend>
-  <G.RadioField as |F|>
-    <F.Label>NYC1</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>DC1</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>NYC2</F.Label>
-  </G.RadioField>
-  <G.RadioField as |F|>
-    <F.Label>SF1</F.Label>
-  </G.RadioField>
-  <G.Error>Error: you need to choose one datacenter.</G.Error>
-</Hds::Form::Radio::Group>
-```
+[[code-snippets/radio-group-validation]]
 
 #### Field items
 
 A group of Radios is made of one or more `Form::Radio::Field` components. All the arguments, attributes, and modifiers that can be passed to `Form::Radio::Field` can be passed to the same items in the Group declaration.
 
-```handlebars
-<Hds::Form::Radio::Group @layout="vertical" @name="datacenter-demo5" as |G|>
-  <G.Legend>Choose datacenter</G.Legend>
-  <G.RadioField @id="datacenter-NYC1" checked @value="NYC1" {{on "change" this.yourOnChangeFunction}} as |F|>
-    <F.Label>NYC1</F.Label>
-    <F.HelperText>CoreSite- 32 Avenue of the Americas</F.HelperText>
-  </G.RadioField>
-  <G.RadioField @id="datacenter-DC1" @value="DC1" {{on "change" this.yourOnChangeFunction}} as |F|>
-    <F.Label>DC1</F.Label>
-    <F.HelperText>CoreSite- K Street</F.HelperText>
-  </G.RadioField>
-  <G.RadioField @id="datacenter-NYC2" @value="NYC2" {{on "change" this.yourOnChangeFunction}} as |F|>
-    <F.Label>NYC1</F.Label>
-    <F.HelperText>H5 Data Center - 325 Hudson Street</F.HelperText>
-  </G.RadioField>
-  <G.RadioField @id="datacenter-SF1" @value="SF1" {{on "change" this.yourOnChangeFunction}} as |F|>
-    <F.Label>SF1</F.Label>
-    <F.HelperText>INAP - 650 Townsend Street</F.HelperText>
-  </G.RadioField>
-</Hds::Form::Radio::Group>
-```
+[[code-snippets/radio-field-items]]
 
 {{! ========================= }} {{! ===== BASE + FIELD ===== }} {{! ========================= }}
 
@@ -198,19 +77,8 @@ The basic invocation for a Field component creates:
 - a `<label>` element with a `for` attribute automatically associated with the input `ID` attribute.
 - a `<input type="radio">` control with an automatically generated `ID` attribute.
 
-```handlebars
-<Hds::Form::Radio::Field name="data-center-radio" @value="SF1" {{on "change" this.yourOnChangeFunction}} as |F|>
-  <F.Label>SF1</F.Label>
-</Hds::Form::Radio::Field>
-```
+[[code-snippets/radio-field]]
 
 The basic invocation for a Base component creates an `<input type="radio">` control with an automatically generated `ID` attribute.
 
-```handlebars
-<Hds::Form::Radio::Base
-  name="data-center-radio2"
-  aria-label="San Francisco datacenter number 1"
-  @value="SF1"
-  {{on "change" this.yourOnChangeFunction}}
-/>
-```
+[[code-snippets/radio-base]]