@directus-labs/inline-repeater-interface

Inline Repeater Interface

A powerful interface for managing repeatable form fields within Directus that allows inline editing and reordering of items.

An alternative to the core Repeater Interface that opens inline as opposed to a drawer.

Note: This interface is for JSON fields only and doesn't support validation.

Features

• Inline editing of repeatable fields
• Drag and drop reordering
• Expandable/collapsible accordion items
• Customizable field templates
• Confirmation dialogs for item removal
• Expand/Collapse all functionality

Usage

The interface presents a list of repeatable items that can be:

1. Added using the "Add New" button
2. Expanded/collapsed for editing
3. Reordered via drag and drop
4. Removed with confirmation (optional)

Installation and Setup

Follow the Official Guide for installing extensions from the Marketplace or manually.

Configuration Options

The interface can be extensively customized through its configuration panel:

Fields Configuration

• Define custom fields with:
  • Field name
  • Field width (half/full)
  • Field type
  • Required status
  • Interface selection
  • Interface options
  • Display configuration
  • Field notes

Display Options

• Template: Customize how items are displayed in the collapsed state
• Add Label: Customize the "Add New" button text
• Sort: Enable automatic sorting of items by a specific field
• Limit: Set maximum number of items
• Require Confirmation to Remove: Shows a confirmation dialog when removing items

Example Configuration

{
	"fields": [
		{
			"field": "title",
			"type": "string",
			"interface": "input",
			"width": "full",
			"required": true
		},
		{
			"field": "description",
			"type": "text",
			"interface": "textarea",
			"width": "full"
		}
	],
	"template": "{{title}}",
	"addLabel": "Add Item",
	"showConfirmDiscard": true
}