feat: Add dynamic uiSchema support for array items

[chathuraa]

Feature Request: Dynamic uiSchema for Array Items

Problem Statement

Currently, RJSF applies the same uiSchema to all items in an array. This limitation makes it impossible to have item-specific UI behavior (show/hide fields, change widgets, etc.) based on the item's data. This forces developers to use complex workarounds with custom templates.

Proposed Solution

Allow uiSchema.items to accept a function that returns item-specific UI schemas:

interface UiSchema {
  items?: UiSchema | ((itemData: any, itemIndex: number) => UiSchema);
}

Example Usage

const uiSchema = {
  guests: {
    items: (itemData, index) => {
      // Return different UI schemas based on item data
      if (itemData?.relationship === 'child') {
        return {
          age: { 'ui:widget': 'updown' },
          mealPreference: { 'ui:widget': 'hidden' }
        };
      }
      return {
        age: { 'ui:widget': 'hidden' },
        mealPreference: { 'ui:widget': 'select' }
      };
    }
  }
};

Benefits

• ✅ Minimal implementation (~10 lines of code)
• ✅ Fully backward compatible - existing object-based uiSchema continues to work
• ✅ Solves common use cases: conditional fields, dynamic widgets, contextual help
• ✅ Maintains declarative approach - function returns JSON, not React components
• ✅ No new dependencies required

Implementation Approach

1. Update TypeScript types in @rjsf/utils
2. Modify ArrayField component in @rjsf/core to check if uiSchema.items is a function
3. If function, call it with (itemData, index) to get dynamic uiSchema
4. Pass computed uiSchema to array item rendering

Use Cases Solved

1. Conditional Fields: Show/hide fields based on other fields in the same array item
2. Dynamic Widgets: Change widget type based on data (e.g., different input for different types)
3. Dynamic Validation Messages: Contextual help text based on user selections
4. Progressive Disclosure: Reveal advanced options based on basic selections

Related Issues

This would address numerous community requests for conditional logic within arrays, providing a clean, built-in solution.

I'm ready to implement this feature and would appreciate feedback on the approach.

[heath-freenome]

@chathuraa This sounds like a nice feature. Are you willing to build it and submit a PR?

[chathuraa]

Hey @heath-freenome ,

Of course, I have a working PR, done a fair bit of testing, and all the automated tests are passing except for couple of UI framework tests. Is it okay to submit as is?

Cheers,
Chat.

[heath-freenome]

@chathuraa Go ahead and submit it, although we can't merge it until all the tests are working properly.

[chathuraa]

Hey @heath-freenome ,

I've added the PR #4675 .

Let me know if anything needs changing.

Cheers,
Chat.

[chathuraa]

Hey @heath-freenome ,

I believe this has been implemented and merged. Should I close the issue?

Also, the package versions haven't been updated.

Cheers,
Chat.

[heath-freenome]

@chathuraa I'll be doing a new release in a day or so... And yes, this was fixed via #4675