diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
new file mode 100644
index 0000000..519a4f5
--- /dev/null
+++ b/src/components/RadioGroup.tsx
@@ -0,0 +1,74 @@
+import { isNotNil } from 'es-toolkit';
+import {
+  Component,
+  createEffect,
+  createMemo,
+  createSignal,
+  Index,
+  JSX,
+  mergeProps,
+  Show,
+} from 'solid-js';
+import Radio from './Radio';
+
+type Option = {
+  label: string | JSX.Element;
+  value: string | number | symbol | boolean;
+};
+
+interface RadioGroupProps {
+  name?: string;
+  options?: Option[];
+  value?: Option['value'];
+  disabled?: boolean;
+  onChange?: (value?: Option['value']) => void;
+}
+
+const RadioGroup: Component<RadioGroupProps> = (props) => {
+  const mProps = mergeProps<RadioGroupProps[]>(
+    {
+      options: [],
+      disabled: false,
+    },
+    props,
+  );
+
+  const originalValue = createMemo(() => mProps.value);
+  const [selectedValue, setSelectedValue] = createSignal<Option['value'] | undefined>(undefined);
+
+  createEffect(() => {
+    if (isNotNil(originalValue()) && originalValue() !== selectedValue()) {
+      setSelectedValue(originalValue());
+    }
+  });
+
+  const handleSelect = (value: Option['value']) => {
+    if (mProps.disabled) {
+      return;
+    }
+    setSelectedValue(value);
+    mProps.onChange?.(selectedValue());
+  };
+
+  return (
+    <>
+      <Index each={mProps.options}>
+        {(option) => (
+          <Radio
+            checked={selectedValue() === option().value}
+            disabled={mProps.disabled}
+            onChange={() => {
+              handleSelect(option().value);
+            }}>
+            {option().label}
+          </Radio>
+        )}
+      </Index>
+      <Show when={isNotNil(mProps.name)}>
+        <input type="hidden" name={mProps.name} value={selectedValue()} />
+      </Show>
+    </>
+  );
+};
+
+export default RadioGroup;