fix:safe HTML rendering for radio label (#22645)

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>

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"];