extended-dynamic-forms 0.1.7 → 0.1.9

package/README.md

@@ -260,6 +260,50 @@ const uiSchema = {
 };
 ```
 
+## Array Fields
+
+Extended Dynamic Forms provides custom-styled array field templates using shadcn/ui components. Arrays automatically get styled add/remove buttons, reordering controls, and proper visual hierarchy.
+
+### Basic Array Example
+```tsx
+const schema = {
+  type: 'object',
+  properties: {
+    directors: {
+      type: 'array',
+      title: 'Company Directors',
+      items: {
+        type: 'object',
+        properties: {
+          firstName: { type: 'string', title: 'First Name' },
+          lastName: { type: 'string', title: 'Last Name' },
+          email: { type: 'string', format: 'email', title: 'Email' }
+        }
+      }
+    }
+  }
+};
+
+const uiSchema = {
+  directors: {
+    'ui:options': {
+      orderable: true,    // Enable move up/down buttons
+      addable: true,      // Enable add button
+      removable: true     // Enable remove button
+    }
+  }
+};
+```
+
+### Array Features
+- 🎨 **Styled with shadcn/ui Card components**: Clean, modern appearance
+- ➕ **Add button**: Prominent "Add [Item]" button at the bottom
+- 🗑️ **Remove buttons**: Individual remove buttons for each item
+- 🔄 **Reordering**: Move items up/down with chevron buttons
+- 📱 **Responsive**: Mobile-friendly controls
+
+Arrays work seamlessly with all other custom widgets and fields in the library, including within nested structures.
+
 ## Central Event Orchestration System
 
 The library features a comprehensive event orchestration system that captures all form field events and enables webhook integration.