1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623---
title: Interfaces
description: Manage your data effectively with Directus fields. Discover various field types, interfaces, validations, and relationships to perfectly suit your data modeling needs.
---
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](https://www.tiny.cloud/docs/demo/format-custom/) |
| Options Override | JSON object to override the default config option of the WYSIWYG editor instance. [TinyMCE Documentation](https://www.tiny.cloud/docs/configure/) |
### 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](https://geojson.org/).
::callout{icon="material-symbols:info-outline"}
**Maps Provider**
By default, Directus will use [OpenStreetMap](https://www.openstreetmap.org) to display your mapping data.
[By entering a Mapbox API key](/configuration/general#mapbox), 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](https://fonts.google.com/icons) 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`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :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`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :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`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box"} `parent`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :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`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :icon{name="material-symbols:check-box-outline"} `child2` | `[child1, parent]` |
| :icon{name="material-symbols:check-box"} `parent`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :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`<br>  :icon{name="material-symbols:check-box-outline"} `child1`<br>  :icon{name="material-symbols:check-box-outline"} `child2` | `[parent]` |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :icon{name="material-symbols:check-box-outline"} `child2` | `[child1]` |
| :icon{name="material-symbols:check-box-outline"} `parent`<br>  :icon{name="material-symbols:check-box"} `child1`<br>  :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](/guides/files/manage), 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
Upload a single image file, choose an existing image from the [file library](/guides/files/manage), 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
Upload multiple files, choose existing files from the [file library](/guides/files/manage), 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)
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](/api/utilities#verify-a-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. |