Interfaces

Interfaces are how users interact with fields in :product-link{product="editor"}. Each interface supports specific data types and configurations.

Text & Numbers

Input

A standard form input.

Configuration	Options
Types	String, Text, UUID, Integer, Big Integer, Float, Decimal
Length	Used to limit number of characters in the database.
Soft Limit	Used to limit the number of characters within the Data Studio.
Trim	Toggle to trim whitespace at start and end of the value.
Masked	Toggle to hide the typed value with • values.
Cleared Value	Toggle to save cleared value as an empty string.
Slugify	Toggle to make the entered value URL safe.

Autocomplete Input (API)

A search input that will populate dropdown choices by making a request to a given URL.

Configuration	Options
Types	String, Text
URL	The request URL with dynamic {{ value }}.
Results Path	The returned object path using dot notation containing an array with search results.
Text Path	The value within each object that displays for each search result.
Value Path	The value within each object that is stored for each search result.
Trigger	Select between throttle and debounce.
Rate	The delay in milliseconds used for the trigger.

::callout{icon="material-symbols:info-outline"} Throttle vs Debounce Throttle and debounce are very similar. Debounce will wait until a period of 'silence' has happened before making the request, while throttle will keep making requests at most 1 call every period. Period is set in the 'rate' configuration for this interface. ::

Block Editor

Allows users to create and edit content using blocks. These blocks represent individual pieces of content, such as text, images, videos, buttons, and more, that can be assembled and re-arranged within a flexible layout.

Configuration	Options
Types	JSON
Toolbar	Allows for customization of visible formatting options.
Root Folder	Default folder to store uploaded files. Does not affect existing files.

Code

Code editor for pre-formatted text.

Configuration	Options
Types	String, Text, JSON, Geometry (All)
Language	Language for syntax highlighting. Can be set when type is not JSON.
Line Number	Toggle to show line numbers.
Line Wrapping	Toggle to wrap text to prevent horizontal scrolling.
Template	Preset value that the user can add to the field value by clicking "Fill with Template Value".

Textarea

Textarea input for longer plain text.

Configuration	Options
Types	Text
Soft Limit	Used to limit the number of characters within the Data Studio.

WYSIWYG

The What You See Is What You Get (WYSIWYG) editor provides a text area with rich formatting options in the toolbar.

Configuration	Options
Types	Text
Toolbar	Allows for customization of visible formatting options
Folder	Default folder to store uploaded files. Does not affect existing files.
Soft Limit	Used to limit the number of characters within the Data Studio.
Static Access Token	Token appended to asset URLs when displaying in the editor.
Custom Formats	JSON array of formatting that is passed to the style_formats config option of the WYSIWYG editor instance. TinyMCE Documentation
Options Override	JSON object to override the default config option of the WYSIWYG editor instance. TinyMCE Documentation

Markdown

Markdown text editor with formatting options in the toolbar. You can switch between Edit and Preview modes.

Configuration	Options
Types	Text
Toolbar	Allows for customization of visible formatting options.
Root Folder	Default folder to store uploaded files. Does not affect existing files.
Static Access Token	Token appended to asset URLs when displaying in the editor.
Soft Limit	Used to limit the number of characters within the Data Studio.
Custom Blocks	Each block adds an icon to the toolbar, and wraps the cursor in specific characters.

Tags

A text input that allows users to apply any number of tags. When adding new tag, press Enter to save the tag. To remove an existing tag simply click on the tag under the input.

Configuration	Options
Types	JSON, CSV
Presets	Preset tags that the user can select.
Alphabetize	Toggle to force tags to display in alphabetical order.
Allow Other	Toggle to allow users to add new tags.
Whitespace	Force whitespace to be removed or replaced with hyphens or underscores.
Capitalization	Force tags to be stored as lowercase, uppercase, or title case.

Selection

Toggle

A checkbox input that allows user to toggle boolean values.

Configuration	Options
Types	Boolean
Default Value	true, false, null
Icon On	Icon that shows whenever the toggle is enabled.
Icon Off	Icon that shows whenever the toggle is disabled.
Color On	Color of the icon whenever the toggle is enabled.
Color Off	Color of the icon whenever the toggle is disabled.
Label	The text displayed to the user beside the toggle.

Datetime

Date picker input that allows user to select a date and time.

Configuration	Options
Types	DateTime, Date, Time, Timestamp
Include Seconds	Show seconds in the interface.
Use 24-Hour Format	Use 24 hour time system.

::callout{icon="material-symbols:info-outline"} Handling Timezones

