From 3ed7481c73c3ea3a721ecdfc13d104df920e6ffe Mon Sep 17 00:00:00 2001
From: b2 <brendan@mobilewebsmart.com>
Date: Mon, 7 Jul 2025 14:39:03 -0600
Subject: [PATCH] fix(#2845): reveal removed in checkbox lts and radio lts

---
 src/examples/checkbox/CheckboxExamples.tsx    |  19 +-
 .../checkbox/CheckboxRevealSlotExample.tsx    | 266 ++++++------------
 src/examples/radio/RadioExamples.tsx          |  20 +-
 src/examples/radio/RadioRevealSlotExample.tsx | 234 ++++++---------
 src/routes/components/Checkbox.tsx            |  16 +-
 src/routes/components/Radio.tsx               |   3 +-
 6 files changed, 199 insertions(+), 359 deletions(-)

diff --git a/src/examples/checkbox/CheckboxExamples.tsx b/src/examples/checkbox/CheckboxExamples.tsx
index 925016662..6955de48e 100644
--- a/src/examples/checkbox/CheckboxExamples.tsx
+++ b/src/examples/checkbox/CheckboxExamples.tsx
@@ -3,8 +3,11 @@ import IncludeDescriptionsForItemsInACheckboxList
 import SelectOneOrMoreFromAListOfOptions from "@examples/select-one-or-more-from-a-list-of-options.tsx";
 import { CheckboxRevealSlotExample } from "@examples/checkbox/CheckboxRevealSlotExample.tsx";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 export const CheckboxExamples = () => {
+  const { version } = useContext(LanguageVersionContext);
   return <>
     {/*Checkbox example 1*/}
     <SandboxHeader
@@ -20,11 +23,15 @@ export const CheckboxExamples = () => {
     </SandboxHeader>
     <SelectOneOrMoreFromAListOfOptions />
 
-    {/*Checkbox example 3 - NEW from alpha*/}
-    <SandboxHeader
-      exampleTitle="Reveal input based on selection"
-      figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
-    </SandboxHeader>
-    <CheckboxRevealSlotExample />
+    {version === "new" && (
+      <>
+        {/*Checkbox example 3 - NEW from alpha*/}
+        <SandboxHeader
+          exampleTitle="Reveal input based on selection"
+          figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
+        </SandboxHeader>
+        <CheckboxRevealSlotExample/>
+      </>
+    )}
   </>;
 }
\ No newline at end of file
diff --git a/src/examples/checkbox/CheckboxRevealSlotExample.tsx b/src/examples/checkbox/CheckboxRevealSlotExample.tsx
index f8b4c1e69..6b6458126 100644
--- a/src/examples/checkbox/CheckboxRevealSlotExample.tsx
+++ b/src/examples/checkbox/CheckboxRevealSlotExample.tsx
@@ -1,184 +1,104 @@
-import { GoabCheckbox, GoabFormItem, GoabInput, GoabSpacer } from "@abgov/react-components";
+import { GoabCheckbox, GoabFormItem, GoabInput } from "@abgov/react-components";
 import { Sandbox } from "@components/sandbox";
-import { useContext } from "react";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx";
 
 export const CheckboxRevealSlotExample = () => {
-  const { version, language } = useContext(LanguageVersionContext);
   return (
     <>
       {/*Skip rendering because we use reveal that isn't supported by sandbox*/}
       <Sandbox fullWidth skipRender>
         {/*Angular*/}
-        {version === "old" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-              <goa-form-item label="How would you like to be contacted?">
-                <goa-checkbox name="optionOne" text="Email" value="email" [checked]="optionOneChecked" (_change)="updateContactMethod($event)">
-                  <div slot="reveal">
-                    <goa-form-item label="Email address">
-                      <goa-input name="email" [value]="emailAddress" (_change)="updateEmailAddress($event)"></goa-input>
-                    </goa-form-item>
-                  </div>
-                </goa-checkbox>
-                <goa-checkbox name="optionTwo" text="Phone" value="phone" [checked]="optionTwoChecked" (_change)="updateContactMethod($event)">
-                  <div slot="reveal">
-                    <goa-form-item label="Phone number">
-                        <goa-input name="phone" [value]="phoneNumber" (_change)="updatePhoneNumber($event)"></goa-input>
-                    </goa-form-item>
-                  </div>
-                </goa-checkbox>
-                <goa-checkbox name="optionThree" text="Text message" value="text" [checked]="optionThreeChecked" (_change)="updateContactMethod($event)">
-                    <div slot="reveal">
-                      <goa-form-item label="Mobile phone number">
-                        <goa-input name="phone" [value]="phoneNumber" (_change)="updatePhoneNumber($event)"></goa-input>
-                      </goa-form-item>
-                    </div>
-                </goa-checkbox>
-              </goa-form-item>
-            `}
-          />
-        )}
-
-        {version === "old" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-        export class ExampleComponent {
-          phoneNumber = "";
-          emailAddress = "";
-          optionOneChecked = false;
-          optionTwoChecked = false;
-          optionThreeChecked = false;
-
-          updateContactMethod(event: any) {
-            const value = (event as CustomEvent).detail.value;
-            if (value === "email") {
-              this.optionOneChecked = true;
-            }
-            if (value === "phone") {
-              this.optionTwoChecked = true;
-            }
-            if (value === "text") {
-              this.optionThreeChecked = true;
-            }
-          }
-          updatePhoneNumber(event: any) {
-            this.phoneNumber = (event as CustomEvent).detail.value;
-          }
-          updateEmailAddress(event: any) {
-            this.emailAddress = (event as CustomEvent).detail.value;
-          }
-        }
-     `}
-          />
-        )}
-
-        {/*Angular*/}
-        {version === "new" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-              <goab-form-item [formGroup]="form" label="How would you like to be contacted?">
-                <goab-checkbox formControlName="emailContactMethod" text="Email" [reveal]="emailReveal">
-                  <ng-template #emailReveal>
-                    <goab-form-item label="Email address">
-                      <goab-input name="email" formControlName="emailAddress"></goab-input>
-                    </goab-form-item>
-                  </ng-template>
-                </goab-checkbox>
-                <goab-checkbox formControlName="phoneContactMethod" text="Phone" [reveal]="phoneNumberReveal">
-                  <ng-template #phoneNumberReveal>
-                    <goab-form-item label="Phone number">
-                      <goab-input name="phone" formControlName="phoneNumber"></goab-input>
-                    </goab-form-item>
-                  </ng-template>
-                </goab-checkbox>
-                <goab-checkbox formControlName="textContactMethod" text="Text message" [reveal]="textContactMethodReveal">
-                  <ng-template #textContactMethodReveal>
-                    <goab-form-item label="Mobile phone number">
-                      <goab-input name="phone" formControlName="phoneNumber"></goab-input>
-                    </goab-form-item>
-                  </ng-template>
-                </goab-checkbox>
-              </goab-form-item>
-            `}
-          />
-        )}
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+<goab-form-item [formGroup]="form" label="How would you like to be contacted?">
+  <goab-checkbox formControlName="emailContactMethod" text="Email" [reveal]="emailReveal">
+    <ng-template #emailReveal>
+      <goab-form-item label="Email address">
+        <goab-input name="email" formControlName="emailAddress"></goab-input>
+      </goab-form-item>
+    </ng-template>
+  </goab-checkbox>
+  <goab-checkbox formControlName="phoneContactMethod" text="Phone" [reveal]="phoneNumberReveal">
+    <ng-template #phoneNumberReveal>
+      <goab-form-item label="Phone number">
+        <goab-input name="phone" formControlName="phoneNumber"></goab-input>
+      </goab-form-item>
+    </ng-template>
+  </goab-checkbox>
+  <goab-checkbox formControlName="textContactMethod" text="Text message" [reveal]="textContactMethodReveal">
+    <ng-template #textContactMethodReveal>
+      <goab-form-item label="Mobile phone number">
+        <goab-input name="phone" formControlName="phoneNumber"></goab-input>
+      </goab-form-item>
+    </ng-template>
+  </goab-checkbox>
+</goab-form-item>
+          `}
+        />
 
-        {version === "new" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-        export class ExampleComponent {
-          form!: FormGroup;
-          constructor(private fb: FormBuilder) {
-            this.form = this.fb.group({
-            emailContactMethod: [false],
-            phoneContactMethod: [false],
-            textContactMethod: [false],
-            emailAddress: [""],
-            phoneNumber: [""],
-          });
-        }
-        }
-     `}
-          />
-        )}
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+export class ExampleComponent {
+  form!: FormGroup;
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      emailContactMethod: [false],
+      phoneContactMethod: [false],
+      textContactMethod: [false],
+      emailAddress: [""],
+      phoneNumber: [""],
+    });
+  }
+}
+          `}
+        />
 
         {/*React*/}
-        {version === "new" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="react"
-            allowCopy={true}
-            code={`
-             <GoabFormItem label="How would you like to be contacted?">
-                <GoabCheckbox
-                  checked={false}
-                  name="optionOne"
-                  text="Email"
-                  reveal={
-                    <GoabFormItem label="Email address">
-                      <GoabInput name="email" onChange={(e) =>  {/** do nothing */}} value="" />
-                    </GoabFormItem>
-                  }
-                />
-                <GoabCheckbox
-                  checked={false}
-                  name="optionTwo"
-                  text="Phone"
-                  reveal={
-                    <GoabFormItem label="Phone number">
-                      <GoabInput name="phoneNumber" onChange={(e) => {/** do nothing */}} value="" />
-                    </GoabFormItem>
-                  }
-                />
-                <GoabCheckbox
-                  checked={false}
-                  name="optionThree"
-                  text="Text message"
-                  reveal={
-                    <GoabFormItem label="Mobile phone number">
-                      <GoabInput name="mobilePhoneNumber" onChange={(e) =>  {/** do nothing */}} value="" />
-                    </GoabFormItem>
-                  }
-                />
-              </GoabFormItem>
-            `}
-          />
-        )}
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+<GoabFormItem label="How would you like to be contacted?">
+  <GoabCheckbox
+    checked={false}
+    name="optionOne"
+    text="Email"
+    reveal={
+      <GoabFormItem label="Email address">
+        <GoabInput name="email" onChange={(e) =>  {/** do nothing */}} value="" />
+      </GoabFormItem>
+    }
+  />
+  <GoabCheckbox
+    checked={false}
+    name="optionTwo"
+    text="Phone"
+    reveal={
+      <GoabFormItem label="Phone number">
+        <GoabInput name="phoneNumber" onChange={(e) => {/** do nothing */}} value="" />
+      </GoabFormItem>
+    }
+  />
+  <GoabCheckbox
+    checked={false}
+    name="optionThree"
+    text="Text message"
+    reveal={
+      <GoabFormItem label="Mobile phone number">
+        <GoabInput name="mobilePhoneNumber" onChange={(e) =>  {/** do nothing */}} value="" />
+      </GoabFormItem>
+    }
+  />
+</GoabFormItem>
+          `}
+        />
 
         <GoabFormItem label="How would you like to be contacted?">
           <GoabCheckbox
@@ -213,14 +133,6 @@ export const CheckboxRevealSlotExample = () => {
           />
         </GoabFormItem>
       </Sandbox>
-      <GoabSpacer vSpacing={"1"}></GoabSpacer>
-      {version === "old" && language === "react" && (
-        <OldComponentBanner
-          componentName={"Reveal input based on selection"}
-          language={language}
-          type="example"
-        />
-      )}
     </>
   );
 };
diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx
index c766f7b22..d58ad8f93 100644
--- a/src/examples/radio/RadioExamples.tsx
+++ b/src/examples/radio/RadioExamples.tsx
@@ -4,9 +4,11 @@ import {
 import { SetAMaxWidthOnALongRadioItem } from "@examples/set-a-max-width-on-a-long-radio-item.tsx";
 import { RadioRevealSlotExample } from "@examples/radio/RadioRevealSlotExample.tsx";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
-export default function RadioExamples () {
-
+export default function RadioExamples() {
+  const { version } = useContext(LanguageVersionContext);
   return (
     <>
       <SandboxHeader
@@ -21,11 +23,15 @@ export default function RadioExamples () {
       </SandboxHeader>
       <SetAMaxWidthOnALongRadioItem />
 
-      <SandboxHeader
-        exampleTitle="Reveal input based on selection"
-        figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
-      </SandboxHeader>
-      <RadioRevealSlotExample />
+      {version === "new" && (
+        <>
+          <SandboxHeader
+            exampleTitle="Reveal input based on selection"
+            figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-131069&m=dev">
+          </SandboxHeader>
+          <RadioRevealSlotExample />
+        </>
+      )}
     </>
   );
 }
\ No newline at end of file
diff --git a/src/examples/radio/RadioRevealSlotExample.tsx b/src/examples/radio/RadioRevealSlotExample.tsx
index 4e0d4847c..2ee2502c6 100644
--- a/src/examples/radio/RadioRevealSlotExample.tsx
+++ b/src/examples/radio/RadioRevealSlotExample.tsx
@@ -1,163 +1,97 @@
 import { Sandbox } from "@components/sandbox";
-import { useContext } from "react";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem, GoabSpacer } from "@abgov/react-components";
-import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx";
+import { GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 
 export const RadioRevealSlotExample = () => {
-  const { version, language } = useContext(LanguageVersionContext);
   const noop = () => {}
+
   return (
     <>
       {/*Skip rendering because we use reveal that isn't supported by sandbox*/}
       <Sandbox fullWidth skipRender>
         {/*Angular*/}
-        {version === "old" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-              <goa-form-item label="How would you like to be contacted?" helptext="Select one option">
-                <goa-radio-group
-                  name="color"
-                  goaValue
-                  [formControl]="contactMethodFormCtrl"
-                  [value]="contactMethodFormCtrl.value"
-                >
-                <goa-radio-item name="contactMethod" label="Email" value="email">
-                  <div slot="reveal">
-                    <goa-form-item label="Phone number">
-                      <goa-input name="phone" goaValue [value]="phoneNumberFormCtrl.value" [formControl]="phoneNumberFormCtrl"></goa-input>
-                    </goa-form-item>
-                  </div>
-                </goa-radio-item>
-                <goa-radio-item name="contactMethod" value="phone" label="Phone">
-                  <div slot="reveal">
-                    <goa-form-item label="Email address">
-                      <goa-input name="email" goaValue [value]="emailFormCtrl.value" [formControl]="emailFormCtrl"></goa-input>
-                    </goa-form-item>
-                  </div>
-                </goa-radio-item>
-
-                <goa-radio-item name="contactMethod" value="text" label="Text message">
-                  <div slot="reveal">
-                    <goa-form-item label="Mobile phone number">
-                      <goa-input name="phone" goaValue [value]="phoneNumberFormCtrl.value" [formControl]="phoneNumberFormCtrl"></goa-input>
-                    </goa-form-item>
-                  </div>
-                </goa-radio-item>
-              </goa-radio-group>
-            </goa-form-item>
-            `}
-          />
-        )}
-
-        {version === "old" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-        export class ExampleComponent {
-         contactMethodFormCtrl = new FormControl();
-         phoneNumberFormCtrl = new FormControl();
-         emailFormCtrl = new FormControl();
-        }
-     `}
-          />
-        )}
-
-        {/*Angular*/}
-        {version === "new" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-              <goab-form-item [formGroup]="form" label="How would you like to be contacted?" helpText="Select one option">
-                <goab-radio-group name="contactMethod" formControlName="contactMethod">
-                  <goab-radio-item label="Email" value="email" [reveal]="phoneNumberReveal">
-                  <ng-template #phoneNumberReveal>
-                    <goab-form-item label="Phone number">
-                      <goab-input name="phone" formControlName="phoneNumber"></goab-input>
-                    </goab-form-item>
-                  </ng-template>
-                </goab-radio-item>
-                <goab-radio-item value="phone" label="Phone" [reveal]="emailReveal">
-                  <ng-template #emailReveal>
-                    <goab-form-item label="Email address">
-                      <goab-input name="email" formControlName="emailAddress"></goab-input>
-                    </goab-form-item>
-                  </ng-template>
-                </goab-radio-item>
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+<goab-form-item [formGroup]="form" label="How would you like to be contacted?" helpText="Select one option">
+  <goab-radio-group name="contactMethod" formControlName="contactMethod">
+    <goab-radio-item label="Email" value="email" [reveal]="phoneNumberReveal">
+    <ng-template #phoneNumberReveal>
+      <goab-form-item label="Phone number">
+        <goab-input name="phone" formControlName="phoneNumber"></goab-input>
+      </goab-form-item>
+    </ng-template>
+  </goab-radio-item>
+  <goab-radio-item value="phone" label="Phone" [reveal]="emailReveal">
+    <ng-template #emailReveal>
+      <goab-form-item label="Email address">
+        <goab-input name="email" formControlName="emailAddress"></goab-input>
+      </goab-form-item>
+    </ng-template>
+  </goab-radio-item>
 
-                <goab-radio-item name="contactMethod" value="text" label="Text message" [reveal]="textContactMethodReveal">
-                  <ng-template #textContactMethodReveal>
-                    <goab-form-item label="Mobile phone number">
-                      <goab-input name="phone" formControlName="phoneNumber"></goab-input>
-                    </goab-form-item>
-                  </ng-template>
-                </goab-radio-item>
-              </goab-radio-group>
-            </goab-form-item>
-            `}
-          />
-        )}
+  <goab-radio-item name="contactMethod" value="text" label="Text message" [reveal]="textContactMethodReveal">
+    <ng-template #textContactMethodReveal>
+      <goab-form-item label="Mobile phone number">
+        <goab-input name="phone" formControlName="phoneNumber"></goab-input>
+      </goab-form-item>
+    </ng-template>
+  </goab-radio-item>
+</goab-radio-group>
+</goab-form-item>
+          `}
+        />
 
-        {version === "new" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="angular"
-            allowCopy={true}
-            code={`
-        export class ExampleComponent {
-          form!: FormGroup;
-          constructor(private fb: FormBuilder) {
-            this.form = this.fb.group({
-              contactMethod: [""],
-              phoneNumber: [""],
-              emailAddress: [""],
-            });
-          }
-        }
-     `}
-          />
-        )}
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+export class ExampleComponent {
+  form!: FormGroup;
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      contactMethod: [""],
+      phoneNumber: [""],
+      emailAddress: [""],
+    });
+  }
+}
+          `}
+        />
 
         {/*React*/}
