fix: prevent duplicate checkbox description rendering across themes (#4742)

Author: Suyog241005

CHANGELOG.md

@@ -15,6 +15,51 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 6.0.2
+
+## @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))
+
+## @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))
+
+## @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))
+
+## @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))
+
+## @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))
+
+## @rjsf/mantine
+
+- Updated `CheckboxWidget` to handle label and description rendering consistently, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+
+## @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))
+
+## @rjsf/antd
+
+- Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+
+
+## @rjsf/chakra-ui
+
+- Updated `CheckboxWidget` to handle label and description rendering consistently, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+
+## @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))
+
 # 6.0.1
 
 ## Dev / docs / playground

packages/antd/src/templates/FieldTemplate/index.tsx

@@ -56,6 +56,7 @@ export default function FieldTemplate<
   } = formContext as GenericObjectType;
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
+
   const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
     'WrapIfAdditionalTemplate',
     registry,
@@ -79,7 +80,7 @@ export default function FieldTemplate<
       descriptionProps.extra = descriptionNode;
       break;
   }
-
+  const isCheckbox = uiOptions.widget === 'checkbox';
   return (
     <WrapIfAdditionalTemplate
       classNames={classNames}
@@ -101,7 +102,7 @@ export default function FieldTemplate<
         hasFeedback={schema.type !== 'array' && schema.type !== 'object'}
         help={(!!rawHelp && help) || (rawErrors?.length ? errors : undefined)}
         htmlFor={id}
-        label={displayLabel && label}
+        label={displayLabel && !isCheckbox && label}
         labelCol={labelCol}
         required={required}
         style={wrapperStyle}

packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx

@@ -10,6 +10,7 @@ import {
   StrictRJSFSchema,
   RJSFSchema,
   FormContextType,
+  getUiOptions,
 } from '@rjsf/utils';
 
 import { Field } from '../components/ui/field';
@@ -46,7 +47,9 @@ export default function CheckboxWidget<
     registry,
     options,
   );
-  const description = options.description || schema.description;
+  const uiOptions = getUiOptions(uiSchema);
+  const isCheckbox = uiOptions.widget === 'checkbox';
+  const description = isCheckbox ? undefined : (options.description ?? schema.description);
 
   const _onChange = ({ checked }: CheckboxCheckedChangeDetails) => onChange(checked);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.checked);

packages/core/src/components/templates/FieldTemplate/FieldTemplate.tsx

@@ -29,9 +29,10 @@ export default function FieldTemplate<
   if (hidden) {
     return <div className='hidden'>{children}</div>;
   }
+  const isCheckbox = uiOptions.widget === 'checkbox';
   return (
     <WrapIfAdditionalTemplate {...props}>
-      {displayLabel && <Label label={label} required={required} id={id} />}
+      {displayLabel && !isCheckbox && <Label label={label} required={required} id={id} />}
       {displayLabel && description ? description : null}
       {children}
       {errors}

packages/core/src/components/widgets/CheckboxWidget.tsx

@@ -9,6 +9,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
+  getUiOptions,
 } from '@rjsf/utils';
 
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
@@ -57,11 +58,13 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
     (event: FocusEvent<HTMLInputElement>) => onFocus(id, event.target.checked),
     [onFocus, id],
   );
-  const description = options.description ?? schema.description;
 
+  const uiOptions = getUiOptions(uiSchema);
+  const isCheckboxWidget = uiOptions.widget === 'checkbox';
+  const description = isCheckboxWidget ? undefined : (options.description ?? schema.description);
   return (
     <div className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}>
