diff --git a/docs/components/modeler/forms/form-element-library/forms-element-library-document-preview.md b/docs/components/modeler/forms/form-element-library/forms-element-library-document-preview.md
new file mode 100644
index 00000000000..452899523ad
--- /dev/null
+++ b/docs/components/modeler/forms/form-element-library/forms-element-library-document-preview.md
@@ -0,0 +1,30 @@
+---
+id: forms-element-library-document-preview
+title: Document preview
+description: A form element to preview documents
+---
+
+A form element to select files.
+
+<img src="/img/form-icons/form-documentPreview.svg" alt="Form Document preview Symbol" />
+
+### Configurable properties
+
+- **Title**: Title displayed on top of the file picker. Can either be an [expression](../../feel/language-guide/feel-expressions-introduction.md), plain text, or [templating syntax](../configuration/forms-config-templating-syntax.md).
+- **Document reference**: Data used to render the documents. This can only be an [expression](../../feel/language-guide/feel-expressions-introduction.md). The resulting value must have the following structure:
+
+```json
+[
+  {
+    "documentId": "u123",
+    "metadata": {
+      "fileName": "Document.pdf",
+      "contentType": "application/pdf"
+    }
+  }
+]
+```
+
+- **Document URL**: A context key which contains the URL value used to get each document. This can only be an [expression](../../feel/language-guide/feel-expressions-introduction.md). The resulting value must be a string and it must contain the placeholder `{documentId}` which will be replaced with the document ID present in the **Document reference** data. By default this component will use the key `defaultDocumentsEndpointKey`, if you leave this field unchanged it will work without any extra configuration on Tasklist and you won't have inject this variable in the process instance context.
+- **Hide if**: [Expression](../../feel/language-guide/feel-expressions-introduction.md) to hide the file picker.
+- **Max height of preview container**: A number which will define the maximum height of each document preview. Any document with a bigger height will display a scroll bar.
diff --git a/docs/components/modeler/forms/sidebar-schema.js b/docs/components/modeler/forms/sidebar-schema.js
index 3e455627265..d4040d1e88d 100644
--- a/docs/components/modeler/forms/sidebar-schema.js
+++ b/docs/components/modeler/forms/sidebar-schema.js
@@ -25,6 +25,7 @@ module.exports = {
         lib_dir + "forms-element-library-table",
         lib_dir + "forms-element-library-expression",
         lib_dir + "forms-element-library-filepicker",
+        lib_dir + "forms-element-library-document-preview",
         lib_dir + "forms-element-library-image",
         lib_dir + "forms-element-library-spacer",
         lib_dir + "forms-element-library-separator",
diff --git a/static/img/form-icons/form-documentPreview.svg b/static/img/form-icons/form-documentPreview.svg
new file mode 100644
index 00000000000..95663ca2e43
--- /dev/null
+++ b/static/img/form-icons/form-documentPreview.svg
@@ -0,0 +1 @@
+<svg width="54" height="54" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" fill="currentcolor" clip-rule="evenodd" d="M17.55 41.175h6.75v2.363h-6.75a2.369 2.369 0 0 1-2.363-2.363v-28.35a2.369 2.369 0 0 1 2.363-2.362h11.813a1.073 1.073 0 0 1 .826.354l8.27 8.269a1.073 1.073 0 0 1 .353.827v7.256H36.45v-4.894h-7.088A2.369 2.369 0 0 1 27 19.913v-7.088h-9.45v28.35Zm18.427-21.262-6.614-6.616v6.616h6.614Zm-2.212 10.564-.015-.001h-.015a8.856 8.856 0 0 0-7.926 5.656l-.003.008a.912.912 0 0 0 0 .62l.003.008a8.854 8.854 0 0 0 7.926 5.655l.015.001h.015a8.856 8.856 0 0 0 7.926-5.656l.003-.008a.911.911 0 0 0 0-.62l-.003-.008a8.854 8.854 0 0 0-7.926-5.655ZM33.75 40.6c-2.456 0-5.088-1.802-6.107-4.151 1.019-2.349 3.651-4.151 6.107-4.151 2.456 0 5.088 1.802 6.107 4.151-1.019 2.349-3.65 4.151-6.107 4.151Zm0-7.593a3.443 3.443 0 1 0 0 6.885 3.443 3.443 0 0 0 0-6.886Zm-.316 1.853a1.62 1.62 0 1 1 .632 3.178 1.62 1.62 0 0 1-.632-3.178Z" /></svg>
\ No newline at end of file