Interfaces | Directus Docs

Interfaces are how users interact with fields in Editor. Each interface supports specific data types and configurations.

Text & Numbers

Input

A standard form text 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)

An autocomplete form text input that shows a dropdown list of options based on a search query

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.

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

Showcase of the block editor with example blocks

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

A code editor input

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

A standard form textarea input

Textarea input for longer plain text.

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

WYSIWYG

A What You See Is What You Get (WYSIWYG) form input that has a toolbar for formatting

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

A markdown text editor with a toolbar with formatting options. Edit and preview tabs.

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.

Selection

Toggle

A toggle form input with label named "Enabled"

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

A date picker input. User can select a calendar date and input a time.

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.

Handling Timezones
The DateTime type does not have timezone information, and will always store values as UTC. The Timestamp type contains timezone information.

Repeater

A repeater field

A repeater field, open

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

An interactive map interface that shows a single point on the east coast of the United States. Map has buttons for zoom, search, and full screen.

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

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

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

Point: A single location on a map.
LineString: A series of points on a map connected in a line.
Polygon: An area of a map drawn by selecting vertices.
Multipoint: A series of disconnected points on a map.
MultiLineString: A series of LineString objects.
MultiPolygon: A series of Polygon objects.
Geometry (All): An series of Point, LineString and Polygon objects.
JSON: A Geometry (All) object stored as JSON.
String: A Geometry (All) object stored a string of characters.
Text: A Geometry (All) object stored as Text.
CSV: A Geometry (All) object stored as comma-separated values.

Default View The default location and zoom settings on the map to show by default

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 text input for color hex codes that allows user to select color modes

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.

A select input with a dropdown of options.

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.

A select input where user can select multiple options from a dropdown.

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

A select input with a dropdown grid of icon choices.

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

A form input with multiple 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)

A form input with a nested tree of multiple parent and child checkboxes.

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`.

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.
Branch returns the top-most values that are selected.
Leaf returns the deepest values that are selected
Indeterminate returns checked items, and always returns a parent when one or more children are selected.
Exclusive returns either the parent or child elements, but not both.

Radio Buttons

A radio button form input with different options to select

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

A file type form input where user can pick from three options: "Upload File From Device", "Choose Files from Library", "Import File from URL"

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.

Image

An image form input where user can pick from three options: "Upload File From Device", "Choose Files from Library", "Import File from URL"

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.

Files

A file type form input where user can select and upload multiple 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.

Builder (M2A)

A form interface that allows users to create a relationship from the current item by selecting different items from multiple, distinct Collections.

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.

Read our tutorial on using a Builder (M2A) to create reusable page components.

Many To Many

A form interface that allows users to select multiple different items from a single collection. Buttons for "Create New" and "Add Existing".

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

A form interface that allows users to select multiple items from a single collection. Buttons for "Create New" and "Add Existing".

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 form interface that shows multiple parent and child items from the same collection. Buttons for "Create New" and "Add Existing".

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

A form interface that allows a user to select a single item from a collection."

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

A form interface with two columns and two fields per column - "Title" and "Content". One column contains the English translation for each field. Second column contains the French translation for each field.

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

Divider

A horizontal divider between two form fields

A horizontal divider to separate fields into different sections.

Button Links

A group of two buttons. One primary button. One default button.

Group of one or more buttons that link to a preset or dynamic URL. Each 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`
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.

Notice

A standard warning notice in yellow with a hazard icon.

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

Groups

Accordion

An accordion interface that allows use to expand and collapse different fields.

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

A group of form fields that are currently hidden behind a toggle.

A group of form fields that are currently visible but can be hidden behind a toggle.

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

Configuration	Options
Types	`Alias`

Raw Group

A group of form fields

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

Configuration	Options
Types	`Alias`

Other

A collection item field

Dropdown to select an item from an existing collection.

Configuration	Options
Types	`JSON`
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.

Hash

Form text input that shows the value is securely hashed.

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.

Slider

A slider input

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.

Fields

Directus fields let you define how your data is stored and displayed. Learn about creating fields, data types, interfaces, validations, relationships, and more. Discover how to configure fields to perfectly suit your data modeling needs in Directus.

Relationships

Leverage Directus relationships to create powerful data connections. Explore Many to One, One to Many, Many to Many, and Many to Any relationships, along with Translations for multilingual content management.

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.