Join us for a Live Demo & Q&A Session
Directus Logo
  • Use Cases and Features
    • Headless CMS
      Manage and deliver content with ease
    • Backend-as-a-Service
      Build and ship applications faster
    • Headless Commerce
      A single source of truth for products
    • 100+ More Use Cases
      Build anything (or everything)
    • Instant APIs
      Connect a database, get REST + GraphQL APIs
    • Granular Policy-Based Auth
      Provide secure, autonomous data access
    • Visual Automation Builder
      Automate content and data workflows with ease
    • 50+ More Features
      Get everything you need out-of-the-box
    Project Showcase
    Built With Directus

    Built With Directus

    See what everyone's been building with Directus

  • Learn More
    • Blog
      Read our latest articles and guides
    • Case Studies
      Case studies and success stories
    • Community
      Join our new community forum.
    • Agency Directory
      Browse our list of agency partners
    • About Us
      Learn more about Directus and the team
    • Wall of Love
      See what others are saying about us
    • Contact
      Have a general inquiry or question for us?
    • Support
      Reach out to Directus support
    Watch Directus TV
    Directus TV
    Video

    Directus TV

    Go down the rabbit hole with hours of original video content from our team.

  • Developers
  • Enterprise
  • Pricing
Get a Technical DemoTry Cloud Free
GitHub logo32,121
Directus Marketplace
Marketplace
  1. Extensions
  2. Integrations
  3. Templates
Back to Extensions
interface

Inline Repeater Interface

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

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

Inline Repeater Example

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:

Inline Repeater Interface Configuration

Inline Repeater Interface Fields Configuration

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
}

@directus-labs/inline-repeater-interface

npm i @directus-labs/inline-repeater-interface
This extension is sandboxed and can be installed through the Directus Marketplace. Learn more.
Mike Elsmore
Mike Elsmore
Verified
12.3k Total Downloads
1.0.0
Works with v10.0.0+ or v11.0.0+
Updated 6 months ago
MIT License
204.0 KiB (3 files)
npm
  • Directus LogoDirectus Logo

    A composable backend to build your Headless CMS, BaaS, and more. 

  • Solutions
    • Headless CMS
    • Backend-as-a-Service
    • Product Information
    • 100+ Things to Build
  • Resources
    • Documentation
    • Guides
    • Community
    • Release Notes
  • Support
    • Issue Tracker
    • Feature Requests
    • Community Chat
    • Cloud Dashboard
  • Organization
    • About
    • Careers
    • Brand Assets
    • Contact
©2025 Monospace Inc
  • Cloud Policies
  • License
  • Terms
  • Privacy