diff --git a/HTML_TRANSFORMER_TODO.md b/HTML_TRANSFORMER_TODO.md
new file mode 100644
index 000000000..989afc55c
--- /dev/null
+++ b/HTML_TRANSFORMER_TODO.md
@@ -0,0 +1,267 @@
+# HTML Component Transformer - Remaining Tasks
+
+## ✅ Completed
+
+- ✅ All core implementation done
+- ✅ Types properly defined and exported
+- ✅ All tests passing (737/737)
+- ✅ Type checking passes
+- ✅ Linting passes
+- ✅ TelField types fixed and properly structured
+- ✅ Test mocks updated with `useTransformer`
+
+---
+
+## 📝 What's Left
+
+### 3. Documentation (Optional but Recommended)
+
+**Priority: MEDIUM**  
+**Estimated effort: 1-2 hours**
+
+Add documentation to help other developers use this feature.
+
+#### Files to update:
+
+1. **README.md** - Add a new section:
+
+````markdown
+## HTML Component Transformation
+
+Transform HTML in field descriptions into custom React components.
+
+### Basic Usage
+
+```typescript
+import parse from 'html-react-parser';
+import DOMPurify from 'dompurify';
+
+const transformHtmlToComponents = (htmlContent: string) => {
+  const clean = DOMPurify.sanitize(htmlContent);
+  return parse(clean, {
+    replace: (domNode) => {
+      // Your transformation logic
+    },
+  });
+};
+
+<RemoteFlows
+  transformHtmlToComponents={transformHtmlToComponents}
+  // ... other props
+>
+  {/* Your flows */}
+</RemoteFlows>
+```
+````
+
+### Security Noteº
+
+⚠️ **The transformer receives RAW UNSANITIZED HTML**. You are responsible for sanitizing untrusted HTML before parsing. We recommend using [DOMPurify](https://www.npmjs.com/package/dompurify).
+
+### Using in Custom Components
+
+Custom field components can access the transformer via `fieldData.transformHtml`:
+
+```typescript
+const CustomInput = ({ fieldData }: FieldComponentProps) => {
+  const renderDescription = (desc: string) => {
+    if (fieldData.transformHtml) {
+      return fieldData.transformHtml(desc);
+    }
+    return <div dangerouslySetInnerHTML={{ __html: desc }} />;
+  };
+
+  return (
+    <div>
+      <input />
+      {fieldData.description && renderDescription(fieldData.description)}
+    </div>
+  );
+};
+```
+
+````
+
+2. **CHANGELOG.md** - Add to the unreleased section:
+```markdown
+### Added
+- HTML component transformation feature via `transformHtmlToComponents` prop
+  - Partners can now replace HTML patterns in field descriptions with custom React components
+  - Useful for converting `<details data-component="Accordion">` to custom Accordion components
+  - Available in both default and custom field components via `fieldData.transformHtml`
+  - Fully backward compatible - no transformer = existing sanitized HTML behavior
+
+### Changed
+- Updated `FieldDataProps` to include optional `transformHtml` property
+- Updated `TelFieldComponentProps` and `TelFieldDataProps` to follow proper export pattern
+````
+
+---
+
+### 4. Slice Work into Reviewable PRs
+
+**Priority: HIGH (Once all work is complete and tested)**  
+**Estimated effort: 1-2 hours**
+
+After completing the example, tests, and documentation, split the work into small, reviewable PRs.
+
+#### Recommended PR structure:
+
+**PR 1: Core Infrastructure** (smallest, safest)
+
+- `src/types/remoteFlows.ts` - Added `transformHtmlToComponents` prop
+- `src/context.ts` - Added `useTransformer` hook
+- `src/RemoteFlowsProvider.tsx` - Wired up transformer to context
+- `src/lib/transformDescription.tsx` - Internal helper
+- `src/components/ui/form.tsx` - Updated `FormDescription` to use transformer
+- `src/components/ui/tests/form.test.tsx` - Tests for `FormDescription` transformer
+- Test mocks updated with `useTransformer`
+
+**Why first**: Establishes the foundation, smallest surface area, easiest to review
+
+**PR 2: Field Components Integration**
+
+- `src/types/fields.ts` - Added `transformHtml` to `FieldDataProps`
+- All 13 field components updated to inject `transformHtml` into `fieldData`:
+  - TextField, TextAreaField, SelectField, RadioGroupField, CheckBoxField
+  - NumberField, EmailField, MultiSelectField, DatePickerField
+  - CountryField, FileUploadField, TelField, WorkScheduleField
+- `src/components/form/fields/FieldSetField.tsx` - Updated to use transformer
+- `src/components/ui/tests/form.test.tsx` - Add custom component integration tests
+
+**Why second**: Builds on PR 1, enables the feature for all field types
+
+**PR 3: Example Implementation**
+
+- `example/src/components/Accordion.tsx` - New component
+- `example/src/utils/transformHtml.tsx` - Transformer function
+- `example/src/Onboarding.tsx` - Wire up transformer
+- `package.json` - Add `html-react-parser` and `dompurify` dependencies (example only)
+
+**Why third**: Shows the feature in action, doesn't affect library code
+
+**PR 4: Documentation**
+
+- `README.md` - HTML transformation section
+- `CHANGELOG.md` - Feature announcement
+- `src/index.tsx` - Export `TelFieldComponentProps` (if not already done)
+
+**Why last**: Documents everything that's already merged
+
+#### Benefits of this approach:
+
+- ✅ Each PR has a clear purpose and scope
+- ✅ Core infrastructure can be reviewed and merged first
+- ✅ Easier to spot issues in smaller diffs
+- ✅ Can merge incrementally (feature is backward compatible)
+- ✅ Reduces risk of "everything slips" in one huge PR
+- ✅ Reviewers can focus on one aspect at a time
+
+#### Alternative (if PRs are too large):
+
+Could split PR 2 into:
+
+- **PR 2a**: Update first 6 field components
+- **PR 2b**: Update remaining 7 field components + tests
+
+---
+
+### 5. Future Enhancements (Not Required Now)
+
+**Priority: LOW**
+
+Ideas for future iterations:
+
+- [ ] Add transformer for ZendeskDrawer components
+- [ ] Create a library of common transformers (Accordion, Tabs, etc.)
+- [ ] Add transformer performance monitoring
+- [ ] Create Storybook examples
+- [ ] Add E2E tests for transformed components
+
+---
+
+## Testing the Implementation
+
+### Verify everything works:
+
+```bash
+# 1. All tests pass
+npm test
+
+# 2. Type checking passes
+npm run type-check
+
+# 3. Linting passes
+npm run lint
+
+# 4. Format check
+npm run format
+
+# 5. Build succeeds
+npm run build
+
+# 6. Example app runs
+npm run dev
+```
+
+### Manual testing checklist:
+
+- [ ] Navigate to onboarding flow in example app
+- [ ] Find a field with Accordion HTML in description
+- [ ] Verify Accordion renders and is interactive
+- [ ] Verify fallback works (no transformer = sanitized HTML)
+- [ ] Verify custom field components can access `fieldData.transformHtml`
+
+---
+
+## Files Modified in This Implementation
+
+### Core Implementation:
+
+- `src/types/remoteFlows.ts` - Added `transformHtmlToComponents` prop
+- `src/context.ts` - Added `useTransformer` hook
+- `src/RemoteFlowsProvider.tsx` - Wired up transformer to context
+- `src/components/ui/form.tsx` - Updated FormDescription to use transformer
+- `src/components/form/fields/FieldSetField.tsx` - Updated to use transformer
+- `src/lib/transformDescription.tsx` - Internal helper (not exported)
+- `src/types/fields.ts` - Added `transformHtml` to FieldDataProps, fixed TelField types
+- `src/index.tsx` - Exported `TelFieldComponentProps`
+
+### Field Components Updated (all inject `transformHtml` into fieldData):
+
+- TextField, TextAreaField, SelectField, RadioGroupField, CheckBoxField
+- NumberField, EmailField, MultiSelectField, DatePickerField
+- CountryField, FileUploadField, TelField, WorkScheduleField
+
+### Tests Updated:
+
+- All 24 test files with context mocks updated to include `useTransformer`
+- New test file: `src/components/ui/tests/form.test.tsx` (merged transformer tests)
+
+---
+
+## Key Architecture Decisions
+
+1. **Transformer receives raw HTML** - Partners responsible for sanitization
+2. **Available in default AND custom components** - Via FormDescription and fieldData.transformHtml
+3. **Internal helper not exported** - Partners implement their own (full control)
+4. **Backward compatible** - No transformer = existing behavior with sanitization
+5. **Memoized in context** - Performance optimized
+6. **Separate hook for internal use** - `useTransformer` vs `useFormFields` (different audiences)
+
+---
+
+## Questions or Issues?
+
+If you encounter issues:
+
+1. Check that `html-react-parser` and `dompurify` are installed
+2. Verify the transformer function is properly sanitizing HTML
+3. Check browser console for transformation errors
+4. Verify the HTML format matches expected structure
+
+---
+
+**Status**: Ready for example implementation and optional documentation.  
+**Last Updated**: April 29, 2026  
+**Next Action**: Create Accordion example in example app
diff --git a/example/package-lock.json b/example/package-lock.json
index 7424e7a3b..4fa864b32 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -11,8 +11,10 @@
       "dependencies": {
         "@remoteoss/remote-flows": "file://..",
         "axios": "1.15.2",
+        "dompurify": "^3.4.1",
         "dotenv": "17.4.2",
         "express": "5.2.1",
+        "html-react-parser": "^6.0.1",
         "jsonwebtoken": "9.0.3",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -22,6 +24,7 @@
       },
       "devDependencies": {
         "@playwright/test": "1.59.1",
+        "@types/dompurify": "^3.0.5",
         "@types/node": "24.12.2",
         "@types/react-dom": "19.2.3",
         "@types/react-syntax-highlighter": "15.5.13",
@@ -45,14 +48,14 @@
         "@radix-ui/react-select": "2.2.6",
         "@radix-ui/react-tabs": "1.1.13",
         "@remoteoss/remote-json-schema-form-kit": "0.0.11",
-        "@tailwindcss/cli": "4.2.3",
-        "@tailwindcss/postcss": "4.2.3",
+        "@tailwindcss/cli": "4.2.4",
+        "@tailwindcss/postcss": "4.2.4",
         "@tanstack/react-query": "5.99.0",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "cmdk": "1.1.1",
         "date-fns": "3.6.0",
-        "dompurify": "3.4.0",
+        "dompurify": "3.4.1",
         "fast-deep-equal": "3.1.3",
         "lodash.capitalize": "4.2.1",
         "lodash.groupby": "4.6.0",
@@ -66,7 +69,7 @@
         "react-flagpack": "2.0.6",
         "react-hook-form": "7.73.1",
         "tailwind-merge": "3.5.0",
-        "tailwindcss": "4.2.3",
+        "tailwindcss": "4.2.4",
         "tailwindcss-animate": "1.0.7",
         "vaul": "1.1.2",
         "yup": "0.32.11"
@@ -306,9 +309,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -326,9 +326,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -346,9 +343,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -366,9 +360,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -386,9 +377,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -406,9 +394,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -426,9 +411,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -446,9 +428,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -639,9 +618,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -659,9 +635,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -679,9 +652,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -699,9 +669,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -719,9 +686,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -739,9 +703,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -839,6 +800,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -868,7 +839,7 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -893,6 +864,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -1237,7 +1215,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -1297,6 +1275,82 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-3.0.0.tgz",
+      "integrity": "sha512-x+9D6nkC8tdXOQUS32egtZpZFLP90+HBZmWjuT920srbJvD/zPgFB9t4k3pEhlw5BQrXStQtRc1Y1zuriXk+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^3.0.0",
+        "domhandler": "^6.0.0",
+        "entities": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-3.0.0.tgz",
+      "integrity": "sha512-umCQid3jKbDmVjx8jGaW7uUykm4DEUeyV21hPxNMo2nV955DhUThwqyOIDtreepP31hl84X7G5U9ZfsWvIB3Pg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/domhandler": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-6.0.1.tgz",
+      "integrity": "sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/dompurify": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.1.tgz",
+      "integrity": "sha512-JahakDAIg1gyOm7dlgWSDjV4n7Ip2PKR55NIT6jrMfIgLFgWo81vdr1/QGqWtFNRqXP9UV71oVePtjqS2ebnPw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-4.0.2.tgz",
+      "integrity": "sha512-qI4JLRKnSzqFqr7hAlS5xQDusBCjKSEG4t4+7aNrIQMHBcsC2TGEhuyABJdYkgSewL57PNLYEiibY2iPKhKpaA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^3.0.0",
+        "domelementtype": "^3.0.0",
+        "domhandler": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
@@ -1344,6 +1398,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -1739,6 +1805,75 @@
       "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
       "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="
     },
+    "node_modules/html-dom-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-7.0.1.tgz",
+      "integrity": "sha512-loRBDTCY/05/jAC63J1X9ID+xjRucmpLkIcQO0IRbOubBo5ucnpUpyXXob9UMXOskMZlu7KPsDP/2KOMelzJNA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/remarkablemark"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "6.0.1",
+        "htmlparser2": "12.0.0"
+      }
+    },
+    "node_modules/html-react-parser": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-6.0.1.tgz",
+      "integrity": "sha512-tIie2HSIk2Ct1tdupjd/DhBjskxN/NL5J4ncbUnk2smBr5UIfpPpitUo0imGfBM0BlOL7ac8RcqEwne1jXTcsQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/remarkablemark"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/html-react-parser"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "6.0.1",
+        "html-dom-parser": "7.0.1",
+        "react-property": "2.0.2",
+        "style-to-js": "1.1.21"
+      },
+      "peerDependencies": {
+        "@types/react": "0.14 || 15 || 16 || 17 || 18 || 19",
+        "react": "0.14 || 15 || 16 || 17 || 18 || 19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-12.0.0.tgz",
+      "integrity": "sha512-Tz7u1i95/g2x2jz81+x0FBVhBhY5aRTvD3tXXdFaljuNdzDLJ8UGNRrTcj2cgQvAg3iW/h77Fz15nLW0L0CrZw==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^3.0.0",
+        "domhandler": "^6.0.0",
+        "domutils": "^4.0.2",
+        "entities": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -1786,6 +1921,12 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -2787,6 +2928,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/react-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
+      "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==",
+      "license": "MIT"
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "16.1.1",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
@@ -3124,6 +3271,24 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
diff --git a/example/package.json b/example/package.json
index 6e15b69c5..5c309432d 100644
--- a/example/package.json
+++ b/example/package.json
@@ -17,8 +17,10 @@
   "dependencies": {
     "@remoteoss/remote-flows": "file://..",
     "axios": "1.15.2",
+    "dompurify": "^3.4.1",
     "dotenv": "17.4.2",
     "express": "5.2.1",
+    "html-react-parser": "^6.0.1",
     "jsonwebtoken": "9.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -28,6 +30,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.59.1",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "24.12.2",
     "@types/react-dom": "19.2.3",
     "@types/react-syntax-highlighter": "15.5.13",
diff --git a/example/src/Components.tsx b/example/src/Components.tsx
index b087ae4e0..d1cc067f1 100644
--- a/example/src/Components.tsx
+++ b/example/src/Components.tsx
@@ -9,6 +9,21 @@ import type {
 import { FileUploader } from '@remoteoss/remote-flows/internals';
 //import { ZendeskDialog } from './ZendeskDialog';
 
+const renderDescription = (
+  desc?: React.ReactNode | string,
+  transformHtml?: (html: string) => React.ReactNode,
+) => {
+  if (!desc) {
+    return null;
+  }
+
+  if (typeof desc === 'string' && transformHtml) {
+    return transformHtml(desc);
+  }
+
+  return <p className='input-description'>{desc}</p>;
+};
+
 // you can define HTML button attributes or event props that exist in your Button like variant, size, etc.
 const Button = ({
   children,
@@ -57,9 +72,7 @@ const Input = ({ field, fieldData, fieldState }: FieldComponentProps) => {
         />
       )}
 
-      {fieldData.description && (
-        <p className='input-description'>{fieldData.description}</p>
-      )}
+      {renderDescription(fieldData.description, fieldData.transformHtml)}
       {fieldState.error && (
         <p className='error-message'>{fieldState.error.message}</p>
       )}
@@ -111,9 +124,7 @@ const Select = ({ field, fieldData, fieldState }: FieldComponentProps) => {
         </div>
       </div>
 
-      {fieldData.description && (
-        <p className='input-description'>{fieldData.description}</p>
-      )}
+      {renderDescription(fieldData.description, fieldData.transformHtml)}
 
       {fieldState.error && (
         <p className='error-message'>{fieldState.error.message}</p>
@@ -134,9 +145,7 @@ const Textarea = ({ field, fieldData, fieldState }: FieldComponentProps) => {
         maxLength={fieldData.maxLength}
         {...field}
       />
-      {fieldData.description && (
-        <p className='input-description'>{fieldData.description}</p>
-      )}
+      {renderDescription(fieldData.description, fieldData.transformHtml)}
       {fieldState.error && (
         <p className='error-message'>{fieldState.error.message}</p>
       )}
@@ -166,9 +175,7 @@ const Radio = ({ field, fieldData, fieldState }: FieldComponentProps) => {
           );
         })}
       </div>
-      {fieldData.description && (
-        <p className='input-description'>{fieldData.description}</p>
-      )}
+      {renderDescription(fieldData.description, fieldData.transformHtml)}
       {hasError && <p className='error-message'>{fieldState.error?.message}</p>}
     </div>
   );
@@ -183,9 +190,7 @@ const Checkbox = ({ field, fieldData, fieldState }: FieldComponentProps) => {
         <input type='checkbox' id={field.name} {...field} />
         <label htmlFor={field.name}>{fieldData.label}</label>
       </div>
-      {fieldData.description && (
-        <p className='input-description'>{fieldData.description}</p>
-      )}
+      {renderDescription(fieldData.description, fieldData.transformHtml)}
       {hasError && <p className='error-message'>{fieldState.error?.message}</p>}
     </div>
   );
@@ -236,9 +241,7 @@ export const Countries = ({
         </div>
       </div>
 
-      {fieldData.description && (
-        <p className='input-description'>{fieldData.description}</p>
-      )}
+      {renderDescription(fieldData.description, fieldData.transformHtml)}
 
       {fieldState.error && (
         <p className='error-message'>{fieldState.error.message}</p>
@@ -283,9 +286,7 @@ const FileUploadField = ({
         accept={fieldData.accept}
         multiple={fieldData.multiple}
       />
-      {fieldData.description && (
-        <p className='input-description'>{fieldData.description}</p>
-      )}
+      {renderDescription(fieldData.description, fieldData.transformHtml)}
       {fieldState.error && (
         <p className='error-message'>{fieldState.error.message}</p>
       )}
@@ -309,9 +310,7 @@ const DatePickerInput = ({
           field?.onChange?.(e.target.value);
         }}
       />
-      {fieldData.description && (
-        <p className='input-description'>{fieldData.description}</p>
-      )}
+      {renderDescription(fieldData.description, fieldData.transformHtml)}
       {fieldState.error && (
         <p className='error-message'>{fieldState.error.message}</p>
       )}
diff --git a/example/src/Onboarding.tsx b/example/src/Onboarding.tsx
index 76a3a3553..1e368062f 100644
--- a/example/src/Onboarding.tsx
+++ b/example/src/Onboarding.tsx
@@ -20,6 +20,8 @@ import { OnboardingAlertStatuses } from './OnboardingAlertStatuses';
 import { RemoteFlows } from './RemoteFlows';
 import { AlertError } from './AlertError';
 import './css/main.css';
+import { transformHtmlToComponents } from './utils/transformHtml';
+import { components } from './Components';
 
 export const InviteSection = ({
   title,
@@ -355,7 +357,11 @@ const OnboardingWithProps = ({
   employmentId,
   externalId,
 }: OnboardingFormData) => (
-  <RemoteFlows proxy={{ url: window.location.origin }}>
+  <RemoteFlows
+    proxy={{ url: window.location.origin }}
+    transformHtmlToComponents={transformHtmlToComponents}
+    components={components}
+  >
     <OnboardingFlow
       companyId={companyId}
       type={type}
@@ -374,7 +380,7 @@ const OnboardingWithProps = ({
           },
           DEU: {
             // Germany
-            contract_details: 1,
+            contract_details: 4,
           },
           BLR: {
             // Belarus
diff --git a/example/src/components/Accordion.tsx b/example/src/components/Accordion.tsx
new file mode 100644
index 000000000..eef34d0a2
--- /dev/null
+++ b/example/src/components/Accordion.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+export const Accordion = ({
+  summary,
+  children,
+}: {
+  summary: React.ReactNode;
+  children: React.ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <details
+      className='accordion border rounded-lg p-4 mb-4'
+      open={isOpen}
+      onToggle={(e) => setIsOpen(e.currentTarget.open)}
+    >
+      <summary className='cursor-pointer font-semibold text-blue-600 hover:text-blue-800'>
+        {summary}
+      </summary>
+      <div className='mt-2 pl-4 border-l-2 border-blue-200'>{children}</div>
+    </details>
+  );
+};
diff --git a/example/src/utils/transformHtml.tsx b/example/src/utils/transformHtml.tsx
new file mode 100644
index 000000000..067e058fc
--- /dev/null
+++ b/example/src/utils/transformHtml.tsx
@@ -0,0 +1,57 @@
+import parse, {
+  domToReact,
+  HTMLReactParserOptions,
+  Element,
+  DOMNode,
+} from 'html-react-parser';
+import DOMPurify from 'dompurify';
+import { $TSFixMe } from '@remoteoss/remote-flows';
+import { Accordion } from '../components/Accordion';
+
+export const transformHtmlToComponents = (htmlContent: string) => {
+  // 1. Sanitize HTML first (IMPORTANT for security)
+  const clean = DOMPurify.sanitize(htmlContent);
+
+  // 2. Define transformation options
+  const options: HTMLReactParserOptions = {
+    replace: (domNode) => {
+      // Check if it's an element node
+      if (domNode.type === 'tag' && domNode.name === 'details') {
+        const element = domNode as Element;
+        const dataComponent = element.attribs?.['data-component'];
+
+        // Transform <details data-component="Accordion"> to custom Accordion
+        if (dataComponent === 'Accordion') {
+          // Find the <summary> tag
+          const summaryNode = element.children?.find(
+            (child: $TSFixMe) =>
+              child.type === 'tag' && child.name === 'summary',
+          );
+
+          // Extract summary content
+          const summary = summaryNode
+            ? domToReact(
+                (summaryNode as Element).children as DOMNode[],
+                options,
+              )
+            : 'Details';
+
+          // Get all other content (not the summary)
+          const content = element.children?.filter(
+            (child: $TSFixMe) =>
+              !(child.type === 'tag' && child.name === 'summary'),
+          );
+
+          return (
+            <Accordion summary={summary}>
+              {domToReact((content || []) as $TSFixMe[], options)}
+            </Accordion>
+          );
+        }
+      }
+    },
+  };
+
+  // 3. Parse and transform
+  return parse(clean, options);
+};
diff --git a/src/RemoteFlowsProvider.tsx b/src/RemoteFlowsProvider.tsx
index 5a3ca8c12..f32cf0cc3 100644
--- a/src/RemoteFlowsProvider.tsx
+++ b/src/RemoteFlowsProvider.tsx
@@ -35,8 +35,10 @@ function RemoteFlowContextWrapper({
 export function FormFieldsProvider({
   children,
   components: userComponents = {},
+  transformHtmlToComponents,
 }: PropsWithChildren<{
   components?: Components;
+  transformHtmlToComponents?: (htmlContent: string) => React.ReactNode;
 }>) {
   // Merge user components with lazy defaults
   // User-provided components take precedence, lazy defaults are only used as fallback
@@ -48,8 +50,17 @@ export function FormFieldsProvider({
     } as Components;
   }, [userComponents]);
 
+  // Memoize the context value to avoid unnecessary re-renders
+  const contextValue = useMemo(
+    () => ({
+      components: resolvedComponents,
+      transformHtmlToComponents,
+    }),
+    [resolvedComponents, transformHtmlToComponents],
+  );
+
   return (
-    <FormFieldsContext.Provider value={{ components: resolvedComponents }}>
+    <FormFieldsContext.Provider value={contextValue}>
       <Suspense
         fallback={
           <DelayedFallback fallback={<FormLoadingFallback />} delay={200} />
@@ -67,6 +78,7 @@ export function RemoteFlows({
   auth,
   children,
   components,
+  transformHtmlToComponents,
   theme,
   proxy,
   environment,
@@ -89,7 +101,10 @@ export function RemoteFlows({
         client={remoteApiClient}
       >
         <QueryClientProvider client={queryClient}>
-          <FormFieldsProvider components={components}>
+          <FormFieldsProvider
+            components={components}
+            transformHtmlToComponents={transformHtmlToComponents}
+          >
             <RemoteFlowContextWrapper
               environment={environment}
               debug={debug}
diff --git a/src/components/form/fields/CheckBoxField.tsx b/src/components/form/fields/CheckBoxField.tsx
index b1633b78f..2db4df50a 100644
--- a/src/components/form/fields/CheckBoxField.tsx
+++ b/src/components/form/fields/CheckBoxField.tsx
@@ -1,5 +1,5 @@
 import { FormField } from '@/src/components/ui/form';
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField } from '@/src/types/remoteFlows';
 import {
   ControllerRenderProps,
@@ -28,6 +28,7 @@ export function CheckBoxField({
   ...rest
 }: CheckBoxFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control } = useFormContext();
 
   const handleCheckboxChange = (
@@ -70,6 +71,7 @@ export function CheckBoxField({
           defaultValue,
           multiple,
           options,
+          transformHtml,
           ...rest,
         };
         return (
diff --git a/src/components/form/fields/CountryField.tsx b/src/components/form/fields/CountryField.tsx
index e0479966a..96eef23a0 100644
--- a/src/components/form/fields/CountryField.tsx
+++ b/src/components/form/fields/CountryField.tsx
@@ -1,4 +1,4 @@
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField, $TSFixMe } from '@/src/types/remoteFlows';
 import { useFormContext } from 'react-hook-form';
 import { FormField } from '../../ui/form';
@@ -26,6 +26,7 @@ export function CountryField({
 }: CountryFieldProps) {
   const { control } = useFormContext();
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
 
   return (
     <FormField
@@ -46,6 +47,7 @@ export function CountryField({
           description,
           onChange,
           $meta,
+          transformHtml,
           ...rest,
         };
         return (
diff --git a/src/components/form/fields/DatePickerField.tsx b/src/components/form/fields/DatePickerField.tsx
index c5a1be05f..1fe25b222 100644
--- a/src/components/form/fields/DatePickerField.tsx
+++ b/src/components/form/fields/DatePickerField.tsx
@@ -1,7 +1,7 @@
 import { useFormContext } from 'react-hook-form';
 import { FormField } from '@/src/components/ui/form';
 
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField, $TSFixMe } from '@/src/types/remoteFlows';
 import { getMinStartDate } from '@/src/components/form/utils';
 
@@ -21,6 +21,7 @@ export function DatePickerField({
   ...rest
 }: DatePickerFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control } = useFormContext();
 
   let minDateValue: Date;
@@ -51,6 +52,7 @@ export function DatePickerField({
           label,
           name,
           onChange,
+          transformHtml,
           ...(minDateValue && { minDate: minDateValue.toISOString() }),
           ...(maxDateValue && { maxDate: maxDateValue.toISOString() }),
           ...rest,
diff --git a/src/components/form/fields/EmailField.tsx b/src/components/form/fields/EmailField.tsx
index 41831b685..2ab439e77 100644
--- a/src/components/form/fields/EmailField.tsx
+++ b/src/components/form/fields/EmailField.tsx
@@ -1,4 +1,4 @@
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { useFormContext } from 'react-hook-form';
 import { FormField } from '../../ui/form';
 import { TextFieldProps } from './TextField';
@@ -10,6 +10,7 @@ type EmailFieldProps = TextFieldProps & {
 
 export function EmailField(props: EmailFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control } = useFormContext();
 
   const Component = props.component || components.email;
@@ -23,6 +24,7 @@ export function EmailField(props: EmailFieldProps) {
       control={control}
       name={props.name}
       render={({ field, fieldState }) => {
+        const customEmailFieldProps = { ...props, transformHtml };
         return (
           <Component
             field={{
@@ -33,7 +35,7 @@ export function EmailField(props: EmailFieldProps) {
               },
             }}
             fieldState={fieldState}
-            fieldData={props}
+            fieldData={customEmailFieldProps}
           />
         );
       }}
diff --git a/src/components/form/fields/FieldSetField.tsx b/src/components/form/fields/FieldSetField.tsx
index 35e4e5d7f..12cdf9dea 100644
--- a/src/components/form/fields/FieldSetField.tsx
+++ b/src/components/form/fields/FieldSetField.tsx
@@ -2,16 +2,17 @@ import { useFormContext } from 'react-hook-form';
 import { Fragment, useEffect, useRef } from 'react';
 import omit from 'lodash.omit';
 import { baseFields } from '@/src/components/form/fields/baseFields';
-import { cn, sanitizeHtml } from '@/src/lib/utils';
+import { cn } from '@/src/lib/utils';
 import { $TSFixMe, Components } from '@/src/types/remoteFlows';
 import { Statement } from '@/src/components/form/Statement';
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { ZendeskTriggerButton } from '@/src/components/shared/zendesk-drawer/ZendeskTriggerButton';
 import { FieldsetToggleButtonDefault } from '@/src/components/form/fields/default/FieldsetToggleButtonDefault';
 import { BaseTypes, SupportedTypes } from './types';
 import { StatementComponentProps } from '@/src/types/fields';
 import { checkFieldHasForcedValue } from '@/src/components/form/utils';
 import { ForcedValueField } from '@/src/components/form/fields/ForcedValueField';
+import { transformDescription } from '@/src/lib/transformDescription';
 
 type FieldBase = {
   label: string;
@@ -84,6 +85,7 @@ export function FieldSetField({
   const { helpCenter } = meta || {};
   const { watch, setValue, trigger, formState } = useFormContext();
   const { components: formComponents } = useFormFields();
+  const transformHtml = useTransformer();
 
   // Get expanded state from form state if stateField is provided
   const stateField = features?.toggle?.stateField;
@@ -210,10 +212,9 @@ export function FieldSetField({
       {isExpanded && (
         <div id={contentId} aria-labelledby={headerId} role='region'>
           {description ? (
-            <div
-              className='mb-5 RemoteFlows__FieldSetField__Description'
-              dangerouslySetInnerHTML={{ __html: sanitizeHtml(description) }}
-            />
+            <div className='mb-5 RemoteFlows__FieldSetField__Description'>
+              {transformDescription(description, transformHtml)}
+            </div>
           ) : null}
           <div className='grid gap-4'>
             {fields.map((field: $TSFixMe) => {
diff --git a/src/components/form/fields/FileUploadField.tsx b/src/components/form/fields/FileUploadField.tsx
index 6aa7ed16a..7f361137a 100644
--- a/src/components/form/fields/FileUploadField.tsx
+++ b/src/components/form/fields/FileUploadField.tsx
@@ -1,4 +1,4 @@
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField } from '@/src/types/remoteFlows';
 import {
   ControllerRenderProps,
@@ -47,6 +47,7 @@ export function FileUploadField({
   ...rest
 }: FileUploadFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control, setError, clearErrors } = useFormContext();
 
   const handleOnChange = async (
@@ -81,6 +82,7 @@ export function FileUploadField({
           multiple,
           accept,
           maxFileSize: maxSize,
+          transformHtml,
           ...rest,
         };
 
diff --git a/src/components/form/fields/ForcedValueField.tsx b/src/components/form/fields/ForcedValueField.tsx
index 8e77f0572..4ac8b0455 100644
--- a/src/components/form/fields/ForcedValueField.tsx
+++ b/src/components/form/fields/ForcedValueField.tsx
@@ -1,7 +1,9 @@
 import { useFormContext } from 'react-hook-form';
 import { sanitizeHtml } from '@/src/lib/utils';
 import { useEffect } from 'react';
-import { ZendeskTriggerButton } from '@/src/components/shared/zendesk-drawer/ZendeskTriggerButton';
+import { FormDescription } from '@/src/components/ui/form';
+import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
+import { HelpCenterDataProps } from '@/src/types/fields';
 
 const Description = ({
   name,
@@ -10,27 +12,22 @@ const Description = ({
 }: {
   name: string;
   description: string;
-  helpCenter?: {
-    callToAction: string;
-    id: number;
-    url: string;
-    label: string;
-  };
+  helpCenter?: HelpCenterDataProps;
 }) => {
   return (
     <span>
-      <span
+      <FormDescription
+        as='span'
         className={`text-xs RemoteFlows__ForcedValue__Description__${name}`}
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(description) }}
-      />
-      {helpCenter?.callToAction && helpCenter?.id && (
-        <ZendeskTriggerButton
-          className='RemoteFlows__ForcedValue__HelpCenterLink'
-          zendeskId={helpCenter.id}
-        >
-          {helpCenter.callToAction}
-        </ZendeskTriggerButton>
-      )}
+        helpCenter={
+          <HelpCenter
+            className='RemoteFlows__ForcedValue__HelpCenterLink'
+            helpCenter={helpCenter}
+          />
+        }
+      >
+        {description}
+      </FormDescription>
     </span>
   );
 };
@@ -44,12 +41,7 @@ export type ForcedValueFieldProps = {
     description?: string;
   };
   label: string;
-  helpCenter?: {
-    callToAction: string;
-    id: number;
-    url: string;
-    label: string;
-  };
+  helpCenter?: HelpCenterDataProps;
 };
 
 export function ForcedValueField({
@@ -61,11 +53,9 @@ export function ForcedValueField({
   helpCenter,
 }: ForcedValueFieldProps) {
   const { setValue } = useFormContext();
-  const descriptionSanitized = sanitizeHtml(
-    statement?.description || description,
-  );
+  const forcedValueDescription = statement?.description || description;
 
-  const titleSanitized = statement?.title
+  const forcedValueTitle = statement?.title
     ? sanitizeHtml(statement?.title)
     : sanitizeHtml(label);
 
@@ -74,7 +64,7 @@ export function ForcedValueField({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const isHiddenValue = !descriptionSanitized && !statement?.title;
+  const isHiddenValue = !forcedValueDescription && !statement?.title;
 
   if (isHiddenValue) {
     return null;
@@ -82,17 +72,17 @@ export function ForcedValueField({
 
   return (
     <div>
-      {titleSanitized && (
+      {forcedValueTitle && (
         <p
           className={`text-sm RemoteFlows__ForcedValue__Title__${name}`}
           dangerouslySetInnerHTML={{
-            __html: titleSanitized,
+            __html: forcedValueTitle,
           }}
         />
       )}
       <Description
         name={name}
-        description={descriptionSanitized}
+        description={forcedValueDescription}
         helpCenter={helpCenter}
       />
     </div>
diff --git a/src/components/form/fields/MultiSelectField.tsx b/src/components/form/fields/MultiSelectField.tsx
index 01f692364..ff2593ab6 100644
--- a/src/components/form/fields/MultiSelectField.tsx
+++ b/src/components/form/fields/MultiSelectField.tsx
@@ -1,4 +1,4 @@
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField, $TSFixMe } from '@/src/types/remoteFlows';
 import { useFormContext } from 'react-hook-form';
 import { FormField } from '../../ui/form';
@@ -23,6 +23,7 @@ export function MultiSelectField({
 }: MultiSelectFieldProps) {
   const { control } = useFormContext();
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
 
   return (
     <FormField
@@ -42,6 +43,7 @@ export function MultiSelectField({
           defaultValue,
           description,
           onChange,
+          transformHtml,
           ...rest,
         };
         return (
diff --git a/src/components/form/fields/NumberField.tsx b/src/components/form/fields/NumberField.tsx
index ed8bed209..702b16531 100644
--- a/src/components/form/fields/NumberField.tsx
+++ b/src/components/form/fields/NumberField.tsx
@@ -1,5 +1,5 @@
 import { useFormContext } from 'react-hook-form';
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { FormField } from '@/src/components/ui/form';
 import { Components } from '@/src/types/remoteFlows';
 import { TextFieldProps } from './TextField';
@@ -11,6 +11,7 @@ export type NumberFieldProps = TextFieldProps & {
 
 export function NumberField(props: NumberFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control } = useFormContext();
 
   const Component = props.component || components.number;
@@ -22,6 +23,7 @@ export function NumberField(props: NumberFieldProps) {
       control={control}
       name={props.name}
       render={({ field, fieldState }) => {
+        const customNumberFieldProps = { ...props, transformHtml };
         return (
           <Component
             field={{
@@ -32,7 +34,7 @@ export function NumberField(props: NumberFieldProps) {
               },
             }}
             fieldState={fieldState}
-            fieldData={props}
+            fieldData={customNumberFieldProps}
           />
         );
       }}
diff --git a/src/components/form/fields/RadioGroupField.tsx b/src/components/form/fields/RadioGroupField.tsx
index 964485609..e45fca829 100644
--- a/src/components/form/fields/RadioGroupField.tsx
+++ b/src/components/form/fields/RadioGroupField.tsx
@@ -1,5 +1,5 @@
 import { FormField } from '@/src/components/ui/form';
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField } from '@/src/types/remoteFlows';
 import { useFormContext } from 'react-hook-form';
 
@@ -19,6 +19,7 @@ export function RadioGroupField({
   ...rest
 }: RadioGroupFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control } = useFormContext();
   return (
     <FormField
@@ -36,6 +37,7 @@ export function RadioGroupField({
           description,
           label,
           options,
+          transformHtml,
           ...rest,
         };
         return (
diff --git a/src/components/form/fields/SelectField.tsx b/src/components/form/fields/SelectField.tsx
index 8bffa86d5..c6432530b 100644
--- a/src/components/form/fields/SelectField.tsx
+++ b/src/components/form/fields/SelectField.tsx
@@ -1,4 +1,4 @@
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField } from '@/src/types/remoteFlows';
 import { useFormContext } from 'react-hook-form';
 import { FormField } from '@/src/components/ui/form';
@@ -23,6 +23,7 @@ export function SelectField({
 }: SelectFieldProps) {
   const { control } = useFormContext();
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
 
   return (
     <FormField
@@ -43,6 +44,7 @@ export function SelectField({
           defaultValue,
           description,
           onChange,
+          transformHtml,
           ...rest,
         };
         return (
diff --git a/src/components/form/fields/TelField.tsx b/src/components/form/fields/TelField.tsx
index a6f54cd3b..83a284bb7 100644
--- a/src/components/form/fields/TelField.tsx
+++ b/src/components/form/fields/TelField.tsx
@@ -1,13 +1,13 @@
 import { FormField } from '@/src/components/ui/form';
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components } from '@/src/types/remoteFlows';
+import { TelFieldDataProps, TelFieldComponentProps } from '@/src/types/fields';
 import {
   useFormContext,
   ControllerFieldState,
   ControllerRenderProps,
   FieldValues,
 } from 'react-hook-form';
-import { TelFieldComponentProps, TelFieldDataProps } from '@/src/types/fields';
 import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 
 export type Country = {
@@ -286,6 +286,7 @@ export function TelField({
   ...rest
 }: TelFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control } = useFormContext();
 
   return (
@@ -302,6 +303,7 @@ export function TelField({
           name,
           description,
           label,
+          transformHtml,
           ...rest,
         };
 
diff --git a/src/components/form/fields/TextAreaField.tsx b/src/components/form/fields/TextAreaField.tsx
index df82ff4d1..bafa61e75 100644
--- a/src/components/form/fields/TextAreaField.tsx
+++ b/src/components/form/fields/TextAreaField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField } from '@/src/types/remoteFlows';
 import { useFormContext } from 'react-hook-form';
 import { FormField } from '@/src/components/ui/form';
@@ -20,6 +20,7 @@ export function TextAreaField({
   ...rest
 }: TextAreaFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control } = useFormContext();
   return (
     <FormField
@@ -35,6 +36,7 @@ export function TextAreaField({
           description,
           label,
           maxLength,
+          transformHtml,
           ...rest,
         };
         return (
diff --git a/src/components/form/fields/TextField.tsx b/src/components/form/fields/TextField.tsx
index 404607576..34d322e20 100644
--- a/src/components/form/fields/TextField.tsx
+++ b/src/components/form/fields/TextField.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { Components, JSFField, $TSFixMe } from '@/src/types/remoteFlows';
 import { useFormContext } from 'react-hook-form';
 import { FormField } from '../../ui/form';
@@ -37,6 +37,7 @@ export function TextField({
   ...rest
 }: TextFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { control } = useFormContext();
 
   return (
@@ -59,6 +60,7 @@ export function TextField({
           metadata: additionalProps,
           maxLength,
           includeErrorMessage,
+          transformHtml,
           ...rest,
         };
         return (
diff --git a/src/components/form/fields/WorkScheduleField.tsx b/src/components/form/fields/WorkScheduleField.tsx
index d97f2832e..85af228fd 100644
--- a/src/components/form/fields/WorkScheduleField.tsx
+++ b/src/components/form/fields/WorkScheduleField.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { JSFField, $TSFixMe } from '@/src/types/remoteFlows';
-import { useFormFields } from '@/src/context';
+import { useFormFields, useTransformer } from '@/src/context';
 import { FormField } from '@/src/components/ui/form';
 import { Components } from '@/src/types/remoteFlows';
 
@@ -25,6 +25,7 @@ type WorkScheduleFormData = {
 
 export function WorkScheduleField(props: WorkScheduleFieldProps) {
   const { components } = useFormFields();
+  const transformHtml = useTransformer();
   const { setValue, control, watch } = useFormContext();
   const watchedSchedule = watch(props.name);
   const [currentSchedule, setCurrentSchedule] =
@@ -53,6 +54,7 @@ export function WorkScheduleField(props: WorkScheduleFieldProps) {
     ...props,
     onSubmit,
     currentSchedule,
+    transformHtml,
     defaultFormattedValue: {
       workHoursSummary,
       breakSummary,
diff --git a/src/components/form/fields/tests/CheckBoxField.test.tsx b/src/components/form/fields/tests/CheckBoxField.test.tsx
index 2a38515fe..29b0d259c 100644
--- a/src/components/form/fields/tests/CheckBoxField.test.tsx
+++ b/src/components/form/fields/tests/CheckBoxField.test.tsx
@@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 describe('CheckBoxField Component', () => {
diff --git a/src/components/form/fields/tests/DatePickerField.test.tsx b/src/components/form/fields/tests/DatePickerField.test.tsx
index 513de8bfb..65f59ef20 100644
--- a/src/components/form/fields/tests/DatePickerField.test.tsx
+++ b/src/components/form/fields/tests/DatePickerField.test.tsx
@@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 vi.mock('date-fns', async () => {
diff --git a/src/components/form/fields/tests/FieldSetField.test.tsx b/src/components/form/fields/tests/FieldSetField.test.tsx
index 619c3c50e..db3cc5f79 100644
--- a/src/components/form/fields/tests/FieldSetField.test.tsx
+++ b/src/components/form/fields/tests/FieldSetField.test.tsx
@@ -8,6 +8,7 @@ import { TextFieldDefault } from '@/src/components/form/fields/default/TextField
 
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 vi.mock('@/src/components/shared/zendesk-drawer/ZendeskTriggerButton', () => ({
diff --git a/src/components/form/fields/tests/FileUploadField.test.tsx b/src/components/form/fields/tests/FileUploadField.test.tsx
index 2748cc08a..105d0544d 100644
--- a/src/components/form/fields/tests/FileUploadField.test.tsx
+++ b/src/components/form/fields/tests/FileUploadField.test.tsx
@@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 describe('FileUploadField Component', () => {
diff --git a/src/components/form/fields/tests/MultiSelectField.test.tsx b/src/components/form/fields/tests/MultiSelectField.test.tsx
index e9f52cc99..02c32291b 100644
--- a/src/components/form/fields/tests/MultiSelectField.test.tsx
+++ b/src/components/form/fields/tests/MultiSelectField.test.tsx
@@ -12,6 +12,7 @@ type MultiSelectFieldProps = React.ComponentProps<typeof MultiSelectField>;
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 describe('MultiSelectField Component', () => {
diff --git a/src/components/form/fields/tests/NumberField.test.tsx b/src/components/form/fields/tests/NumberField.test.tsx
index 31717ddbf..53d8b85db 100644
--- a/src/components/form/fields/tests/NumberField.test.tsx
+++ b/src/components/form/fields/tests/NumberField.test.tsx
@@ -12,6 +12,7 @@ import { TextFieldDefault } from '@/src/components/form/fields/default/TextField
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 describe('NumberField Component', () => {
diff --git a/src/components/form/fields/tests/RadioGroupField.test.tsx b/src/components/form/fields/tests/RadioGroupField.test.tsx
index 08d4868e6..a9ff351e3 100644
--- a/src/components/form/fields/tests/RadioGroupField.test.tsx
+++ b/src/components/form/fields/tests/RadioGroupField.test.tsx
@@ -21,6 +21,7 @@ type RadioGroupFieldProps = JSFField & {
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 describe('RadioGroupField Component', () => {
diff --git a/src/components/form/fields/tests/SelectField.test.tsx b/src/components/form/fields/tests/SelectField.test.tsx
index 029e3f81e..585a1145d 100644
--- a/src/components/form/fields/tests/SelectField.test.tsx
+++ b/src/components/form/fields/tests/SelectField.test.tsx
@@ -12,6 +12,7 @@ type SelectFieldProps = React.ComponentProps<typeof SelectField>;
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 describe('SelectField Component', () => {
diff --git a/src/components/form/fields/tests/TelField.test.tsx b/src/components/form/fields/tests/TelField.test.tsx
index e01b3a786..2b5186b91 100644
--- a/src/components/form/fields/tests/TelField.test.tsx
+++ b/src/components/form/fields/tests/TelField.test.tsx
@@ -10,6 +10,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 // Helper function to interact with Radix UI Select
diff --git a/src/components/form/fields/tests/TextAreaField.test.tsx b/src/components/form/fields/tests/TextAreaField.test.tsx
index 570cad7a8..55390c2d4 100644
--- a/src/components/form/fields/tests/TextAreaField.test.tsx
+++ b/src/components/form/fields/tests/TextAreaField.test.tsx
@@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 describe('TextAreaField Component', () => {
diff --git a/src/components/form/fields/tests/TextField.test.tsx b/src/components/form/fields/tests/TextField.test.tsx
index 4f2f47266..ad6e5c962 100644
--- a/src/components/form/fields/tests/TextField.test.tsx
+++ b/src/components/form/fields/tests/TextField.test.tsx
@@ -10,6 +10,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 describe('TextField Component', () => {
diff --git a/src/components/form/fields/tests/WorkScheduleField.test.tsx b/src/components/form/fields/tests/WorkScheduleField.test.tsx
index 90f735da2..d64a2e137 100644
--- a/src/components/form/fields/tests/WorkScheduleField.test.tsx
+++ b/src/components/form/fields/tests/WorkScheduleField.test.tsx
@@ -14,6 +14,7 @@ import { TextFieldDefault } from '@/src/components/form/fields/default/TextField
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 type WorkScheduleFieldProps = JSFField & {
diff --git a/src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx b/src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx
index d5f500000..2f7a4c63f 100644
--- a/src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx
+++ b/src/components/form/tests/JSONSchemaFormConditionalInputType.test.tsx
@@ -16,6 +16,7 @@ vi.mock('@/src/context', () => ({
       select: SelectFieldDefault,
     },
   })),
+  useTransformer: vi.fn(),
 }));
 
 describe('JSONSchemaForm - Conditional inputType Changes', () => {
diff --git a/src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx b/src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx
index 426f9ef81..f7e75cdeb 100644
--- a/src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx
+++ b/src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx
@@ -18,6 +18,7 @@ vi.mock('@/src/context', () => ({
       statement: MockStatement,
     },
   })),
+  useTransformer: vi.fn(),
 }));
 
 const CustomToggle = ({
diff --git a/src/components/shared/zendesk-drawer/HelpCenter.tsx b/src/components/shared/zendesk-drawer/HelpCenter.tsx
index f0fe47a6f..cc954cf0a 100644
--- a/src/components/shared/zendesk-drawer/HelpCenter.tsx
+++ b/src/components/shared/zendesk-drawer/HelpCenter.tsx
@@ -3,15 +3,16 @@ import { HelpCenterDataProps } from '@/src/types/fields';
 
 type HelpCenterProps = {
   helpCenter?: HelpCenterDataProps;
+  className?: string;
 };
 
-export function HelpCenter({ helpCenter }: HelpCenterProps) {
+export function HelpCenter({ helpCenter, className = '' }: HelpCenterProps) {
   if (!helpCenter || !helpCenter.id || !helpCenter.callToAction) {
     return null;
   }
 
   return (
-    <ZendeskTriggerButton zendeskId={helpCenter.id}>
+    <ZendeskTriggerButton zendeskId={helpCenter.id} className={className}>
       {helpCenter.callToAction}
     </ZendeskTriggerButton>
   );
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index e485d3814..647772a94 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -11,6 +11,7 @@ import {
 
 import { cn, sanitizeHtml } from '@/src/lib/utils';
 import { Label } from '@/src/components/ui/label';
+import { useTransformer } from '@/src/context';
 
 const Form = FormProvider;
 
@@ -144,8 +145,26 @@ function FormDescription<T extends React.ElementType = 'p'>({
 } & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className'>) {
   const { formDescriptionId } = useFormField();
   const Component = as || 'p';
+  const transformHtmlToComponents = useTransformer();
 
   if (typeof children === 'string') {
+    // If custom transformer provided, use it (transformer receives raw unsanitized HTML)
+    if (transformHtmlToComponents) {
+      const transformed = transformHtmlToComponents(children);
+      return (
+        <Component
+          data-slot='form-description'
+          id={formDescriptionId}
+          className={cn('text-base-color text-xs', className)}
+          data-sanitized='false'
+          {...props}
+        >
+          {transformed} {helpCenter && helpCenter}
+        </Component>
+      );
+    }
+
+    // Fallback to existing sanitization (when no transformer provided)
     return (
       <>
         <Component
diff --git a/src/components/ui/tests/form.test.tsx b/src/components/ui/tests/form.test.tsx
index b23b8b5a1..ea55a7cb7 100644
--- a/src/components/ui/tests/form.test.tsx
+++ b/src/components/ui/tests/form.test.tsx
@@ -1,9 +1,12 @@
 import { FormDescription } from '@/src/components/ui/form';
 import { screen, render } from '@testing-library/react';
 import { TestProviders } from '@/src/tests/testHelpers';
-import { PropsWithChildren } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { PropsWithChildren, ReactNode } from 'react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { $TSFixMe } from '@/src/types/remoteFlows';
+import { FormFieldsContext } from '@/src/context';
+import { lazyDefaultComponents } from '@/src/lazy-default-components';
+import { FieldComponentProps, FieldDataProps } from '@/src/types/fields';
 
 const wrapper = ({ children }: PropsWithChildren) => {
   const TestComponent = () => {
@@ -17,6 +20,26 @@ const wrapper = ({ children }: PropsWithChildren) => {
   );
 };
 
+const createWrapperWithTransformer = (
+  transformHtml?: (html: string) => ReactNode,
+) => {
+  return ({ children }: PropsWithChildren) => {
+    const methods = useForm();
+    return (
+      <TestProviders>
+        <FormFieldsContext.Provider
+          value={{
+            components: lazyDefaultComponents,
+            transformHtmlToComponents: transformHtml,
+          }}
+        >
+          <FormProvider {...methods}>{children}</FormProvider>
+        </FormFieldsContext.Provider>
+      </TestProviders>
+    );
+  };
+};
+
 describe('Form', () => {
   describe('FormDescription', () => {
     it('should render the description text when passing a normal string', () => {
@@ -100,4 +123,242 @@ describe('Form', () => {
       expect(linkWithRel.getAttribute('rel')).toBe('noreferrer noopener');
     });
   });
+
+  describe('FormDescription with HTML transformer', () => {
+    it('should use the custom transformer when provided', () => {
+      const customTransformer = (html: string) => {
+        if (html.includes('<strong>')) {
+          return <b data-testid='custom-bold'>Important text</b>;
+        }
+        return <span>{html}</span>;
+      };
+
+      render(
+        <FormDescription>{'<strong>Important text</strong>'}</FormDescription>,
+        {
+          wrapper: createWrapperWithTransformer(customTransformer),
+        },
+      );
+
+      expect(screen.getByTestId('custom-bold')).toBeInTheDocument();
+      expect(screen.getByTestId('custom-bold').textContent).toBe(
+        'Important text',
+      );
+    });
+
+    it('should transform complex HTML with details element (Accordion pattern)', () => {
+      const accordionTransformer = (html: string) => {
+        if (html.includes('data-component="Accordion"')) {
+          return (
+            <div data-testid='custom-accordion'>
+              <div data-testid='accordion-summary'>Accordion Title</div>
+              <div data-testid='accordion-content'>Accordion Content</div>
+            </div>
+          );
+        }
+        return <span dangerouslySetInnerHTML={{ __html: html }} />;
+      };
+
+      render(
+        <FormDescription>
+          {
+            '<details data-component="Accordion"><summary>Title</summary><p>Content</p></details>'
+          }
+        </FormDescription>,
+        {
+          wrapper: createWrapperWithTransformer(accordionTransformer),
+        },
+      );
+
+      expect(screen.getByTestId('custom-accordion')).toBeInTheDocument();
+      expect(screen.getByTestId('accordion-summary')).toBeInTheDocument();
+      expect(screen.getByTestId('accordion-content')).toBeInTheDocument();
+    });
+
+    it('should not invoke transformer for non-string children', () => {
+      const transformerSpy = vi.fn((html: string) => html);
+
+      const CustomComponent = () => (
+        <span data-testid='custom-component'>Custom React Component</span>
+      );
+
+      render(
+        <FormDescription>
+          <CustomComponent />
+        </FormDescription>,
+        {
+          wrapper: createWrapperWithTransformer(transformerSpy),
+        },
+      );
+
+      expect(transformerSpy).not.toHaveBeenCalled();
+      expect(screen.getByTestId('custom-component')).toBeInTheDocument();
+    });
+
+    it('should pass raw unsanitized HTML to transformer', () => {
+      let receivedHtml = '';
+      const capturingTransformer = (html: string) => {
+        receivedHtml = html;
+        return <div data-testid='captured'>{html}</div>;
+      };
+
+      const rawHtml = '<script>alert("test")</script><p>Content</p>';
+      render(<FormDescription>{rawHtml}</FormDescription>, {
+        wrapper: createWrapperWithTransformer(capturingTransformer),
+      });
+
+      expect(receivedHtml).toBe(rawHtml);
+      expect(screen.getByTestId('captured')).toBeInTheDocument();
+    });
+
+    it('should sanitize dangerous HTML when no transformer is provided', () => {
+      render(
+        <FormDescription>
+          {
+            '<script>alert("xss")</script><p data-testid="safe">Safe content</p>'
+          }
+        </FormDescription>,
+        {
+          wrapper: createWrapperWithTransformer(undefined),
+        },
+      );
+
+      expect(screen.queryByText('alert("xss")')).not.toBeInTheDocument();
+      expect(screen.getByTestId('safe')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom field components with transformer', () => {
+    const createCustomTextField = (
+      renderLogic?: (fieldData: FieldDataProps) => React.ReactNode,
+    ) => {
+      return ({ field, fieldData }: FieldComponentProps) => {
+        const renderDescription = () => {
+          if (renderLogic) {
+            return renderLogic(fieldData);
+          }
+
+          if (
+            fieldData.transformHtml &&
+            typeof fieldData.description === 'string'
+          ) {
+            return fieldData.transformHtml(fieldData.description);
+          }
+          return (
+            <span data-testid='fallback-description'>
+              {fieldData.description}
+            </span>
+          );
+        };
+
+        return (
+          <div>
+            <input {...field} data-testid='custom-input' />
+            {fieldData.description && (
+              <div data-testid='description-container'>
+                {renderDescription()}
+              </div>
+            )}
+          </div>
+        );
+      };
+    };
+
+    const renderFieldWithTransformer = (
+      description: string,
+      transformer?: (html: string) => React.ReactNode,
+      customComponent?: React.ComponentType<FieldComponentProps>,
+    ) => {
+      const CustomField = customComponent || createCustomTextField();
+      const transformerFn = transformer;
+
+      const Wrapper = ({ children }: PropsWithChildren) => {
+        const methods = useForm({ defaultValues: { testField: '' } });
+        return (
+          <TestProviders>
+            <FormFieldsContext.Provider
+              value={{
+                components: {
+                  ...lazyDefaultComponents,
+                  text: CustomField as $TSFixMe,
+                },
+                transformHtmlToComponents: transformerFn,
+              }}
+            >
+              <FormProvider {...methods}>{children}</FormProvider>
+            </FormFieldsContext.Provider>
+          </TestProviders>
+        );
+      };
+
+      const TestFormField = () => {
+        const { control } = useForm({ defaultValues: { testField: '' } });
+        return (
+          <Controller
+            name='testField'
+            control={control}
+            render={({ field, fieldState }) => (
+              <CustomField
+                field={field as $TSFixMe}
+                fieldState={fieldState}
+                fieldData={{
+                  label: 'Test Field',
+                  description,
+                  transformHtml: transformerFn,
+                }}
+              />
+            )}
+          />
+        );
+      };
+
+      return render(<TestFormField />, { wrapper: Wrapper });
+    };
+
+    it('should pass transformHtml to custom field component via fieldData', () => {
+      const customTransformer = (html: string) => (
+        <span data-testid='transformed-text'>{html}</span>
+      );
+
+      renderFieldWithTransformer(
+        '<strong>Test description</strong>',
+        customTransformer,
+      );
+
+      expect(screen.getByTestId('transformed-text')).toBeInTheDocument();
+      expect(screen.getByTestId('description-container')).toBeInTheDocument();
+    });
+
+    it('should work when no transformer is provided (fallback)', () => {
+      renderFieldWithTransformer('Simple description text', undefined);
+
+      expect(screen.getByTestId('fallback-description')).toBeInTheDocument();
+      expect(screen.getByTestId('fallback-description').textContent).toBe(
+        'Simple description text',
+      );
+    });
+
+    it('should transform HTML descriptions in custom field components', () => {
+      const accordionTransformer = (html: string) => {
+        if (html.includes('data-component="Accordion"')) {
+          return (
+            <div data-testid='accordion-component'>
+              <button data-testid='accordion-toggle'>Click to expand</button>
+              <div data-testid='accordion-body'>Accordion content</div>
+            </div>
+          );
+        }
+        return <span dangerouslySetInnerHTML={{ __html: html }} />;
+      };
+
+      renderFieldWithTransformer(
+        '<details data-component="Accordion"><summary>Title</summary><p>Content</p></details>',
+        accordionTransformer,
+      );
+
+      expect(screen.getByTestId('accordion-component')).toBeInTheDocument();
+      expect(screen.getByTestId('accordion-toggle')).toBeInTheDocument();
+      expect(screen.getByTestId('accordion-body')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/context.ts b/src/context.ts
index 9bbd9c533..9e173e15a 100644
--- a/src/context.ts
+++ b/src/context.ts
@@ -1,9 +1,10 @@
 import { Client } from '@/src/client/client';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, ReactNode } from 'react';
 import { Components } from './types/remoteFlows';
 
 export const FormFieldsContext = createContext<{
   components: Components;
+  transformHtmlToComponents?: (htmlContent: string) => ReactNode;
 } | null>(null);
 
 export const useFormFields = () => {
@@ -17,6 +18,12 @@ export const useFormFields = () => {
   };
 };
 
+// Internal hook for accessing transformer (used during field processing and in FormDescription/FieldSetField)
+export const useTransformer = () => {
+  const context = useContext(FormFieldsContext);
+  return context?.transformHtmlToComponents;
+};
+
 export const RemoteFlowContext = createContext<{ client: Client | null }>({
   client: null,
 });
diff --git a/src/flows/Onboarding/tests/OnboardingBack.test.tsx b/src/flows/Onboarding/tests/OnboardingBack.test.tsx
index a3d309d2d..c49ade453 100644
--- a/src/flows/Onboarding/tests/OnboardingBack.test.tsx
+++ b/src/flows/Onboarding/tests/OnboardingBack.test.tsx
@@ -8,6 +8,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 vi.mock('@/src/flows/Onboarding/context', () => ({
diff --git a/src/flows/Onboarding/tests/OnboardingSubmit.test.tsx b/src/flows/Onboarding/tests/OnboardingSubmit.test.tsx
index 2af773346..f83b0843b 100644
--- a/src/flows/Onboarding/tests/OnboardingSubmit.test.tsx
+++ b/src/flows/Onboarding/tests/OnboardingSubmit.test.tsx
@@ -8,6 +8,7 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 // Mock dependencies
 vi.mock('@/src/context', () => ({
   useFormFields: vi.fn(),
+  useTransformer: vi.fn(),
 }));
 
 vi.mock('@/src/flows/Onboarding/context', () => ({
diff --git a/src/lib/transformDescription.tsx b/src/lib/transformDescription.tsx
new file mode 100644
index 000000000..81339e18a
--- /dev/null
+++ b/src/lib/transformDescription.tsx
@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { sanitizeHtml } from './utils';
+
+/**
+ * INTERNAL helper function to transform HTML descriptions into React components.
+ * Used internally by FormDescription and FieldSetField.
+ *
+ * NOT EXPORTED - Partners should implement their own version if needed.
+ * This allows partners full control over HTML handling decisions.
+ *
+ * @param description - The HTML description string
+ * @param transformer - Optional transformer function from context
+ * @returns React elements or sanitized HTML
+ *
+ * @internal
+ */
+export function transformDescription(
+  description: string,
+  transformer?: (html: string) => ReactNode,
+): ReactNode {
+  if (transformer) {
+    return transformer(description);
+  }
+  // Fallback to sanitized HTML when no transformer provided
+  return (
+    <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(description) }} />
+  );
+}
diff --git a/src/types/fields.ts b/src/types/fields.ts
index 740e1de49..12a34eb43 100644
--- a/src/types/fields.ts
+++ b/src/types/fields.ts
@@ -60,6 +60,28 @@ export type FieldDataProps = Partial<JSFField> & {
   meta?: {
     helpCenter?: HelpCenterDataProps;
   };
+  /**
+   * Optional HTML transformer function passed from RemoteFlows context.
+   * Use this in custom field components to transform HTML descriptions into React components.
+   * @example
+   * ```tsx
+   * const CustomInput = ({ fieldData }: FieldComponentProps) => {
+   *   const renderDescription = (desc: string) => {
+   *     if (fieldData.transformHtml) {
+   *       return fieldData.transformHtml(desc);
+   *     }
+   *     return <div>{desc}</div>;
+   *   };
+   *   return (
+   *     <div>
+   *       <input />
+   *       {fieldData.description && renderDescription(fieldData.description)}
+   *     </div>
+   *   );
+   * };
+   * ```
+   */
+  transformHtml?: (html: string) => React.ReactNode;
 };
 
 export type FileComponentProps = FieldComponentProps & {
diff --git a/src/types/remoteFlows.ts b/src/types/remoteFlows.ts
index 0134c52eb..1eb4b1c80 100644
--- a/src/types/remoteFlows.ts
+++ b/src/types/remoteFlows.ts
@@ -219,6 +219,32 @@ export type RemoteFlowsSDKProps = Omit<ThemeProviderProps, 'children'> & {
    * @default undefined (credentials not included)
    */
   credentials?: RequestCredentials;
+  /**
+   * Optional function to transform HTML strings into React components.
+   * Allows partners to replace specific HTML patterns (e.g., <details data-component="Accordion">)
+   * with custom React components.
+   *
+   * @param htmlContent - The raw HTML string to transform (unsanitized)
+   * @returns React elements or the original HTML
+   *
+   * @remarks
+   * Security: This function receives UNSANITIZED HTML. If you're using html-react-parser,
+   * note that it does NOT sanitize HTML by default. You are responsible for sanitizing
+   * untrusted HTML before parsing. Consider using DOMPurify or sanitize-html.
+   *
+   * @example
+   * ```tsx
+   * import parse, { domToReact } from 'html-react-parser';
+   * import DOMPurify from 'dompurify';
+   *
+   * function transformHtmlToComponents(htmlContent: string) {
+   *   // Sanitize first (recommended)
+   *   const clean = DOMPurify.sanitize(htmlContent);
+   *   return parse(clean, parseOptions);
+   * }
+   * ```
+   */
+  transformHtmlToComponents?: (htmlContent: string) => ReactNode;
 };
 
 // oxlint-disable-next-line typescript/no-explicit-any