A powerful interface for managing repeatable form fields within Directus that allows inline editing and reordering of items.
npm install @directus-labs/inline-repeater-interfaceA 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.
- 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
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)
Follow the Official Guide for installing extensions from the Marketplace or manually.
The interface can be extensively customized through its configuration panel:
!Inline Repeater Interface Configuration
!Inline Repeater Interface Fields Configuration
json
{
"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
}
``