diff --git a/playbook/app/entrypoints/playbook-rails.js b/playbook/app/entrypoints/playbook-rails.js
index fb611584b5..6c11e2a8a8 100644
--- a/playbook/app/entrypoints/playbook-rails.js
+++ b/playbook/app/entrypoints/playbook-rails.js
@@ -45,6 +45,9 @@ PbNav.start()
 import PbStarRating from 'kits/pb_star_rating'
 PbStarRating.start()
 
+import PbRadio from 'kits/pb_radio'
+PbRadio.start()
+
 import 'flatpickr'
 
 // React-Rendered Rails Kits =====
diff --git a/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb b/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb
new file mode 100644
index 0000000000..f5593332a6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb
@@ -0,0 +1,48 @@
+<%
+  options = [
+    { label: "Orange", value: "Orange" },
+    { label: "Red", value: "Red" },
+    { label: "Green", value: "Green" },
+    { label: "Blue", value: "Blue" },
+  ]
+%>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Select",
+  name: "Group1",
+  value: "Select",
+}) do %>
+  <%= pb_rails("select", props: {
+    min_width: "xs",
+    options: options,
+  }) %>
+<% end %>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Typeahead",
+  name: "Group1",
+  value: "Typeahead",
+}) do %>
+  <%= pb_rails("typeahead", props: {
+      id: "typeahead-radio",
+      is_multi: false,
+      min_width: "xs",
+      options: options,
+      placeholder: "Select...",
+    })
+  %>
+<% end %>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Typography",
+  name: "Group1",
+  value: "Typography",
+}) do %>
+  <%= pb_rails("title", props: {
+      text: "Custom Typography",
+    })
+  %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md b/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md
new file mode 100644
index 0000000000..ca118ecab1
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md
@@ -0,0 +1 @@
+Use the `custom_children` prop to enable the use of kits instead of text labels.
diff --git a/playbook/app/pb_kits/playbook/pb_radio/docs/example.yml b/playbook/app/pb_kits/playbook/pb_radio/docs/example.yml
index 0a7f0d3d01..0d8fb7d8f3 100644
--- a/playbook/app/pb_kits/playbook/pb_radio/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_radio/docs/example.yml
@@ -7,6 +7,7 @@ examples:
   - radio_options: With Options
   - radio_alignment: Alignment
   - radio_disabled: Disabled
+  - radio_custom_children: Custom Children
 
   react:
   - radio_default: Default
diff --git a/playbook/app/pb_kits/playbook/pb_radio/index.js b/playbook/app/pb_kits/playbook/pb_radio/index.js
new file mode 100644
index 0000000000..949c5fddd8
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_radio/index.js
@@ -0,0 +1,17 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const RADIO_SELECTOR = "[data-pb-radio-children]"
+const RADIO_WRAPPER_SELECTOR = "[data-pb-radio-children-wrapper]"
+
+export default class PbRadio extends PbEnhancedElement {
+  static get selector() {
+    return RADIO_SELECTOR
+  }
+
+  connect() {
+    const radioWrapperElement = this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR)
+    radioWrapperElement.addEventListener("click", () => {
+      this.element.querySelector("input[type='radio']").click()
+    })
+  }
+}
diff --git a/playbook/app/pb_kits/playbook/pb_radio/radio.html.erb b/playbook/app/pb_kits/playbook/pb_radio/radio.html.erb
index c7d2b70e99..ac28097d9d 100644
--- a/playbook/app/pb_kits/playbook/pb_radio/radio.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_radio/radio.html.erb
@@ -1,18 +1,40 @@
-<%= content_tag(:label,
+<% if object.custom_children %>
+  <%= pb_rails("flex", props: {
     aria: object.aria,
-    checked: object.checked,
+    align: "center",
     class: object.classname,
+    cursor: "pointer",
     data: object.data,
-    id: object.id,
-    value: object.value,
-    **combined_html_options) do %>
-
-    <% if content.present? %>
-      <%= content %>
-    <% else %>
-      <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
+    **combined_html_options
+  }) do %>
+    <%= content_tag(:label,
+      'data-pb-radio-children': 'true',
+      checked: object.checked,
+      class: object.classname,
+      id: object.id,
+      value: object.value) do %>
+      <%= input %>
+      <span class="pb_radio_button"></span>
     <% end %>
+    <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
+  <% end %>
+<% else %>
+  <%= content_tag(:label,
+      aria: object.aria,
+      checked: object.checked,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      value: object.value,
+      **combined_html_options) do %>
+
+      <% if content.present? %>
+        <%= content %>
+      <% else %>
+        <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
+      <% end %>
 
-    <span class="pb_radio_button"></span>
-    <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
-<% end %>
+      <span class="pb_radio_button"></span>
+      <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
+  <% end %>
+<% end %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_radio/radio.rb b/playbook/app/pb_kits/playbook/pb_radio/radio.rb
index 2ac7a0148f..b3523274d3 100644
--- a/playbook/app/pb_kits/playbook/pb_radio/radio.rb
+++ b/playbook/app/pb_kits/playbook/pb_radio/radio.rb
@@ -20,6 +20,8 @@ class Radio < Playbook::KitBase
                   default: "Radio Text"
       prop :value, type: Playbook::Props::String,
                    default: "radio_text"
+      prop :custom_children, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_radio_kit") + error_class + alignment_class
@@ -34,7 +36,7 @@ def body_status
       end
 
       def input
-        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled))
+        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled || input_options[:disabled]))
       end
 
     private