react-jsonschema-form icon indicating copy to clipboard operation
react-jsonschema-form copied to clipboard

feat: Add dynamic uiSchema support for array items

Open chathuraa opened this issue 5 months ago • 0 comments

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.

chathuraa avatar Jun 14 '25 00:06 chathuraa