added ui:required support for overriding required status from uiSchema

ui:required: true adds the field to validation and shows the required
indicator. ui:required: false hides the indicator but schema validation
still runs. Emits console.warn when ui:required: false is used on a
schema-required field without ui:initialValue or ui:emptyValue.

Author: adamrimon

packages/core/src/components/Form.tsx

@@ -1,5 +1,6 @@
 import { Component, ElementType, FormEvent, ReactNode, Ref, RefObject, createRef } from 'react';
 import {
+  augmentSchemaWithUiRequired,
   createSchemaUtils,
   CustomValidator,
   deepEquals,
@@ -720,9 +721,10 @@ export default class Form<
     const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
     const { customValidate, transformErrors, uiSchema } = this.props;
     const resolvedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
+    const effectiveSchema = augmentSchemaWithUiRequired<T, S>(resolvedSchema, uiSchema);
     return schemaUtils
       .getValidator()
-      .validateFormData(formData, resolvedSchema, customValidate, transformErrors, uiSchema);
+      .validateFormData(formData, effectiveSchema, customValidate, transformErrors, uiSchema);
   }
 
   /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */

packages/core/src/components/fields/LayoutGridField.tsx

@@ -681,6 +681,8 @@ function LayoutGridFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSche
     // the `Form` via the prop passed to `LayoutGridField` we need to make sure the uiSchema always has a true value
     // when it is needed
     const { fieldUiSchema, uiReadonly } = computeFieldUiSchema<T, S, F>(name, uiProps, uiSchema, isReadonly, readonly);
+    const fieldUiOptions = getUiOptions<T, S, F>(fieldUiSchema);
+    const effectiveRequired = fieldUiOptions.required !== undefined ? Boolean(fieldUiOptions.required) : isRequired;
 
     return (
       <Field
@@ -691,7 +693,7 @@ function LayoutGridFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSche
         }
         {...otherProps}
         name={name}
-        required={isRequired}
+        required={effectiveRequired}
         readonly={uiReadonly}
         schema={schema}
         uiSchema={fieldUiSchema}

packages/core/src/components/fields/SchemaField.tsx

@@ -135,6 +135,13 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, registry);
   const disabled = Boolean(uiOptions.disabled ?? props.disabled);
   const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
+  const effectiveRequired = uiOptions.required !== undefined ? Boolean(uiOptions.required) : required;
+  if (uiOptions.required === false && required && uiOptions.initialValue === undefined && uiOptions.emptyValue === undefined) {
+    console.warn(
+      `ui:required is false for a schema-required field "${name}" but no ui:initialValue or ui:emptyValue is set. ` +
+        'The UI will show this field as optional but schema validation will still fail if left empty.',
+    );
+  }
   const uiSchemaHideError = uiOptions.hideError;
   // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
   const hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError);
@@ -167,7 +174,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
       );
     }
     // When the anyOf/oneOf is an optional data control render AND it does not have form data, hide the label
-    const isOptionalRender = shouldRenderOptionalField<T, S, F>(registry, schema, required, uiSchema);
+    const isOptionalRender = shouldRenderOptionalField<T, S, F>(registry, schema, effectiveRequired, uiSchema);
     const hasFormData = isFormDataAvailable<T>(formData);
     displayLabel = displayLabel && (!isOptionalRender || hasFormData);
     fieldPathIdProps = {
@@ -274,7 +281,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     onKeyRename,
     onKeyRenameBlur,
     onRemoveProperty,
-    required,
+    required: effectiveRequired,
     disabled,
     readonly,
     hideError,

packages/core/test/uiSchema.test.tsx

@@ -2865,4 +2865,100 @@ describe('uiSchema', () => {
       expect(node.querySelectorAll("input[placeholder='Node name']")).toHaveLength(5);
     });
   });
