added the ui:enableMarkdownInHelp flag in UiSchema

Suyog241005 · Suyog241005 · commit 6e9390a31f6d · 2025-11-06T16:51:13.000+05:30
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,54 +19,69 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/antd
 
+- Updated ``
 - Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
 - Updated `ArrayFieldTemplate` and `ObjectFieldTemplate` to remove the rendering of a duplicate description (since the `FieldTemplate` already does it), fixing [#3624](https://github.com/rjsf-team/react-jsonschema-form/issues/3624)
 
 ## @rjsf/chakra-ui
 
 - Modified `CheckboxesWidget` to render the Title, fixing ([#4840](https://github.com/rjsf-team/react-jsonschema-form/issues/4840))
 - Updated `CheckboxWidget` to handle label and description rendering consistently, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
 
 ## @rjsf/core
 
 - Fixed duplicate label and description rendering in `CheckboxWidget` by conditionally rendering them based on widget type
     - Updated `CheckboxWidget` to handle label and description rendering consistently
     - Modified `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
 - Updated `ObjectField` to change the removal of an additional property to defer the work to the `processPendingChange()` handler in `Form`, fixing [#4850](https://github.com/rjsf-team/react-jsonschema-form/issues/4850)
+- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
 
 ## @rjsf/fluentui-rc
 
 - Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
+
+## @rjsf/daisyui
+
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
 
 ## @rjsf/mantine
 
 - Updated `CheckboxWidget` to handle label and description rendering consistently, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
 
 ## @rjsf/mui
 
 - Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
 
 ## @rjsf/primereact
 
 - Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
 
 ## @rjsf/react-bootstrap
 
 - Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
 
 ## @rjsf/semantic-ui
 
 - Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
 
 ## @rjsf/shadcn
 
 - Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
 - Updated the `Command` component to properly handle `forwardRef`
+- Updated `FieldHelpTemplate` to render markdown when `ui:enableMarkdownInHelp` is true
 
 ## @rjsf/utils
 
 - Updated `getDefaultFormState()` to not save an undefined field value into an object when the type is `null` and `excludeObjectChildren` is provided, fixing [#4821](https://github.com/rjsf-team/react-jsonschema-form/issues/4821)
 - Added new `ADDITIONAL_PROPERTY_KEY_REMOVE` constant
+- Added new global UI option `enableMarkdownInHelp` to control markdown rendering of `ui:help`
 
 ## Dev / docs / playground
 
diff --git a/packages/antd/test/__snapshots__/Array.test.tsx.snap b/packages/antd/test/__snapshots__/Array.test.tsx.snap
diff --git a/packages/antd/test/__snapshots__/Form.test.tsx.snap b/packages/antd/test/__snapshots__/Form.test.tsx.snap
diff --git a/packages/antd/test/__snapshots__/Grid.test.tsx.snap b/packages/antd/test/__snapshots__/Grid.test.tsx.snap
diff --git a/packages/antd/test/__snapshots__/Object.test.tsx.snap b/packages/antd/test/__snapshots__/Object.test.tsx.snap
diff --git a/packages/chakra-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/chakra-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,5 +1,6 @@
 import { Text } from '@chakra-ui/react';
-import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, getUiOptions } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,10 +11,18 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
   if (!help) {
     return null;
   }
   const id = helpId(fieldPathId);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+  if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+    return (
+      <Text id={id}>
+        <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+      </Text>
+    );
+  }
   return <Text id={id}>{help}</Text>;
 }
diff --git a/packages/core/src/components/templates/FieldHelpTemplate.tsx b/packages/core/src/components/templates/FieldHelpTemplate.tsx
@@ -1,4 +1,5 @@
-import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, getUiOptions } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -9,12 +10,20 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
   if (!help) {
     return null;
   }
   const id = helpId(fieldPathId);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
   if (typeof help === 'string') {
+    if (uiOptions.enableMarkdownInHelp) {
+      return (
+        <div id={id} className='help-block'>
+          <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+        </div>
+      );
+    }
     return (
       <p id={id} className='help-block'>
         {help}
diff --git a/packages/daisyui/src/templates/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/daisyui/src/templates/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,4 +1,5 @@
-import { FieldHelpProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+import { FieldHelpProps, StrictRJSFSchema, RJSFSchema, FormContextType, getUiOptions } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders help text for a specific form field
  * with DaisyUI styling. It displays the help text in a subtle gray color and smaller size
@@ -14,7 +15,17 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { help } = props;
+  const { help, uiSchema = {}, registry } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+  if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+    return (
+      <div className='rjsf-field-help-template text-gray-500 text-sm'>
+        <div>
+          <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className='rjsf-field-help-template text-gray-500 text-sm'>
       <div>{help}</div>
diff --git a/packages/fluentui-rc/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/fluentui-rc/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,5 +1,6 @@
 import { Caption1 } from '@fluentui/react-components';
-import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, getUiOptions } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,10 +11,18 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
   if (!help) {
     return null;
   }
   const id = helpId(fieldPathId);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+  if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+    return (
+      <Caption1 id={id}>
+        <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+      </Caption1>
+    );
+  }
   return <Caption1 id={id}>{help}</Caption1>;
 }
diff --git a/packages/mantine/src/templates/FieldHelpTemplate.tsx b/packages/mantine/src/templates/FieldHelpTemplate.tsx
@@ -1,5 +1,6 @@
-import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, getUiOptions } from '@rjsf/utils';
 import { Text } from '@mantine/core';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,14 +11,21 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
 
   if (!help) {
     return null;
   }
 
   const id = helpId(fieldPathId);
-
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+  if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+    return (
+      <Text id={id} size='sm' my='xs' c='dimmed'>
+        <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+      </Text>
+    );
+  }
   return (
     <Text id={id} size='sm' my='xs' c='dimmed'>
       {help}
diff --git a/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/mui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,5 +1,6 @@
 import FormHelperText from '@mui/material/FormHelperText';
-import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, getUiOptions } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,11 +11,19 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
   if (!help) {
     return null;
   }
   const id = helpId(fieldPathId);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+  if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+    return (
+      <FormHelperText component='div' id={id}>
+        <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+      </FormHelperText>
+    );
+  }
   return (
     <FormHelperText component='div' id={id}>
       {help}
diff --git a/packages/primereact/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/primereact/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,4 +1,5 @@
-import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId, getUiOptions } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -9,9 +10,17 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
   if (help) {
     const id = helpId(fieldPathId);
+    const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+    if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+      return (
+        <small id={id}>
+          <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+        </small>
+      );
+    }
     return <small id={id}>{help}</small>;
   }
   return null;
diff --git a/packages/react-bootstrap/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/react-bootstrap/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,5 +1,6 @@
-import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId, getUiOptions } from '@rjsf/utils';
 import Form from 'react-bootstrap/Form';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,11 +11,19 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help, hasErrors } = props;
+  const { fieldPathId, help, hasErrors, uiSchema = {}, registry } = props;
   if (!help) {
     return null;
   }
   const id = helpId(fieldPathId);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+  if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+    return (
+      <Form.Text className={hasErrors ? 'text-danger' : 'text-muted'} id={id}>
+        <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+      </Form.Text>
+    );
+  }
   return (
     <Form.Text className={hasErrors ? 'text-danger' : 'text-muted'} id={id}>
       {help}
diff --git a/packages/semantic-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/semantic-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,5 +1,6 @@
 import { Message } from 'semantic-ui-react';
-import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId, getUiOptions } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,9 +11,17 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema = {}, registry } = props;
   if (help) {
     const id = helpId(fieldPathId);
+    const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+    if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+      return (
+        <Message size='mini' info id={id}>
+          <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+        </Message>
+      );
+    }
     return <Message size='mini' info id={id} content={help} />;
   }
   return null;
diff --git a/packages/shadcn/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/shadcn/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,4 +1,5 @@
-import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId, getUiOptions } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
 
 import { cn } from '../lib/utils';
 
@@ -11,11 +12,19 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help, hasErrors } = props;
+  const { fieldPathId, help, hasErrors, uiSchema = {}, registry } = props;
   if (!help) {
     return null;
   }
   const id = helpId(fieldPathId);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
+  if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
+    return (
+      <span className={cn('text-xs font-medium text-muted-foreground', { ' text-destructive': hasErrors })} id={id}>
+        <Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
+      </span>
+    );
+  }
   return (
     <span className={cn('text-xs font-medium text-muted-foreground', { ' text-destructive': hasErrors })} id={id}>
       {help}
diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts
@@ -408,6 +408,9 @@ export type GlobalUISchemaOptions = GenericObjectType & {
   /** Enables the displaying of description text that contains markdown
    */
   enableMarkdownInDescription?: boolean;
+  /** Enables the displaying of help text that contains markdown
+   */
+  enableMarkdownInHelp?: boolean;
   /** Enables the rendering of the Optional Data Field UI for specific types of schemas, either `object`, `array` or
    * both. To disable the Optional Data Field UI for a specific field, provide an empty array within the UI schema.
    */
