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

Simple List Interface

Input a simple list of items with full keyboard support.

Simple List Interface

list-interface.png

Easily create and manage simple lists with full keyboard support.

A great alternative to the Tags interface if you need to reorder and edit items within a list.

  • Add new items to list with Enter
  • Remove items with Backspace.
  • Use up and down arrow keys to navigate between list items.
  • Drag and drop to re-order list items.
  • Value stored as JSON or CSV.

Interface

list-interface-example.png

Configuration Options

list-interface-config.png

Size

Control the size of the input within the list item.

  • Small
  • Normal

Limit

Restrict the number of items that can be added to the list. Leave black for unlimited.

Add New Label

Specify the text for the button that adds a new item to the list. Translatable using custom translation strings.


Installation & Setup

  1. Install the extension. Review the the Official Guide for more info.
  2. Open a collection within your Settings > Data Model and click the add new field button.
  3. Choose the List interface, add a key, choose between and save the new field

@directus-labs/simple-list-interface

npm i @directus-labs/simple-list-interface
This extension is sandboxed and can be installed through the Directus Marketplace. Learn more.
Kevin Lewis
Kevin Lewis
Verified
12.2k Total Downloads
1.0.0
Works with v10.10.0+
Updated 11 months ago
104.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