+
+  describe('ui:required', () => {
+    it('shows required asterisk on non-required field when ui:required is true', () => {
+      const schema: RJSFSchema = {
+        type: 'object',
+        properties: {
+          foo: { type: 'string' },
+        },
+      };
+      const uiSchema: UiSchema = {
+        foo: { 'ui:required': true },
+      };
+      const { node } = createFormComponent({ schema, uiSchema });
+      expect(node.querySelector('.rjsf-field-string label span.required')).not.toBeNull();
+    });
+
+    it('hides required asterisk on schema-required field when ui:required is false', () => {
+      const schema: RJSFSchema = {
+        type: 'object',
+        required: ['foo'],
+        properties: {
+          foo: { type: 'string' },
+        },
+      };
+      const uiSchema: UiSchema = {
+        foo: { 'ui:required': false, 'ui:initialValue': 'fallback' },
+      };
+      const { node } = createFormComponent({ schema, uiSchema });
+      expect(node.querySelector('.rjsf-field-string label span.required')).toBeNull();
+    });
+
+    it('produces validation error when ui:required is true and field is empty', () => {
+      const schema: RJSFSchema = {
+        type: 'object',
+        properties: {
+          foo: { type: 'string' },
+        },
+      };
+      const uiSchema: UiSchema = {
+        foo: { 'ui:required': true },
+      };
+      const { node, onSubmit } = createFormComponent({ schema, uiSchema });
+      submitForm(node);
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('does not suppress schema validation when ui:required is false', () => {
+      const schema: RJSFSchema = {
+        type: 'object',
+        required: ['foo'],
+        properties: {
+          foo: { type: 'string' },
+        },
+      };
+      const uiSchema: UiSchema = {
+        foo: { 'ui:required': false },
+      };
+      const { node, onSubmit } = createFormComponent({ schema, uiSchema });
+      submitForm(node);
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('emits console.warn for ui:required false without initialValue or emptyValue', () => {
+      const schema: RJSFSchema = {
+        type: 'object',
+        required: ['foo'],
+        properties: {
+          foo: { type: 'string' },
+        },
+      };
+      const uiSchema: UiSchema = {
+        foo: { 'ui:required': false },
+      };
+      createFormComponent({ schema, uiSchema });
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('ui:required is false for a schema-required field'),
+      );
+    });
+
+    it('does not emit console.warn for ui:required false with initialValue set', () => {
+      const schema: RJSFSchema = {
+        type: 'object',
+        required: ['foo'],
+        properties: {
+          foo: { type: 'string' },
+        },
+      };
+      const uiSchema: UiSchema = {
+        foo: { 'ui:required': false, 'ui:initialValue': 'x' },
+      };
+      createFormComponent({ schema, uiSchema });
+      expect(consoleWarnSpy).not.toHaveBeenCalledWith(
+        expect.stringContaining('ui:required is false for a schema-required field'),
+      );
+    });
+  });
 });

packages/utils/src/augmentSchemaWithUiRequired.ts

@@ -0,0 +1,59 @@
+import get from 'lodash/get';
+
+import getUiOptions from './getUiOptions';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema } from './types';
+
+/** Recursively walks a schema and uiSchema, adding fields marked `ui:required: true` to the schema's `required`
+ * arrays. Returns a new schema without mutating the original.
+ *
+ * @param schema - The schema to augment
+ * @param [uiSchema] - The uiSchema containing ui:required overrides
+ * @returns A new schema with ui:required fields added to required arrays
+ */
+export default function augmentSchemaWithUiRequired<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(schema: S, uiSchema?: UiSchema<T, S, F>): S {
+  if (!uiSchema || schema.type !== 'object' || !schema.properties) {
+    return schema;
+  }
+
+  const existingRequired = schema.required || [];
+  const additionalRequired: string[] = [];
+  let propertiesChanged = false;
+  const newProperties: Record<string, unknown> = {};
+
+  for (const key of Object.keys(schema.properties)) {
+    const fieldUiSchema = get(uiSchema, [key]);
+    const propertySchema = schema.properties[key] as S;
+
+    if (fieldUiSchema) {
+      const { required: uiRequired } = getUiOptions<T, S, F>(fieldUiSchema);
+      if (uiRequired === true && !existingRequired.includes(key)) {
+        additionalRequired.push(key);
+      }
+    }
+
+    // Recurse into nested objects
+    if (propertySchema && propertySchema.type === 'object' && fieldUiSchema) {
+      const augmented = augmentSchemaWithUiRequired<T, S, F>(propertySchema, fieldUiSchema);
+      if (augmented !== propertySchema) {
+        propertiesChanged = true;
+        newProperties[key] = augmented;
+        continue;
+      }
+    }
+    newProperties[key] = propertySchema;
+  }
+
+  if (additionalRequired.length === 0 && !propertiesChanged) {
+    return schema;
+  }
+
+  return {
+    ...schema,
+    ...(propertiesChanged ? { properties: newProperties } : {}),
+    ...(additionalRequired.length > 0 ? { required: [...existingRequired, ...additionalRequired] } : {}),
+  };
+}

packages/utils/src/index.ts