-      {!hideLabel && description && (
+      {!hideLabel && description && !isCheckboxWidget && (
         <DescriptionFieldTemplate
           id={descriptionId(id)}
           description={description}

packages/fluentui-rc/src/FieldTemplate/FieldTemplate.tsx

@@ -51,6 +51,7 @@ export default function FieldTemplate<
   if (hidden) {
     return <div style={{ display: 'none' }}>{children}</div>;
   }
+  const isCheckbox = uiOptions.widget === 'checkbox';
   return (
     <WrapIfAdditionalTemplate
       classNames={classNames}
@@ -69,7 +70,7 @@ export default function FieldTemplate<
     >
       <Field validationState={rawErrors.length ? 'error' : undefined} required={required}>
         {children}
-        {displayLabel && rawDescription ? (
+        {displayLabel && rawDescription && !isCheckbox ? (
           <Text as='p' block style={{ marginTop: 0, marginBottom: 0 }}>
             {description}
           </Text>

packages/mantine/src/widgets/CheckboxWidget.tsx

@@ -11,8 +11,6 @@ import {
 } from '@rjsf/utils';
 import { Checkbox } from '@mantine/core';
 
-import { cleanupOptions } from '../utils';
-
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
  *  It is typically used to represent a boolean.
  *
@@ -44,8 +42,6 @@ export default function CheckboxWidget<
     uiSchema,
   } = props;
 
-  const themeProps = cleanupOptions(options);
-
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
@@ -104,7 +100,6 @@ export default function CheckboxWidget<
         onFocus={handleFocus}
         error={rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined}
         aria-describedby={ariaDescribedByIds(id)}
-        {...themeProps}
       />
     </>
   );

packages/mui/src/FieldTemplate/FieldTemplate.tsx

@@ -52,6 +52,9 @@ export default function FieldTemplate<
   if (hidden) {
     return <div style={{ display: 'none' }}>{children}</div>;
   }
+
+  const isCheckbox = uiOptions.widget === 'checkbox';
+
   return (
     <WrapIfAdditionalTemplate
       classNames={classNames}
@@ -70,7 +73,7 @@ export default function FieldTemplate<
     >
       <FormControl fullWidth={true} error={rawErrors.length ? true : false} required={required}>
         {children}
-        {displayLabel && rawDescription ? (
+        {!isCheckbox && displayLabel && rawDescription ? (
           <Typography variant='caption' color='textSecondary'>
             {description}
           </Typography>

packages/primereact/src/FieldTemplate/FieldTemplate.tsx

@@ -26,12 +26,13 @@ export default function FieldTemplate<
     return <div style={{ display: 'none' }}>{children}</div>;
   }
 
+  const isCheckbox = uiOptions.widget === 'checkbox';
   return (
     <WrapIfAdditionalTemplate {...props}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '1rem' }}>
-        {displayLabel && <Label id={props.id} text={props.label} required={props.required} />}
+        {displayLabel && !isCheckbox && <Label id={props.id} text={props.label} required={props.required} />}
         {children}
-        {displayLabel && rawDescription && <small>{description}</small>}
+        {displayLabel && rawDescription && !isCheckbox && <small>{description}</small>}
         {errors}
         {help}
       </div>

packages/react-bootstrap/src/FieldTemplate/FieldTemplate.tsx

@@ -44,6 +44,8 @@ export default function FieldTemplate<
   if (hidden) {
     return <div className='hidden'>{children}</div>;
   }
+  const isCheckbox = uiOptions.widget === 'checkbox';
+
   return (
     <WrapIfAdditionalTemplate
       classNames={classNames}
@@ -61,14 +63,14 @@ export default function FieldTemplate<
       registry={registry}
     >
       <Form.Group>
-        {displayLabel && (
+        {displayLabel && !isCheckbox && (
           <Form.Label htmlFor={id} className={rawErrors.length > 0 ? 'text-danger' : ''}>
             {label}
             {required ? '*' : null}
           </Form.Label>
         )}
         {children}
-        {displayLabel && rawDescription && (
+        {displayLabel && rawDescription && !isCheckbox && (
           <Form.Text className={rawErrors.length > 0 ? 'text-danger' : 'text-muted'}>{description}</Form.Text>
         )}
         {errors}