From 29349845f8209efc451b5602532b46115570ce74 Mon Sep 17 00:00:00 2001
From: Ashish manhas <79656682+iamashishxo@users.noreply.github.com>
Date: Fri, 1 Aug 2025 20:26:05 +0530
Subject: [PATCH] fix:safe HTML rendering for radio label (#22645)

---
 .../features/form-builder/FormBuilderField.tsx   | 16 +++++++++++++++-
 .../fieldsThatSupportLabelAsSafeHtml.ts          |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx
index 4cd6f2d4d7..88db03a320 100644
--- a/packages/features/form-builder/FormBuilderField.tsx
+++ b/packages/features/form-builder/FormBuilderField.tsx
@@ -4,6 +4,7 @@ import { Controller, useFormContext } from "react-hook-form";
 import type { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import classNames from "@calcom/ui/classNames";
 import { InfoBadge } from "@calcom/ui/components/badge";
 import { Label } from "@calcom/ui/components/form";
@@ -19,6 +20,19 @@ import {
 } from "./useShouldBeDisabledDueToPrefill";
 import { getTranslatedConfig as getTranslatedVariantsConfig } from "./utils/variantsConfig";
 
+// helper to render markdown label safely
+const renderLabel = (field: Partial<RhfFormField>) => {
+  if (field.labelAsSafeHtml) {
+    return (
+      <span
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(field.labelAsSafeHtml) }}
+      />
+    );
+  }
+  return <span>{field.label}</span>;
+};
+
 type RhfForm = {
   fields: z.infer<typeof fieldsSchema>;
 };
@@ -155,7 +169,7 @@ const WithLabel = ({
           field.label && (
             <div className="mb-2 flex items-center">
               <Label className="!mb-0 flex items-center" htmlFor={htmlFor}>
-                <span>{field.label}</span>
+                {renderLabel(field)}
                 <span className="text-emphasis -mb-1 ml-1 text-sm font-medium leading-none">
                   {!readOnly && field.required ? "*" : ""}
                 </span>
diff --git a/packages/features/form-builder/fieldsThatSupportLabelAsSafeHtml.ts b/packages/features/form-builder/fieldsThatSupportLabelAsSafeHtml.ts
index a11598e3e2..c4d432cdf5 100644
--- a/packages/features/form-builder/fieldsThatSupportLabelAsSafeHtml.ts
+++ b/packages/features/form-builder/fieldsThatSupportLabelAsSafeHtml.ts
@@ -4,4 +4,4 @@ import type { FieldType } from "./schema";
  * Once a component supports `labelAsSafeHtml`, add it's field's type here
  * A whitelist is needed because unless we explicitly use dangerouslySetInnerHTML, React will escape the HTML
  */
-export const fieldsThatSupportLabelAsSafeHtml: FieldType[] = ["boolean"];
+export const fieldsThatSupportLabelAsSafeHtml: FieldType[] = ["boolean", "radio"];