diff --git a/src/components.d.ts b/src/components.d.ts
index 7e77e5078..904c25cc5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -415,6 +415,8 @@ export namespace Components {
     }
     interface SmoothlyInputDemo {
     }
+    interface SmoothlyInputDemoRadio {
+    }
     interface SmoothlyInputDemoStandard {
     }
     interface SmoothlyInputDemoUserInput {
@@ -1601,6 +1603,12 @@ declare global {
         prototype: HTMLSmoothlyInputDemoElement;
         new (): HTMLSmoothlyInputDemoElement;
     };
+    interface HTMLSmoothlyInputDemoRadioElement extends Components.SmoothlyInputDemoRadio, HTMLStencilElement {
+    }
+    var HTMLSmoothlyInputDemoRadioElement: {
+        prototype: HTMLSmoothlyInputDemoRadioElement;
+        new (): HTMLSmoothlyInputDemoRadioElement;
+    };
     interface HTMLSmoothlyInputDemoStandardElement extends Components.SmoothlyInputDemoStandard, HTMLStencilElement {
     }
     var HTMLSmoothlyInputDemoStandardElement: {
@@ -2267,6 +2275,7 @@ declare global {
         "smoothly-input-date-range": HTMLSmoothlyInputDateRangeElement;
         "smoothly-input-date-time": HTMLSmoothlyInputDateTimeElement;
         "smoothly-input-demo": HTMLSmoothlyInputDemoElement;
+        "smoothly-input-demo-radio": HTMLSmoothlyInputDemoRadioElement;
         "smoothly-input-demo-standard": HTMLSmoothlyInputDemoStandardElement;
         "smoothly-input-demo-user-input": HTMLSmoothlyInputDemoUserInputElement;
         "smoothly-input-edit": HTMLSmoothlyInputEditElement;
@@ -2705,6 +2714,8 @@ declare namespace LocalJSX {
     interface SmoothlyInputDemo {
         "onSmoothlyUrlUpdate"?: (event: SmoothlyInputDemoCustomEvent<{ path: string; query?: string }>) => void;
     }
+    interface SmoothlyInputDemoRadio {
+    }
     interface SmoothlyInputDemoStandard {
     }
     interface SmoothlyInputDemoUserInput {
@@ -3086,6 +3097,7 @@ declare namespace LocalJSX {
         "smoothly-input-date-range": SmoothlyInputDateRange;
         "smoothly-input-date-time": SmoothlyInputDateTime;
         "smoothly-input-demo": SmoothlyInputDemo;
+        "smoothly-input-demo-radio": SmoothlyInputDemoRadio;
         "smoothly-input-demo-standard": SmoothlyInputDemoStandard;
         "smoothly-input-demo-user-input": SmoothlyInputDemoUserInput;
         "smoothly-input-edit": SmoothlyInputEdit;
@@ -3202,6 +3214,7 @@ declare module "@stencil/core" {
             "smoothly-input-date-range": LocalJSX.SmoothlyInputDateRange & JSXBase.HTMLAttributes<HTMLSmoothlyInputDateRangeElement>;
             "smoothly-input-date-time": LocalJSX.SmoothlyInputDateTime & JSXBase.HTMLAttributes<HTMLSmoothlyInputDateTimeElement>;
             "smoothly-input-demo": LocalJSX.SmoothlyInputDemo & JSXBase.HTMLAttributes<HTMLSmoothlyInputDemoElement>;
+            "smoothly-input-demo-radio": LocalJSX.SmoothlyInputDemoRadio & JSXBase.HTMLAttributes<HTMLSmoothlyInputDemoRadioElement>;
             "smoothly-input-demo-standard": LocalJSX.SmoothlyInputDemoStandard & JSXBase.HTMLAttributes<HTMLSmoothlyInputDemoStandardElement>;
             "smoothly-input-demo-user-input": LocalJSX.SmoothlyInputDemoUserInput & JSXBase.HTMLAttributes<HTMLSmoothlyInputDemoUserInputElement>;
             "smoothly-input-edit": LocalJSX.SmoothlyInputEdit & JSXBase.HTMLAttributes<HTMLSmoothlyInputEditElement>;
diff --git a/src/components/input/demo/index.tsx b/src/components/input/demo/index.tsx
index 173b8cb14..0404d484f 100644
--- a/src/components/input/demo/index.tsx
+++ b/src/components/input/demo/index.tsx
@@ -18,6 +18,7 @@ export class SmoothlyInputDemo {
 				<smoothly-input-demo-standard />
 				<smoothly-input-date-demo />
 				<smoothly-input-demo-user-input />
+				<smoothly-input-demo-radio />
 				<div class="inputs">
 					<h2>Calendar</h2>
 					<smoothly-input-date name="some-date">Calendar</smoothly-input-date>
diff --git a/src/components/input/demo/radio/index.tsx b/src/components/input/demo/radio/index.tsx
new file mode 100644
index 000000000..a007dc933
--- /dev/null
+++ b/src/components/input/demo/radio/index.tsx
@@ -0,0 +1,55 @@
+import { Component, h, Host, State, Watch } from "@stencil/core"
+
+@Component({
+	tag: "smoothly-input-demo-radio",
+	styleUrl: "style.css",
+	scoped: true,
+})
+export class SmoothlyInputDemoRadio {
+	@State() selected: string
+
+	@Watch("selected")
+	selectedChange() {
+		console.log("selected", this.selected)
+	}
+
+	render() {
+		return (
+			<Host>
+				<h2>radio input - column direction</h2>
+				<smoothly-input-radio
+					name="radio"
+					direction="column"
+					onSmoothlyInput={e => (this.selected = e.detail.radio as string)}>
+					<smoothly-input-radio-item value="1">
+						<span>Option 1</span>
+
+						<span slot="detail">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+							dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+							ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+							fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+							mollit anim id est laborum.
+						</span>
+					</smoothly-input-radio-item>
+					<smoothly-input-radio-item value="2" selected>
+						<span>Option 2</span>
+						<div slot="detail">
+							<smoothly-tabs>
+								<smoothly-tab label="Dog" name="dog" open>
+									🐕
+								</smoothly-tab>
+								<smoothly-tab label="Cat" name="cat">
+									🐈
+								</smoothly-tab>
+								<smoothly-tab label="Rat" name="rat">
+									🐀
+								</smoothly-tab>
+							</smoothly-tabs>
+						</div>
+					</smoothly-input-radio-item>
+				</smoothly-input-radio>
+			</Host>
+		)
+	}
+}
diff --git a/src/components/input/demo/radio/style.css b/src/components/input/demo/radio/style.css
new file mode 100644
index 000000000..94b958fad
--- /dev/null
+++ b/src/components/input/demo/radio/style.css
@@ -0,0 +1,12 @@
+:host {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+	max-width: min(56rem, 100%);
+	margin: auto;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+:host :not(smoothly-input-date):not(smoothly-input-date-range) {
+	grid-column: 1 / -1;
+}
diff --git a/src/components/input/radio/item/index.tsx b/src/components/input/radio/item/index.tsx
index 2f6d7a386..057307104 100644
--- a/src/components/input/radio/item/index.tsx
+++ b/src/components/input/radio/item/index.tsx
@@ -45,6 +45,7 @@ export class SmoothlyInputRadioItem {
 				<label>
 					<slot />
 				</label>
+				<slot name="detail" />
 			</Host>
 		)
 	}
diff --git a/src/components/input/radio/item/style.css b/src/components/input/radio/item/style.css
index 0dd0e17ec..87f042d64 100644
--- a/src/components/input/radio/item/style.css
+++ b/src/components/input/radio/item/style.css
@@ -1,5 +1,6 @@
 :host {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	position: relative;
 }
@@ -29,8 +30,16 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch
 	position: absolute;
 	transform: translateX(50%);
 }
-
 :host>label {
 	padding: 0 .3em;
 	white-space: nowrap;
 }
+
+:host[selected] ::slotted([slot="detail"]) { 
+	display: block; 
+	width: 100%; 
+} 
+:host ::slotted([slot="detail"]) { 
+	display: none; 
+}
+
diff --git a/src/components/input/radio/style.css b/src/components/input/radio/style.css
index 7dfbe0528..9201f3420 100644
--- a/src/components/input/radio/style.css
+++ b/src/components/input/radio/style.css
@@ -15,6 +15,7 @@
 :host>div>div.options {
 	display: flex;
 	gap: 1.5rem;
+	width: 100%;
 }
 :host[direction=column]>div>div.options {
 	flex-direction: column;