-        {version === "new" && (
-          <CodeSnippet
-            lang="typescript"
-            tags="react"
-            allowCopy={true}
-            code={`
-             <GoabFormItem label="How would you like to be contacted?" helpText={"Select one option"}>
-                <GoabRadioGroup name="contactMethod" value={contactMethod} onChange={(e) => setContactMethod(e.value)}>
-                  <GoabRadioItem value="email" label="Email" reveal={
-                    <GoabFormItem label="Phone number">
-                      <GoabInput name="phoneNumber" onChange={() => {/** do nothing */}} value="" />
-                    </GoabFormItem>
-                    }
-                  />
-                  <GoabRadioItem value="phone" label="Phone" reveal={
-                    <GoabFormItem label="Email address">
-                      <GoabInput name="email" onChange={() => {/** do nothing */}} value="" />
-                    </GoabFormItem>
-                    }
-                  />
-                  <GoabRadioItem value="text" label="Text message" reveal={
-                    <GoabFormItem label="Mobile phone number">
-                      <GoabInput name="mobilePhoneNumber" onChange={() => {/** do nothing */}} value="" />
-                    </GoabFormItem>
-                  }
-                />
-          </GoabRadioGroup>
-        </GoabFormItem>
-            `}
-          />
-        )}
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+<GoabFormItem label="How would you like to be contacted?" helpText={"Select one option"}>
+  <GoabRadioGroup name="contactMethod" value={contactMethod} onChange={(e) => setContactMethod(e.value)}>
+    <GoabRadioItem value="email" label="Email" reveal={
+      <GoabFormItem label="Phone number">
+        <GoabInput name="phoneNumber" onChange={() => {/** do nothing */}} value="" />
+      </GoabFormItem>
+      }
+    />
+    <GoabRadioItem value="phone" label="Phone" reveal={
+      <GoabFormItem label="Email address">
+        <GoabInput name="email" onChange={() => {/** do nothing */}} value="" />
+      </GoabFormItem>
+      }
+    />
+    <GoabRadioItem value="text" label="Text message" reveal={
+      <GoabFormItem label="Mobile phone number">
+        <GoabInput name="mobilePhoneNumber" onChange={() => {/** do nothing */}} value="" />
+      </GoabFormItem>
+    }
+  />
+  </GoabRadioGroup>
+</GoabFormItem>
+          `}
+        />
 
         <GoabFormItem label="How would you like to be contacted?" helpText={"Select one option"}>
           <GoabRadioGroup name="contactMethod" onChange={noop}>
@@ -182,14 +116,6 @@ export const RadioRevealSlotExample = () => {
           </GoabRadioGroup>
         </GoabFormItem>
       </Sandbox>
-      <GoabSpacer vSpacing={"1"}></GoabSpacer>
-      {version === "old" && language === "react" && (
-        <OldComponentBanner
-          componentName={"Reveal input based on selection"}
-          language={language}
-          type="example"
-        />
-      )}
     </>
   );
 };
diff --git a/src/routes/components/Checkbox.tsx b/src/routes/components/Checkbox.tsx
index cd3f22e8b..6aed93c8a 100644
--- a/src/routes/components/Checkbox.tsx
+++ b/src/routes/components/Checkbox.tsx
@@ -122,19 +122,6 @@ export default function CheckboxPage() {
         "Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.",
       lang: "angular",
     },
-    {
-      name: "reveal",
-      type: "slot",
-      lang: "angular",
-      description: "Additional content shown when the checkbox is checked.",
-    },
-    {
-      name: "revealariallabel",
-      type: "string",
-      lang: "angular",
-      description:
-        "Defines how the text will be translated for the screen reader when the checkbox is checked and reveal the reveal slot content.",
-    },
     {
       name: "onChange",
       type: "(name: string, checked: boolean, value: string) => void",
@@ -365,7 +352,8 @@ export default function CheckboxPage() {
             heading={
               <>
                 Examples
-                <GoabBadge type="information" content="3" />
+                {version === "new" && <GoabBadge type="information" content="3" />}
+                {version === "old" && <GoabBadge type="information" content="2" />}
               </>
             }
           >
diff --git a/src/routes/components/Radio.tsx b/src/routes/components/Radio.tsx
index 9e920aed1..b3879b9ac 100644
--- a/src/routes/components/Radio.tsx
+++ b/src/routes/components/Radio.tsx
@@ -480,7 +480,8 @@ export default function RadioPage() {
             heading={
               <>
                 Examples
-                <GoabBadge type="information" content="3" />
+                {version === "new" && <GoabBadge type="information" content="3" />}
+                {version === "old" && <GoabBadge type="information" content="2" />}
               </>
             }
           >