diff --git a/src/components/form-field/form-field.tsx b/src/components/form-field/form-field.tsx
index 1cfc8c17..27d9dfe9 100644
--- a/src/components/form-field/form-field.tsx
+++ b/src/components/form-field/form-field.tsx
@@ -12,6 +12,7 @@ import { MultiCombobox } from "./multi-combobox/multi-combobox";
 import { SingleCombobox } from "./single-combobox/single-combobox";
 import { FormFieldGroup } from "./form-field-group";
 import { SearchInput } from "./search-input/search-input";
+import { RadioBox } from "./radio-box/radio-box";
 
 interface FormFieldProps {
     children: React.ReactNode;
@@ -34,5 +35,6 @@ FormField.MultiCombobox = MultiCombobox;
 FormField.SingleCombobox = SingleCombobox;
 FormField.Group = FormFieldGroup;
 FormField.SearchInput = SearchInput;
+FormField.RadioBox = RadioBox;
 
 export { FormField };
diff --git a/src/components/form-field/radio-box/radio-box-option.tsx b/src/components/form-field/radio-box/radio-box-option.tsx
new file mode 100644
index 00000000..0c5d67e5
--- /dev/null
+++ b/src/components/form-field/radio-box/radio-box-option.tsx
@@ -0,0 +1,73 @@
+import { RadioGroup } from "@headlessui/react";
+import React from "react";
+import { classNames } from "../../../util/class-names";
+
+export interface RadioBoxOptionProps {
+    children: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+    highlightText?: string;
+}
+
+export const RadioBoxOption = ({
+    children,
+    value,
+    disabled,
+    highlightText,
+}: RadioBoxOptionProps) => {
+    return (
+        <RadioGroup.Option
+            value={value}
+            className="w-full cursor-pointer focus:outline-none"
+            disabled={disabled}
+        >
+            {({ checked, disabled: optionDisabled }) => (
+                <div
+                    className={classNames(
+                        "group relative flex items-center gap-3 rounded-lg border p-4",
+                        checked
+                            ? "border-primary-500 bg-primary-500"
+                            : "border-neutral-300 hover:border-primary-500 hover:bg-primary-50",
+                        optionDisabled &&
+                            "cursor-not-allowed bg-neutral-100 hover:border-neutral-300 hover:bg-neutral-100"
+                    )}
+                >
+                    {highlightText && (
+                        <span className="absolute right-6 top-0 z-10 -translate-y-1/2 rounded border border-primary-500 bg-primary-100 px-1 text-xs uppercase tracking-wide text-primary-500">
+                            {highlightText}
+                        </span>
+                    )}
+
+                    <span
+                        className={classNames(
+                            "relative inline-block h-4 w-4 shrink-0 rounded-full bg-neutral-0",
+                            !checked &&
+                                "border border-neutral-400 group-hover:border-primary-500 group-hover:bg-neutral-0",
+                            optionDisabled &&
+                                "border border-neutral-400 bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100"
+                        )}
+                    >
+                        {checked && (
+                            <span
+                                className={classNames(
+                                    "absolute inset-0 m-auto block h-2 w-2 rounded-full bg-primary-500",
+                                    optionDisabled && "bg-neutral-500"
+                                )}
+                            />
+                        )}
+                    </span>
+
+                    <p
+                        className={classNames(
+                            "paragraph-200",
+                            checked && "text-neutral-0",
+                            optionDisabled && "text-neutral-600"
+                        )}
+                    >
+                        {children}
+                    </p>
+                </div>
+            )}
+        </RadioGroup.Option>
+    );
+};
diff --git a/src/components/form-field/radio-box/radio-box.stories.tsx b/src/components/form-field/radio-box/radio-box.stories.tsx
new file mode 100644
index 00000000..6026d684
--- /dev/null
+++ b/src/components/form-field/radio-box/radio-box.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { FormField } from "../form-field";
+import { RadioBox } from "./radio-box";
+
+const meta: Meta<typeof RadioBox> = {
+    title: "Input/RadioBox",
+    component: RadioBox,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioBox>;
+
+const RadioBoxWithHooks = () => {
+    const [value, setValue] = useState("value_1");
+
+    return (
+        <FormField>
+            <FormField.RadioBox id="value" value={value} onChange={setValue}>
+                <FormField.RadioBox.Option value="value_1" highlightText="Recommended">
+                    <div className="flex flex-col gap-2">
+                        <h2 className="headline-500">Option 1</h2>
+                        <p>
+                            To be, or not to be, that is the question: Whether ’tis nobler in the
+                            mind to suffer The slings and arrows of outrageous fortune, …
+                        </p>
+                    </div>
+                </FormField.RadioBox.Option>
+
+                <FormField.RadioBox.Option value="value_2">
+                    <div className="flex flex-col gap-2">
+                        <h2 className="headline-500">Option 2</h2>
+                        <p>
+                            To be, or not to be, that is the question: Whether ’tis nobler in the
+                            mind to suffer The slings and arrows of outrageous fortune, …
+                        </p>
+                    </div>
+                </FormField.RadioBox.Option>
+
+                <FormField.RadioBox.Option value="value_3" disabled>
+                    <div className="flex flex-col gap-2">
+                        <h2 className="headline-500">Option 3</h2>
+                        <p>
+                            To be, or not to be, that is the question: Whether ’tis nobler in the
+                            mind to suffer The slings and arrows of outrageous fortune, …
+                        </p>
+                    </div>
+                </FormField.RadioBox.Option>
+            </FormField.RadioBox>
+        </FormField>
+    );
+};
+
+export const Default: Story = {
+    render: () => (
+        <div className="w-96">
+            <RadioBoxWithHooks />
+        </div>
+    ),
+};
diff --git a/src/components/form-field/radio-box/radio-box.tsx b/src/components/form-field/radio-box/radio-box.tsx
new file mode 100644
index 00000000..ac81b133
--- /dev/null
+++ b/src/components/form-field/radio-box/radio-box.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { RadioGroup } from "@headlessui/react";
+import { RadioBoxOption } from "./radio-box-option";
+
+export interface RadioBoxProps {
+    id: string;
+    children: React.ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export const RadioBox = ({ id, value, children, onChange }: RadioBoxProps) => {
+    return (
+        <RadioGroup id={id} value={value} onChange={onChange} className="flex flex-col gap-2">
+            {children}
+        </RadioGroup>
+    );
+};
+
+RadioBox.Option = RadioBoxOption;