• Timestamp normalizes values to UTC and returns them in ISO 8601 format with the Z suffix (e.g. 2024-01-15T09:00:00.000Z).
• DateTime stores values without timezone information and returns them in ISO 8601 format (e.g. 2024-01-15T10:00:00). The stored value depends on the database vendor's format and database timezone, while the returned value is dependent on the server's TZ environment variable.

System fields date_created and date_updated use Timestamp. ::

Repeater

A repeating group of fields. You can use any field in a repeater, except for relational, presentation, or group fields. The value is stored as a JSON array of objects.

Configuration	Options
Types	JSON
Template	Label shown in the repeater items using display templates. Defaults to {{ title }}.
"Create New" Label	Label for the button to create a new item below the field in the editor. Defaults to "Create New".
Sort	Method of sorting the items groups within the repeater.
Edit Fields	The configuration for fields within the repeater.

Each field in a repeater has further configuration options.

Configuration	Options
Field	Unique name for the field - used as the property key and in the repeater's template option.
Type	Data type of property values.
Interface	The interface to use for the field.
Interface Options	Option configuration for the selected interface.
Display	The display to use for the preview on each item.

Map

Show and set geospatial data on an interactive map. Mapping data is stored as GeoJSON.

::callout{icon="material-symbols:info-outline"} Maps Provider By default, Directus will use OpenStreetMap to display your mapping data.

By entering a Mapbox API key, you can enhance the platform's mapping experience. ::

Configuration	Options
Types	<ul><li>Point: A single location on a map.</li> <li>LineString: A series of points on a map connected in a line.</li> <li>Polygon: An area of a map drawn by selecting vertices.</li> <li>Multipoint: A series of disconnected points on a map.</li> <li>MultiLineString: A series of LineString objects.</li> <li>MultiPolygon: A series of Polygon objects.</li> <li>Geometry (All): An series of Point, LineString and Polygon objects.</li> <li>JSON: A Geometry (All) object stored as JSON.</li> <li>String: A Geometry (All) object stored a string of characters.</li> <li>Text: A Geometry (All) object stored as Text.</li> <li>CSV: A Geometry (All) object stored as comma-separated values.</li>
Default View	The default location and zoom settings on the map to show by default

::callout{icon="material-symbols:info-outline"} Database Support Your database must support geospatial data or have a geospatial plugin installed, such as PostGIS or SpatiaLite, to fully utilize mapping functionality with Directus. ::

Color

A color picker interface that allows users to input color codes and convert between different color modes.

Configuration	Options
Types	String
Opacity	Enable opacity values to be adjusted by the user.
Preset Colors	Preset colors that users can select.

Dropdown

Input that allows the user to select a value from a dropdown list of options.

Configuration	Options
Types	String, Integer, Big Integer, Float, Decimal
Choices	Options for the dropdown. Each option contains text that is displayed to the user and a value that is stored.
Allow Other	Allow user to enter custom values other than preset values.
Allow None	Allow user to deselect an option.

Dropdown (Multiple)

Input that allows user to select multiple values from a list of options.

Configuration	Options
Types	JSON, CSV
Choices	Options for the dropdown. Each option contains text that is displayed to the user and a value that is stored.
Allow Other	Allow user to enter custom values other than preset values.
Allow None	Allow user to deselect an option.

Icon

Allow the user to select from a list of icons. Icons are from the Google Material Symbols library and cannot be swapped for another library.

Configuration	Options
Types	String

Checkboxes

Input that allows user to select multiple checkboxes.

Configuration	Options
Types	JSON, CSV
Choices	Options for the checkboxes. Each option contains text that is displayed to the user and a value that is stored.
Allow Other	Allow user to enter custom values other than preset values.
Color	Color of the checkboxes.
Icon On/Off	Icons shown whenever a checkbox is checked/unchecked.
Items Shown	Number of checkboxes before a 'Show More' toggle is shown.

Checkboxes (Tree)

Nested tree of checkboxes that can be expanded or collapsed.

Configuration	Options
Types	JSON, CSV
Choices	Options for the checkboxes. Each option contains text that is displayed to the user and a value that is stored, along with any child options.
Choice Children	Child checkboxes nested below the current choice.
Value Combining	Controls what value is stored when nested selections are made. All, Branch, Leaf, Indeterminate, Exclusive.

::callout{icon="material-symbols:info-outline"} Understanding Value Combining Options In a Checkboxes (Tree) interface, checkboxes can exist within a parent checkbox. Value combining determines the final value when selecting items in a tree.

• All returns all checked values. :::collapsible{name="examples" class="mt-2"}

  Selection	Final Value
  :icon{name="material-symbols:check-box-outline"} parent

  :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box-outline"} child2 | [child1] | | :icon{name="material-symbols:check-box"} parent   :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box"} child2 | [child1, child2, parent] | :::

