diff --git a/src/components/data-entry/Radio/Radio.tsx b/src/components/data-entry/Radio/Radio.tsx
index 208e1a807..026442730 100644
--- a/src/components/data-entry/Radio/Radio.tsx
+++ b/src/components/data-entry/Radio/Radio.tsx
@@ -1,6 +1,8 @@
import { Radio as AntRadio } from 'antd'
import { type RadioProps as AntRadioProps } from 'antd'
import { ConfigProvider } from 'src/components'
+import { RadioGroup } from "./RadioGroup";
+import { RadioButton } from "./RadioButton";
export interface IRadioProps extends AntRadioProps {}
@@ -14,5 +16,5 @@ export const Radio = (props: IRadioProps) => {
// TODO Is there a way to type the props from Radio.Group better so that value types are inferred?
// This happens with ant as well. doesn't get properly propagated to the change event
-Radio.Group = AntRadio.Group
-Radio.Button = AntRadio.Button
+Radio.Group = RadioGroup
+Radio.Button = RadioButton
diff --git a/src/components/data-entry/Radio/RadioButton.stories.tsx b/src/components/data-entry/Radio/RadioButton.stories.tsx
new file mode 100644
index 000000000..4de404e75
--- /dev/null
+++ b/src/components/data-entry/Radio/RadioButton.stories.tsx
@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Radio } from 'src/components/data-entry/Radio/Radio'
+
+const meta: Meta = {
+ title: 'Aquarium/Data Entry/Radio/RadioButton',
+ component: Radio.Button,
+
+ args: {
+ autoFocus: false,
+ checked: false,
+ defaultChecked: false,
+ disabled: false,
+ value: undefined,
+ children: 'Radio Button',
+ },
+}
+export default meta
+
+type Story = StoryObj
+
+export const Primary: Story = {}
\ No newline at end of file
diff --git a/src/components/data-entry/Radio/RadioButton.tsx b/src/components/data-entry/Radio/RadioButton.tsx
new file mode 100644
index 000000000..731e6e5b2
--- /dev/null
+++ b/src/components/data-entry/Radio/RadioButton.tsx
@@ -0,0 +1,13 @@
+import { Radio as AntRadio } from 'antd'
+import { type RadioButtonProps as AntRadioGroupProps } from "antd/es/radio/radioButton";
+import { ConfigProvider } from 'src/components'
+
+export interface IRadioButtonProps extends AntRadioGroupProps {}
+
+export const RadioButton = (props: IRadioButtonProps) => {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/data-entry/Radio/RadioGroup.stories.tsx b/src/components/data-entry/Radio/RadioGroup.stories.tsx
new file mode 100644
index 000000000..863271c2f
--- /dev/null
+++ b/src/components/data-entry/Radio/RadioGroup.stories.tsx
@@ -0,0 +1,46 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Radio } from 'src/components/data-entry/Radio/Radio'
+
+const meta: Meta = {
+ title: 'Aquarium/Data Entry/Radio/RadioGroup',
+ component: Radio.Group,
+
+ args: {
+ buttonStyle: undefined,
+ defaultValue: undefined,
+ disabled: false,
+ name: undefined,
+ options: undefined,
+ optionType: undefined,
+ size: 'middle',
+ value: undefined,
+ onChange: undefined,
+ children: undefined
+ },
+}
+export default meta
+
+type Story = StoryObj
+
+export const WithOptionsAndOptionType: Story = {
+ args: {
+ options: [
+ { label: 'Apple', value: 'Apple' },
+ { label: 'Pear', value: 'Pear' },
+ { label: 'Orange', value: 'Orange', title: 'Orange' },
+ ],
+ optionType: 'default',
+ },
+}
+
+export const WithRadioButtons: Story = {
+ args: {
+ defaultValue: "a",
+ children: [
+ Hangzhou,
+ Shanghai,
+ Beijing,
+ Chengdu
+ ]
+ },
+}
\ No newline at end of file
diff --git a/src/components/data-entry/Radio/RadioGroup.tsx b/src/components/data-entry/Radio/RadioGroup.tsx
new file mode 100644
index 000000000..3286a92e9
--- /dev/null
+++ b/src/components/data-entry/Radio/RadioGroup.tsx
@@ -0,0 +1,13 @@
+import { Radio as AntRadio } from 'antd'
+import { type RadioGroupProps as AntRadioGroupProps } from 'antd'
+import { ConfigProvider } from 'src/components'
+
+export interface IRadioGroupProps extends AntRadioGroupProps {}
+
+export const RadioGroup = (props: IRadioGroupProps) => {
+ return (
+
+
+
+ )
+}