@@ -1,5 +1,6 @@
 import allowAdditionalItems from './allowAdditionalItems';
 import asNumber from './asNumber';
+import augmentSchemaWithUiRequired from './augmentSchemaWithUiRequired';
 import canExpand from './canExpand';
 import createErrorHandler from './createErrorHandler';
 import createSchemaUtils from './createSchemaUtils';
@@ -97,6 +98,7 @@ export {
   allowAdditionalItems,
   ariaDescribedByIds,
   asNumber,
+  augmentSchemaWithUiRequired,
   buttonId,
   canExpand,
   createErrorHandler,

packages/utils/src/types.ts

@@ -1075,6 +1075,8 @@ type UIOptionsBaseType<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
     emptyValue?: any;
     /** Pre-fills the field on initial render and after reset, takes priority over schema default */
     initialValue?: any;
+    /** Overrides the schema's required for a field: true adds required, false hides the indicator */
+    required?: boolean;
     /** Will disable any of the enum options specified in the array (by value) */
     enumDisabled?: EnumValue[];
     /** Allows a user to provide a list of labels for enum values in the schema.

packages/utils/test/augmentSchemaWithUiRequired.test.ts

@@ -0,0 +1,107 @@
+import { augmentSchemaWithUiRequired, RJSFSchema, UiSchema } from '../src';
+
+describe('augmentSchemaWithUiRequired', () => {
+  it('returns the same schema when no uiSchema is provided', () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: { foo: { type: 'string' } },
+    };
+    expect(augmentSchemaWithUiRequired(schema)).toBe(schema);
+  });
+
+  it('returns the same schema when no ui:required fields exist', () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: { foo: { type: 'string' } },
+    };
+    const uiSchema: UiSchema = { foo: { 'ui:widget': 'textarea' } };
+    expect(augmentSchemaWithUiRequired(schema, uiSchema)).toBe(schema);
+  });
+
+  it('adds ui:required: true field to required array', () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: { foo: { type: 'string' }, bar: { type: 'string' } },
+    };
+    const uiSchema: UiSchema = { foo: { 'ui:required': true } };
+    const result = augmentSchemaWithUiRequired(schema, uiSchema);
+    expect(result.required).toEqual(['foo']);
+    expect(result).not.toBe(schema);
+  });
+
+  it('does not duplicate existing required fields', () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      required: ['foo'],
+      properties: { foo: { type: 'string' } },
+    };
+    const uiSchema: UiSchema = { foo: { 'ui:required': true } };
+    const result = augmentSchemaWithUiRequired(schema, uiSchema);
+    expect(result).toBe(schema);
+  });
+
+  it('preserves existing required and adds new ones', () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      required: ['foo'],
+      properties: { foo: { type: 'string' }, bar: { type: 'string' } },
+    };
+    const uiSchema: UiSchema = { bar: { 'ui:required': true } };
+    const result = augmentSchemaWithUiRequired(schema, uiSchema);
+    expect(result.required).toEqual(['foo', 'bar']);
+  });
+
+  it('handles nested objects', () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: {
+        address: {
+          type: 'object',
+          properties: {
+            city: { type: 'string' },
+          },
+        },
+      },
+    };
+    const uiSchema: UiSchema = {
+      address: { city: { 'ui:required': true } },
+    };
+    const result = augmentSchemaWithUiRequired(schema, uiSchema);
+    expect((result.properties!.address as RJSFSchema).required).toEqual(['city']);
+  });
+
+  it('does not mutate the original schema', () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: { foo: { type: 'string' } },
+    };
+    const uiSchema: UiSchema = { foo: { 'ui:required': true } };
+    augmentSchemaWithUiRequired(schema, uiSchema);
+    expect(schema.required).toBeUndefined();
+  });
+
+  it('returns same schema when nested object has uiSchema but no ui:required changes', () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: {
+        address: {
+          type: 'object',
+          properties: {
+            city: { type: 'string' },
+          },
+        },
+      },
+    };
+    const uiSchema: UiSchema = {
+      address: { city: { 'ui:widget': 'textarea' } },
+    };
+    const result = augmentSchemaWithUiRequired(schema, uiSchema);
+    expect(result).toBe(schema);
+  });
+
+  it('returns schema as-is for non-object types', () => {
+    const schema: RJSFSchema = { type: 'string' };
+    const uiSchema: UiSchema = { 'ui:required': true };
+    expect(augmentSchemaWithUiRequired(schema, uiSchema)).toBe(schema);
+  });
+});