• Branch returns the top-most values that are selected. :::collapsible{name="examples" class="mt-2"}

  Selection	Final Value
  :icon{name="material-symbols:check-box-outline"} parent

  :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box-outline"} child2 | [child1] | | :icon{name="material-symbols:check-box"} parent   :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box"} child2 | [parent] | :::

• Leaf returns the deepest values that are selected :::collapsible{name="examples" class="mt-2"}

  Selection	Final Value
  :icon{name="material-symbols:check-box-outline"} parent

  :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box-outline"} child2 | [child1] | | :icon{name="material-symbols:check-box"} parent   :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box"} child2 | [child1, child2] | :::

• Indeterminate returns checked items, and always returns a parent when one or more children are selected. :::collapsible{name="examples" class="mt-2"}

  Selection	Final Value
  :icon{name="material-symbols:check-box-outline"} parent

  :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box-outline"} child2 | [child1, parent] | | :icon{name="material-symbols:check-box"} parent   :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box"} child2 | [child1, child2, parent] | :::

• Exclusive returns either the parent or child elements, but not both. :::collapsible{name="examples" class="mt-2"}

  Selection	Final Value
  :icon{name="material-symbols:check-box"} parent

  :icon{name="material-symbols:check-box-outline"} child1   :icon{name="material-symbols:check-box-outline"} child2 | [parent] | | :icon{name="material-symbols:check-box-outline"} parent   :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box-outline"} child2 | [child1] | | :icon{name="material-symbols:check-box-outline"} parent   :icon{name="material-symbols:check-box"} child1   :icon{name="material-symbols:check-box"} child2 | [child1, child2] | ::: ::

Radio Buttons

Radio button input that allows users to select a single value from multiple choices.

Configuration	Options
Types	String, Integer, Big Integer, Float
Choices	Options for the radio buttons. Each option contains text that is displayed to the user and a value that is stored.
Allow Other	Allow user to enter custom values other than preset values.

Relational

File

Upload a single file of any mime-type, choose an existing file from the file library, or import a file from a URL.

Configuration	Options
Types	UUID
Root Folder	Folder for the uploaded files. Does not affect the location of existing files.
Allowed MIME Types	File type extensions allowed by this interface. Will not override global FILES_MIME_TYPE_ALLOW_LIST defined in your env.

Image

Upload a single image file, choose an existing image from the file library, or import an image from a URL.

Configuration	Options
Types	UUID
Root Folder	Folder for the uploaded files. Does not affect the location of existing files.
Crop to Fit	Crop the image as needed when displaying the image.
Allowed MIME Types	File type extensions allowed by this interface. Will not override global FILES_MIME_TYPE_ALLOW_LIST defined in your env.

Files

Upload multiple files, choose existing files from the file library, or import files from URL.

When this field is added to a collection, Directus will create a Many to Many (M2M) junction collection on your behalf.

Configuration	Options
Types	Alias
Folder	Folder for the uploaded files. Does not affect the location of existing files.
Display Template	Display templates are used to represent an item in relationship fields - for example to show the value of the Title field.
Allowed MIME Types	File type extensions allowed by this interface. Will not override global FILES_MIME_TYPE_ALLOW_LIST defined in your env.

Builder (M2A)

Create relationships between the current item and multiple items from any number of other collections in a many-to-any (M2A) interface.

When this field is added to a collection, Directus will create a Many to Many (M2M) junction collection on your behalf.

Configuration	Options
Types	Alias
Related Collections	Which collections should items be selected from.
Allow Duplicates	Allow users to add the same Item multiple times.

::callout{icon="material-symbols:school-outline" color="secondary" to="/tutorials/getting-started/create-reusable-blocks-with-many-to-any-relationships"} Read our tutorial on using a Builder (M2A) to create reusable page components. ::

Many To Many

Create relationships between the current item and many different items from a single collection.

When this field is added to a collection, Directus will create a Many to Many (M2M) junction collection on your behalf.

Configuration	Options
Types	Alias
Related Collection	Which collection should items be selected from.
Layout	How to present items in the editor. List, Table
Junction Fields Location	Where in the editor the relational field should be added. Top, Bottom
Allow Duplicates	Allow users to add the same Item multiple times.
Filter	Filter the list of items a user can select.
Item link	Toggle visible link to the item.

One to Many

Create a relationship between the current item and many items from a single collection.

When this field is added to a collection, Directus will create a corresponding Many to One field on the related collection on your behalf.

