Interface Extensions

Create custom field input components

Interfaces are the input components users interact with when editing field values.

Overview

Directus includes 45+ built-in interfaces like text inputs, dropdowns, WYSIWYG editors, and more. You can create custom interfaces for specialized input types.

Creating an Interface

Scaffold a new interface:

npm init directus-extension
# Select "interface" as the extension type

Interface Structure

import { defineInterface } from '@directus/extensions-sdk';

export default defineInterface({
  id: 'my-interface',
  name: 'My Interface',
  icon: 'box',
  description: 'A custom interface',
  component: InterfaceComponent,
  options: [
    {
      field: 'placeholder',
      name: 'Placeholder',
      type: 'string',
      meta: {
        interface: 'input',
        width: 'full',
      },
    },
  ],
  types: ['string'],
});

Component

The Vue component receives the value and emits updates:

<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
    :placeholder="placeholder"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: null,
    },
    placeholder: {
      type: String,
      default: 'Enter value...',
    },
  },
};
</script>

Interface Properties

id · string · required

Unique identifier for the interface

name · string · required

Human-readable name

icon · string · required

Material icon name

component · Component · required

Vue component for the interface

types · string[] · required

Compatible field types (string, integer, json, etc.)

options · Field[]

Configuration options for the interface

relational · boolean

Whether this interface works with relational fields

Built-in Interfaces

Directus includes interfaces for:

• Text and WYSIWYG editors
• Dropdowns and checkboxes
• Date and time pickers
• File and image uploads
• Relational field selectors
• JSON and code editors
• Map and location pickers
• And many more…

Next Steps

Displays

Create display components

Layouts

Create layout views