diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.tsx index 10bc5098ab7c..fb5a926af362 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.tsx @@ -30,6 +30,7 @@ const ResearchFormCheckBoxBlock: React.FC< <> handleChange(!questionIdsAndAnswers[props.data.clientId])} /> diff --git a/shared-module/src/components/InputFields/CheckBox.tsx b/shared-module/src/components/InputFields/CheckBox.tsx index 0869689ebbb6..6515b7a59c34 100644 --- a/shared-module/src/components/InputFields/CheckBox.tsx +++ b/shared-module/src/components/InputFields/CheckBox.tsx @@ -78,10 +78,21 @@ export interface CheckboxProps extends InputHTMLAttributes { error?: boolean checked?: boolean onChangeByValue?: (checked: boolean, name?: string) => void + labelIsRawHtml?: boolean } const CheckBox = forwardRef( - ({ onChangeByValue, onChange, className, checked, ...rest }: CheckboxProps, ref) => { + ( + { + onChangeByValue, + onChange, + className, + checked, + labelIsRawHtml = false, + ...rest + }: CheckboxProps, + ref, + ) => { const handleOnChange = (event: React.ChangeEvent) => { if (onChangeByValue) { const { @@ -110,9 +121,10 @@ const CheckBox = forwardRef( aria-invalid={rest.error !== undefined} onChange={handleOnChange} ref={ref} + dangerouslySetInnerHTML={labelIsRawHtml ? { __html: rest.label } : undefined} {...rest} /> - {rest.label} + {!labelIsRawHtml && {rest.label}} {rest.error && (