Configuration	Options
Types	Alias
Related Collection	Which collection should items be selected from.
Foreign Key	Name of field in related collection to be created.
Layout	How to present items in the editor. List, Table
Display Template	Display templates are used to represent an item in relationship fields - for example to show the value of the Title field.
Filter	Filter the list of items a user can select.
Item link	Toggle visible link to the item.

Tree View

A special One to Many interface that allows users to create and manage recursive relationships between items from the same collection.

The Tree View interface is only available on self-referencing (recursive) relationships.

Configuration	Options
Types	Alias
Related Collection	Which collection should items be selected from.
Foreign Key	Name of field in related collection to be created.
Display Template	Display templates are used to represent an item in relationship fields - for example to show the value of the Title field.
Filter	Filter the list of items a user can select.

Many to One

Create a relationship between the current item and a single item from single collection.

Configuration	Options
Types	Alias
Related Collection	Which collection should items be selected from.
Display Template	Display templates are used to represent an item in relationship fields - for example to show the value of the Title field.
Filter	Filter the list of items a user can select.

Translations

Special relational interface designed specifically to handle translations. When this field is added to a collection a Languages Collection will be created by Directus on your behalf if it does not already exist.

Configuration	Options
Types	Alias
Languages Collection	Which collection to use for language selection.
Language Indicator Field	The field from your languages collection that identifies the language to the user.
Language Direction Field	The field from your languages collection that identifies the text direction for a selected language.
Default Language	Default language to use.
Use Current User Language	Default to the current users language.

Presentation

Header

A configurable header section that provides rich page headers with titles, subtitles, contextual help information and intertactive action buttons within collections. Can be positioned anywhere in the form layout to guide users and provide quick access to relevant actions.

Configuration	Options
Title	Title text displayed at the top of the header section.
Icon	Icon displayed beside the button label.
Color	Color of the icon displayed when using an icon.
Subtitle	Optional subtitle text displayed below the title for additional context. Note this can contain dynamic values.
Help	Rich text content providing contextual guidance to users. Supports formatting, images, and can be translated.
Help Display	Controls how help content is displayed. Options may include inline, collapsible, or modal views.
Enable Help Translations	Toggle to enable multilingual support for the help content.
Links	Configure action buttons/links. Each can trigger a flow or open a URL, with customizable labels, icons, and button types.

Divider

A horizontal divider to separate fields into different sections.

Button Links

Group of one or more buttons that can trigger a manual flow, or hyperlink to a preset or dynamic URL. Each button link has the following configuration:

Configuration	Options
Label	Label for the button.
Icon	Icon displayed beside the button label.
Type	The colors used by the button. Primary, Normal, Info, Success, Warning, Danger
Action Type	Toggles whether the button will be used to run a flow, or open a hyperlink.
URL	URL to send the user to when the button is clicked. You can use field values from the item to create the URL dynamically.
Flow	Flow to be run when the button is clicked. The flow must have a manual trigger and be configured for the relevant collection.

Notice

An alert or notice interface to notify users of important information.

<!-- TODO: Document config options -->

Groups

Accordion

User-controlled showing and hiding of fields within the group by clicking on each field.

Configuration	Options
Accordion Mode	Toggle whether only one section can be open at a time.
Start	All Closed, First Opened

Detail Group

User-controlled showing and hiding of sub-groups by clicking on the group header.

Configuration	Options
Types	Alias

Raw Group

Interface that groups multiple fields together in the data model, with no visual distinction.

Configuration	Options
Types	Alias

Other

Collection Item Dropdown

Dropdown to select an item from an existing collection.

Configuration	Options
Types	JSON
Collection	Which collection should the item be selected from.
Display Template	Display templates are used to represent an item in relationship fields - for example to show the value of the Title field.
Filter	Filter the list of items a user can select.

Collection Item Dropdown (Multiple)

Dropdown to select multiple items from an existing collection.

Configuration	Options
Types	JSON
Collection	Which collection should the items be selected from.
Display Template	Display templates are used to represent an item in relationship fields - for example to show the value of the Title field.
Filter	Filter the list of items a user can select.

Hash

Text input that allows users to hash the value on save. The Directus APIs can be used to verify the hash.

Configuration	Options
Types	Hash
Masked	Toggle raw value visibility before save.

<!-- TODO: Document missing values, like placeholder and masking -->

Slider

Range input that allows users to select a number with an interactive slider.

Configuration	Options
Types	Integer, Decimal, Big Integer, Float
Minimum Value	Minimum value that can be set by the user.
Maximum Value	Maximum value that can be set by the user.
Step Interval	Specify the size of each increment (or step) of the slider control.
Always show value	Toggle visibility of the numeric value below the slider.