diff --git a/.changeset/shy-olives-rush.md b/.changeset/shy-olives-rush.md
new file mode 100644
index 0000000000..ffd2ef5328
--- /dev/null
+++ b/.changeset/shy-olives-rush.md
@@ -0,0 +1,10 @@
+---
+"@sit-onyx/tiptap": minor
+---
+
+feat(OnyxTextEditor): use `OnyxFormElementV2` internally
+
+- refactor!: change type for `message` and `success` property
+- refactor!: remove `hideLabel` and `labelTooltip` property in favor of `label.hidden` and `label.tooltipText`
+- feat: support left aligned label using `label.position`
+- feat: support new properties: `loading`, `error` `showError`, `required` and `requiredMarker`
diff --git a/packages/sit-onyx/src/components/OnyxFormElementV2/OnyxFormElementV2.vue b/packages/sit-onyx/src/components/OnyxFormElementV2/OnyxFormElementV2.vue
index b9a17e8c6b..384295fd3d 100644
--- a/packages/sit-onyx/src/components/OnyxFormElementV2/OnyxFormElementV2.vue
+++ b/packages/sit-onyx/src/components/OnyxFormElementV2/OnyxFormElementV2.vue
@@ -202,9 +202,13 @@ const popoverLayoutProps = useForwardProps(props, MaybePopoverLayout);
     &:not(.onyx-form-element--suppress-invalid) {
       &.onyx-form-element--touched-invalid:has(
           .onyx-form-element-v2__input:user-invalid,
-          .onyx-form-element-v2__input--touched:invalid
+          .onyx-form-element-v2__input--touched:invalid,
+          .onyx-form-element-v2__input--touched[aria-invalid="true"]
         ),
-      &.onyx-form-element--immediate-invalid:has(.onyx-form-element-v2__input:invalid) {
+      &.onyx-form-element--immediate-invalid:has(
+          .onyx-form-element-v2__input:invalid,
+          .onyx-form-element-v2__input[aria-invalid="true"]
+        ) {
         --onyx-form-element-v2-border-color: var(--onyx-color-component-border-danger);
         --onyx-form-element-v2-border-color-hover: var(--onyx-color-component-border-danger-hover);
         --onyx-form-element-v2-border-color-focus: var(--onyx-color-component-border-danger);
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--chrome-linux.png
index 4045c8ca6e..feba548630 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--firefox-linux.png
index f2d880c4f9..8d5ac2f276 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--webkit-linux.png
index 96ad40d68b..fd25b2a64d 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-autosize--webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-chrome-linux.png
index c2200feb87..406cc859bf 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--chrome-linux.png
index 543b3ecee6..494b9c2688 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--firefox-linux.png
index 33a34e91e7..8c4540824b 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--webkit-linux.png
index 3ab741e91c..a15bf2782a 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-densities--webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--chrome-linux.png
index 9e0bc44f9d..ddf17d2656 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--firefox-linux.png
index 76d6c8290d..5f3dec4f55 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--webkit-linux.png
index e9c6914628..5657b4e472 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-disabled--webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-firefox-linux.png
index 6720cfcf75..383ef506a0 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--chrome-linux.png
index 3736fe3332..721c3ea6e0 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--firefox-linux.png
index b031cfcf96..3e3bb64c88 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--webkit-linux.png
index f26656eb9c..6ead4afdc8 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-manual-resize--webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--chrome-linux.png
index 6583584085..966d36071d 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--firefox-linux.png
index 1ec79fbc11..24ef89508b 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--webkit-linux.png
index 125371301c..dab5b9e79c 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-success--webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--chrome-linux.png
index ed56e4076c..51a09d2d29 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--firefox-linux.png
index 000d466357..81c5eea926 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--webkit-linux.png
index 8a0e6304eb..665f4e7f5c 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-toolbar-position--webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--chrome-linux.png
index 8a270b62b0..bf9f95fa68 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--firefox-linux.png
index af74e9af23..19ed37a719 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--webkit-linux.png
index e68169c6ad..f3139f0974 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-truncation--webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-webkit-linux.png
index e4629e7fa5..efe0e19c9a 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/Text-editor-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-chrome-linux.png
index 51a1135fd3..26ffa3e1fc 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-firefox-linux.png
index 2d128a384d..30ba6162e9 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-webkit-linux.png
index 75f0a6c8d7..5d9555f503 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/blockquote-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-chrome-linux.png
index 0feb38130f..a6d0608c99 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-firefox-linux.png
index a3e8611274..fe22280f74 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-webkit-linux.png
index b7f2cc9bfc..560339d955 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/bold-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-chrome-linux.png
index 3bfd16fb53..cd165ae668 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-firefox-linux.png
index 1a9b6f041b..b9e4f73971 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-chrome-linux.png
index a0eef9a04d..5d655e6942 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-firefox-linux.png
index f190616fd1..092e8be60e 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-webkit-linux.png
index 1b669cc1d8..9ecd3c4887 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-flyout-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-webkit-linux.png
index 87a9466694..3318368ff7 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/headlines-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-chrome-linux.png
index 18b9101799..b9234e1526 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-firefox-linux.png
index b3b61879e8..c0895b91e9 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-webkit-linux.png
index 925e4e23eb..ce36f0f31f 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/italic-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-chrome-linux.png
index 0c030de2a2..d4216010f0 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-firefox-linux.png
index c59d707516..9687b0c705 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-chrome-linux.png
index 3bfac1a98a..ff6ff8da49 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-firefox-linux.png
index d0c3cd9e6c..59f7df3249 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-webkit-linux.png
index 7db4184151..ab6a1e4bee 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-flyout-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-webkit-linux.png
index c1f603a676..1a5f8b69b8 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/link-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-chrome-linux.png
index 9333e4913e..9b08f030a4 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-firefox-linux.png
index 913cf975d4..c29518e9ab 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-chrome-linux.png
index c0703920bf..e82bdfa258 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-firefox-linux.png
index 369cb8590e..786156854a 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-webkit-linux.png
index 7398bbce2e..8cd7cd24a4 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-flyout-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-webkit-linux.png
index 781c7a52cb..de1343719c 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/lists-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-chrome-linux.png
index 72b3f9c441..29f1febf86 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-firefox-linux.png
index 33a330d3a0..2d03431dee 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-webkit-linux.png
index 4b1d1c1401..9b860aa776 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/strike-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-chrome-linux.png
index 0603d393bc..3742a660fe 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-firefox-linux.png
index 47c0c8c2cf..445991961b 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-webkit-linux.png
index 4a93df43c5..536774cc25 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/textAlign-webkit-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-chrome-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-chrome-linux.png
index ebd40c517e..4f0be85c1c 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-chrome-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-chrome-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-firefox-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-firefox-linux.png
index b655ab2d64..f0d5e2acaf 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-firefox-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-firefox-linux.png differ
diff --git a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-webkit-linux.png b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-webkit-linux.png
index 5af88c6030..d96103a282 100644
Binary files a/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-webkit-linux.png and b/packages/tiptap/playwright/snapshots/components/OnyxTextEditor/underline-webkit-linux.png differ
diff --git a/packages/tiptap/src/components/OnyxTextEditor/EditorToolbar.vue b/packages/tiptap/src/components/OnyxTextEditor/EditorToolbar.vue
new file mode 100644
index 0000000000..b5129a0f87
--- /dev/null
+++ b/packages/tiptap/src/components/OnyxTextEditor/EditorToolbar.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import {
+  iconAlignmentBlock,
+  iconAlignmentCenter,
+  iconAlignmentLeft,
+  iconAlignmentRight,
+  iconQuote,
+  iconRedo,
+  iconToolBold,
+  iconToolItalic,
+  iconToolStrike,
+  iconToolUnderlined,
+  iconUndo,
+} from "@sit-onyx/icons";
+import type { Editor } from "@tiptap/vue-3";
+import { injectI18n } from "sit-onyx";
+import { computed } from "vue";
+import { useEditorUtils } from "../../composables/useEditorUtils.js";
+import OnyxEditorToolbarAction from "../OnyxEditorToolbarAction/OnyxEditorToolbarAction.vue";
+import OnyxEditorToolbarGroup from "../OnyxEditorToolbarGroup/OnyxEditorToolbarGroup.vue";
+import HeadingToolbarAction from "./actions/HeadingToolbarAction.vue";
+import LinkToolbarAction from "./actions/LinkToolbarAction.vue";
+import ListToolbarAction from "./actions/ListToolbarAction.vue";
+
+const props = defineProps<{
+  editor?: Editor;
+}>();
+
+const slots = defineSlots<{
+  /**
+   * Optional slot to add custom actions to the toolbar.
+   */
+  default?(): unknown;
+}>();
+
+const { t } = injectI18n();
+const { hasExtension, hasTextExtension } = useEditorUtils(computed(() => props.editor));
+</script>
+
+<template>
+  <div class="onyx-text-editor__toolbar">
+    <div class="onyx-text-editor__actions">
+      <OnyxEditorToolbarGroup>
+        <HeadingToolbarAction v-if="hasExtension('heading')" :editor />
+
+        <ListToolbarAction
+          v-if="hasExtension('bulletList') || hasExtension('orderedList')"
+          :editor
+        />
+      </OnyxEditorToolbarGroup>
+
+      <OnyxEditorToolbarGroup>
+        <OnyxEditorToolbarAction
+          v-if="hasExtension('bold')"
+          :label="t('editor.bold')"
+          :icon="iconToolBold"
+          :active="editor?.isActive('bold')"
+          :disabled="!editor?.can().chain().toggleBold().run()"
+          @click="editor?.chain().focus().toggleBold().run()"
+        />
+        <OnyxEditorToolbarAction
+          v-if="hasExtension('italic')"
+          :label="t('editor.italic')"
+          :icon="iconToolItalic"
+          :active="editor?.isActive('italic')"
+          :disabled="!editor?.can().chain().toggleItalic().run()"
+          @click="editor?.chain().focus().toggleItalic().run()"
+        />
+        <OnyxEditorToolbarAction
+          v-if="hasExtension('underline')"
+          :label="t('editor.underline')"
+          :icon="iconToolUnderlined"
+          :active="editor?.isActive('underline')"
+          :disabled="!editor?.can().chain().toggleUnderline().run()"
+          @click="editor?.chain().focus().toggleUnderline().run()"
+        />
+        <OnyxEditorToolbarAction
+          v-if="hasExtension('strike')"
+          :label="t('editor.strike')"
+          :icon="iconToolStrike"
+          :active="editor?.isActive('strike')"
+          :disabled="!editor?.can().chain().toggleStrike().run()"
+          @click="editor?.chain().focus().toggleStrike().run()"
+        />
+      </OnyxEditorToolbarGroup>
+
+      <OnyxEditorToolbarGroup>
+        <OnyxEditorToolbarAction
+          v-if="hasTextExtension('left')"
+          :label="t('editor.alignments.left')"
+          :icon="iconAlignmentLeft"
+          :active="editor?.isActive({ textAlign: 'left' })"
+          :disabled="!editor?.can().chain().toggleTextAlign('left').run()"
+          @click="editor?.chain().focus().toggleTextAlign('left').run()"
+        />
+        <OnyxEditorToolbarAction
+          v-if="hasTextExtension('center')"
+          :label="t('editor.alignments.center')"
+          :icon="iconAlignmentCenter"
+          :active="editor?.isActive({ textAlign: 'center' })"
+          :disabled="!editor?.can().chain().toggleTextAlign('center').run()"
+          @click="editor?.chain().focus().toggleTextAlign('center').run()"
+        />
+        <OnyxEditorToolbarAction
+          v-if="hasTextExtension('right')"
+          :label="t('editor.alignments.right')"
+          :icon="iconAlignmentRight"
+          :active="editor?.isActive({ textAlign: 'right' })"
+          :disabled="!editor?.can().chain().toggleTextAlign('right').run()"
+          @click="editor?.chain().focus().toggleTextAlign('right').run()"
+        />
+        <OnyxEditorToolbarAction
+          v-if="hasTextExtension('justify')"
+          :label="t('editor.alignments.block')"
+          :icon="iconAlignmentBlock"
+          :active="editor?.isActive({ textAlign: 'justify' })"
+          :disabled="!editor?.can().chain().toggleTextAlign('justify').run()"
+          @click="editor?.chain().focus().toggleTextAlign('justify').run()"
+        />
+      </OnyxEditorToolbarGroup>
+
+      <OnyxEditorToolbarGroup>
+        <LinkToolbarAction v-if="hasExtension('link')" :editor />
+
+        <OnyxEditorToolbarAction
+          v-if="hasExtension('blockquote')"
+          :label="t('editor.blockquote')"
+          :icon="iconQuote"
+          :active="editor?.isActive('blockquote')"
+          :disabled="!editor?.can().chain().toggleBlockquote().run()"
+          @click="editor?.chain().focus().toggleBlockquote().run()"
+        />
+      </OnyxEditorToolbarGroup>
+
+      <OnyxEditorToolbarGroup v-if="slots.default">
+        <slot></slot>
+      </OnyxEditorToolbarGroup>
+    </div>
+
+    <div
+      v-if="hasExtension('undoRedo')"
+      class="onyx-text-editor__actions onyx-text-editor__actions--fixed"
+    >
+      <OnyxEditorToolbarAction
+        :label="t('editor.undo')"
+        :icon="iconUndo"
+        :disabled="!editor?.can().chain().undo().run()"
+        @click="editor?.chain().focus().undo().run()"
+      />
+      <OnyxEditorToolbarAction
+        :label="t('editor.redo')"
+        :icon="iconRedo"
+        :disabled="!editor?.can().chain().redo().run()"
+        @click="editor?.chain().focus().redo().run()"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use "sit-onyx/src/styles/mixins/layers.scss";
+@use "sit-onyx/src/styles/mixins/input.scss";
+
+.onyx-text-editor {
+  @include layers.component() {
+    &__toolbar {
+      border: var(--onyx-form-element-v2-border-size) solid var(--onyx-form-element-v2-border-color);
+      border-radius: inherit;
+      color: var(--onyx-color-text-icons-neutral-medium);
+      background-color: var(--onyx-color-base-background-tinted); // TODO: adjust this in Figma
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 100%;
+      width: 100%;
+
+      border-top-left-radius: var(--onyx-text-editor-input-border-radius-bottom);
+      border-top-right-radius: var(--onyx-text-editor-input-border-radius-bottom);
+      border-bottom-left-radius: var(--onyx-text-editor-input-border-radius-top);
+      border-bottom-right-radius: var(--onyx-text-editor-input-border-radius-top);
+    }
+
+    // styles for top toolbar
+    &:not(&--toolbar-bottom) {
+      .onyx-text-editor__toolbar {
+        border-bottom: none;
+      }
+    }
+
+    // styles for bottom toolbar
+    &--toolbar-bottom {
+      .onyx-text-editor__toolbar {
+        border-top: none;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: var(--onyx-density-xs);
+      overflow: auto;
+      padding: var(--onyx-form-element-v2-padding-block) var(--onyx-form-element-v2-padding-inline);
+
+      &--fixed {
+        overflow: visible;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.ct.tsx b/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.ct.tsx
index 6d40081826..54892edff9 100644
--- a/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.ct.tsx
+++ b/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.ct.tsx
@@ -51,10 +51,8 @@ test.describe("Screenshot tests (truncation)", () => {
       return (
         <OnyxTextEditor
           style={{ maxWidth: "12.5rem" }}
-          label={label}
-          labelTooltip="Label tooltip"
-          hideLabel={row === "hideLabel"}
-          message={{ shortMessage: message, longMessage: "Message tooltip" }}
+          label={{ label, tooltipText: "Label tooltip", hidden: row === "hideLabel" }}
+          message={{ label: message, tooltipText: "Message tooltip" }}
         />
       );
     },
@@ -78,13 +76,14 @@ test.describe("Screenshot tests (truncation)", () => {
 test.describe("Screenshot tests (disabled)", () => {
   executeMatrixScreenshotTest({
     name: "Text editor (disabled)",
-    columns: ["disabled"],
+    columns: ["disabled", "loading"],
     rows: ["default", "hover", "focus"],
     component: (column) => (
       <OnyxTextEditor
         label="Test label"
         disabled={column === "disabled"}
         modelValue="Filled value"
+        loading={column === "loading"}
       />
     ),
     hooks: {
@@ -241,6 +240,7 @@ test.describe("extensions", () => {
       }
 
       await editor.pressSequentially("Plain text");
+      await page.getByRole("document").click({ position: { x: 0, y: 0 } }); // reset focus
 
       // ASSERT
       await expect(component).toHaveScreenshot("headlines.png");
@@ -310,6 +310,7 @@ test.describe("extensions", () => {
       await editor.pressSequentially("Option 2");
 
       // ASSERT
+      await page.getByRole("document").click({ position: { x: 0, y: 0 } }); // reset focus
       await expect(component).toHaveScreenshot("lists.png");
 
       // ACT
@@ -490,7 +491,7 @@ test.describe("extensions", () => {
   });
 
   test.describe("textAlign", () => {
-    test("should support textAlign", async ({ mount }) => {
+    test("should support textAlign", async ({ mount, page }) => {
       // ARRANGE
       const component = await mount(<TestCase label="Test label" />);
       const editor = component.getByLabel("Test label");
@@ -514,6 +515,8 @@ test.describe("extensions", () => {
         }
       }
 
+      await hoverAction(page, "Block aligned");
+
       // ASSERT
       await expect(component).toHaveScreenshot("textAlign.png");
     });
@@ -572,7 +575,7 @@ test.describe("extensions", () => {
   });
 
   test.describe("link", () => {
-    test("should support link", async ({ mount }) => {
+    test("should support link", async ({ mount, page }) => {
       // ARRANGE
       const component = await mount(<TestCase label="Test label" />);
       const editor = component.getByLabel("Test label");
@@ -628,6 +631,7 @@ test.describe("extensions", () => {
       await editor.pressSequentially(" followed by regular text");
 
       // ASSERT
+      await page.getByRole("document").click({ position: { x: 0, y: 0 } }); // reset focus
       await expect(component).toHaveScreenshot("link.png");
     });
 
@@ -728,6 +732,55 @@ test("should disable all actions if editor is disabled", async ({ mount }) => {
   await expect(headingTooltip).toBeHidden();
 });
 
+test("should show error", async ({ mount }) => {
+  // ARRANGE
+  const component = await mount(OnyxTextEditor, {
+    props: {
+      label: "Test label",
+      required: true,
+    },
+  });
+
+  const input = component.getByLabel("Test label");
+  const error = component.locator(".onyx-form-element-v2__message--danger");
+
+  // ASSERT
+  await expect(error).toBeHidden();
+
+  // ACT
+  await component.update({ props: { showError: true } });
+
+  // ASSERT
+  await expect(error, "should show immediately when 'showError' is true").toBeVisible();
+  await expect(error).toContainText("Required");
+
+  // ACT
+  await component.update({ props: { showError: "touched" } });
+
+  // ASSERT
+  await expect(error).toBeHidden();
+
+  // ACT
+  await input.fill("Filled value");
+
+  // ASSERT
+  await expect(error).toBeHidden();
+
+  // ACT
+  await input.clear();
+
+  // ASSERT
+  await expect(error, "should show error when touched").toBeVisible();
+  await expect(error).toContainText("Required");
+
+  // ACT
+  await component.update({ props: { error: "Custom error" } });
+
+  // ASSERT
+  await expect(error, "should show custom error").toBeVisible();
+  await expect(error).toContainText("Custom error");
+});
+
 /**
  * Expects that the given editor toolbar flyout option is selected.
  */
@@ -756,8 +809,8 @@ async function expectFlyoutOptionSelected(page: Page, label: string, optionName:
  * Useful when capturing screenshots.
  */
 async function hoverAction(page: Page, label: string) {
-  // reset hover
-  await page.getByRole("document").hover({ position: { x: 0, y: 0 } });
+  // reset focus
+  await page.getByRole("document").click({ position: { x: 0, y: 0 } });
   await page.getByRole("button", { name: label }).hover();
   await expect(page.getByRole("tooltip", { name: label })).toBeVisible();
 }
diff --git a/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.stories.ts b/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.stories.ts
index f237f8e9c5..2e29a55fe9 100644
--- a/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.stories.ts
+++ b/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.stories.ts
@@ -15,7 +15,7 @@ const meta: Meta<typeof OnyxTextEditor> = {
     actions: { control: { disable: true } },
   },
   args: {
-    style: "width: max-content",
+    style: "max-width: 32rem",
   },
 };
 
@@ -37,6 +37,35 @@ export const BottomToolbar = {
   },
 } satisfies Story;
 
+export const Skeleton = {
+  args: {
+    ...Default.args,
+    skeleton: true,
+  },
+} satisfies Story;
+
+export const LeftLabel = {
+  args: {
+    label: { label: Default.args.label, position: "left" },
+  },
+} satisfies Story;
+
+export const Required = {
+  args: {
+    ...Default.args,
+    required: true,
+  },
+} satisfies Story;
+
+export const CustomError = {
+  args: {
+    ...Default.args,
+    message: undefined,
+    error: { label: "Custom error", tooltipText: "Tooltip text" },
+    showError: true,
+  },
+} satisfies Story;
+
 export const CustomizedStarterKit = createAdvancedStoryExample(
   "OnyxTextEditor",
   "StarterKitExample",
diff --git a/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.vue b/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.vue
index 11eb9cd741..e970d7dc62 100644
--- a/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.vue
+++ b/packages/tiptap/src/components/OnyxTextEditor/OnyxTextEditor.vue
@@ -1,43 +1,29 @@
 <script lang="ts" setup>
-import {
-  iconAlignmentBlock,
-  iconAlignmentCenter,
-  iconAlignmentLeft,
-  iconAlignmentRight,
-  iconQuote,
-  iconRedo,
-  iconToolBold,
-  iconToolItalic,
-  iconToolStrike,
-  iconToolUnderlined,
-  iconUndo,
-} from "@sit-onyx/icons";
 import { Placeholder } from "@tiptap/extensions/placeholder";
 import { EditorContent, mergeAttributes, useEditor } from "@tiptap/vue-3";
 import {
   FORM_INJECTED_SYMBOL,
-  getFormMessages,
   injectI18n,
-  OnyxFormElement,
+  OnyxUnstableFormElementV2,
+  SKELETON_INJECTED_SYMBOL,
   useFormContext,
   useForwardProps,
   useVModel,
+  type FormElementV2Tooltip,
 } from "sit-onyx";
-import { computed, provide, watch } from "vue";
-import { useEditorUtils } from "../../composables/useEditorUtils.js";
-import OnyxEditorToolbarAction from "../OnyxEditorToolbarAction/OnyxEditorToolbarAction.vue";
-import OnyxEditorToolbarGroup from "../OnyxEditorToolbarGroup/OnyxEditorToolbarGroup.vue";
-import HeadingToolbarAction from "./actions/HeadingToolbarAction.vue";
-import LinkToolbarAction from "./actions/LinkToolbarAction.vue";
-import ListToolbarAction from "./actions/ListToolbarAction.vue";
+import { computed, provide, ref, useTemplateRef, watch, type StyleValue } from "vue";
+import EditorToolbar from "./EditorToolbar.vue";
 import { OnyxStarterKit } from "./extensions/starterKit.js";
 import { TEXT_EDITOR_INJECTION_KEY, type OnyxTextEditorProps } from "./types.js";
 
 const props = withDefaults(defineProps<OnyxTextEditorProps>(), {
   toolbar: () => ({ position: "top" }),
   disabled: FORM_INJECTED_SYMBOL,
-  extensions: () => [OnyxStarterKit],
   reserveMessageSpace: FORM_INJECTED_SYMBOL,
+  showError: FORM_INJECTED_SYMBOL,
+  requiredMarker: FORM_INJECTED_SYMBOL,
+  skeleton: SKELETON_INJECTED_SYMBOL,
+  extensions: () => [OnyxStarterKit],
 });
 
 const emit = defineEmits<{
@@ -47,7 +33,7 @@ const emit = defineEmits<{
   "update:modelValue": [value: string];
 }>();
 
-const slots = defineSlots<{
+defineSlots<{
   /**
    * Optional slot to add custom actions to the toolbar.
    */
@@ -55,7 +41,8 @@ const slots = defineSlots<{
 }>();
 
 const { t } = injectI18n();
-const { disabled } = useFormContext(props);
+const formContext = useFormContext(props);
+const disabled = computed(() => formContext.disabled.value || props.loading);
 provide(TEXT_EDITOR_INJECTION_KEY, { disabled });
 
 const modelValue = useVModel({
@@ -77,7 +64,7 @@ const editor = useEditor({
   ],
   editorProps: {
     attributes: {
-      class: "onyx-text-editor__native",
+      class: "onyx-form-element-v2__input onyx-text-editor__input",
       role: "textbox",
     },
   },
@@ -111,8 +98,33 @@ watch(
   { immediate: true },
 );
 
+/**
+ * The Tiptap editor uses a contenteditable div so it does not support the native CSS ":invalid" for showing the error.
+ * To workaround this, the track if the value has ever been changed and consider this as "touched" / interacted.
+ */
+const isTouched = ref(false);
+watch(modelValue, () => (isTouched.value = true), { once: true });
+
+/**
+ * The Tiptap editor uses a contenteditable div so it does not support native form validation.
+ * To workaround this, we determine if the editor is invalid manually.
+ */
+const error = computed<string | FormElementV2Tooltip | undefined>(() => {
+  if (props.error) return props.error;
+
+  // determine validations manually
+  if (props.required && editor.value?.isEmpty) {
+    return {
+      label: t.value("validations.valueMissing.preview"),
+      tooltipText: t.value("validations.valueMissing.fullError"),
+    };
+  }
+
+  return undefined;
+});
+
 watch(
-  [() => props.label, () => props.disableManualResize, editor],
+  [() => props.label, () => props.disableManualResize, editor, isTouched, error],
   () => {
     const attributes = editor.value?.options.editorProps.attributes;
 
@@ -122,9 +134,14 @@ watch(
           const currentAttributes =
             typeof attributes === "function" ? attributes(state) : (attributes ?? {});
 
+          const classes: string[] = [];
+          if (props.disableManualResize) classes.push("onyx-text-editor__input--no-resize");
+          if (isTouched.value) classes.push("onyx-form-element-v2__input--touched");
+
           return mergeAttributes(currentAttributes, {
             "aria-label": props.label,
-            class: props.disableManualResize ? "onyx-text-editor__native--no-resize" : undefined,
+            class: classes,
+            "aria-invalid": error.value ? "true" : "false",
           });
         },
       },
@@ -141,30 +158,31 @@ watch(
   },
 );
 
-const formElementProps = useForwardProps(props, OnyxFormElement);
+const formElementV2Props = useForwardProps(props, OnyxUnstableFormElementV2);
 
 /**
  * Current CSS variables for the autosize min/max height.
  */
-const autosizeMinMaxStyles = computed(() => {
+const autosizeMinMaxStyles = computed<StyleValue>(() => {
   if (!props.autosize) return;
   const min = props.autosize.min ? Math.max(props.autosize.min, 2) : undefined; // ensure min is not smaller than 2
   const max = props.autosize.max;
-  return [
-    min ? `--onyx-text-editor-min-autosize-rows: ${min}` : "",
-    `--onyx-text-editor-max-autosize-rows: ${max ?? "unset"}`,
-  ];
+  return {
+    "--onyx-text-editor-autosize-min-rows": min,
+    "--onyx-text-editor-autosize-max-rows": max ?? "unset",
+  };
 });
 
-const successMessages = computed(() => getFormMessages(props.success));
-const message = computed(() => getFormMessages(props.message));
-
-const { hasExtension, hasTextExtension } = useEditorUtils(editor);
-
 const autosizeValue = computed(() => {
   return editor.value?.getText({ blockSeparator: "\n" });
 });
 
+const formElement = useTemplateRef("formElement");
+const toolbarTeleportTarget = computed(() => {
+  const el = formElement.value?.$el as HTMLElement | undefined;
+  return el?.querySelector(".onyx-form-element-v2__content");
+});
+
 defineExpose({
   /**
    * Tiptap editor instance.
@@ -174,166 +192,50 @@ defineExpose({
 </script>
 
 <template>
-  <OnyxFormElement
-    v-bind="formElementProps"
-    class="onyx-text-editor"
+  <OnyxUnstableFormElementV2
+    v-bind="formElementV2Props"
+    ref="formElement"
+    :error
+    :class="[
+      'onyx-text-editor',
+      { 'onyx-text-editor--toolbar-bottom': props.toolbar?.position === 'bottom' },
+    ]"
     :style="autosizeMinMaxStyles"
-    :message
-    :success-messages
   >
-    <div
-      :class="[
-        'onyx-text-editor__body',
-        { 'onyx-text-editor__body--reverse': props.toolbar?.position === 'bottom' },
-      ]"
-    >
-      <div class="onyx-text-editor__toolbar">
-        <div class="onyx-text-editor__actions">
-          <OnyxEditorToolbarGroup>
-            <HeadingToolbarAction v-if="hasExtension('heading')" :editor />
-
-            <ListToolbarAction
-              v-if="hasExtension('bulletList') || hasExtension('orderedList')"
-              :editor
-            />
-          </OnyxEditorToolbarGroup>
-
-          <OnyxEditorToolbarGroup>
-            <OnyxEditorToolbarAction
-              v-if="hasExtension('bold')"
-              :label="t('editor.bold')"
-              :icon="iconToolBold"
-              :active="editor?.isActive('bold')"
-              :disabled="!editor?.can().chain().toggleBold().run()"
-              @click="editor?.chain().focus().toggleBold().run()"
-            />
-            <OnyxEditorToolbarAction
-              v-if="hasExtension('italic')"
-              :label="t('editor.italic')"
-              :icon="iconToolItalic"
-              :active="editor?.isActive('italic')"
-              :disabled="!editor?.can().chain().toggleItalic().run()"
-              @click="editor?.chain().focus().toggleItalic().run()"
-            />
-            <OnyxEditorToolbarAction
-              v-if="hasExtension('underline')"
-              :label="t('editor.underline')"
-              :icon="iconToolUnderlined"
-              :active="editor?.isActive('underline')"
-              :disabled="!editor?.can().chain().toggleUnderline().run()"
-              @click="editor?.chain().focus().toggleUnderline().run()"
-            />
-            <OnyxEditorToolbarAction
-              v-if="hasExtension('strike')"
-              :label="t('editor.strike')"
-              :icon="iconToolStrike"
-              :active="editor?.isActive('strike')"
-              :disabled="!editor?.can().chain().toggleStrike().run()"
-              @click="editor?.chain().focus().toggleStrike().run()"
-            />
-          </OnyxEditorToolbarGroup>
-
-          <OnyxEditorToolbarGroup>
-            <OnyxEditorToolbarAction
-              v-if="hasTextExtension('left')"
-              :label="t('editor.alignments.left')"
-              :icon="iconAlignmentLeft"
-              :active="editor?.isActive({ textAlign: 'left' })"
-              :disabled="!editor?.can().chain().toggleTextAlign('left').run()"
-              @click="editor?.chain().focus().toggleTextAlign('left').run()"
-            />
-            <OnyxEditorToolbarAction
-              v-if="hasTextExtension('center')"
-              :label="t('editor.alignments.center')"
-              :icon="iconAlignmentCenter"
-              :active="editor?.isActive({ textAlign: 'center' })"
-              :disabled="!editor?.can().chain().toggleTextAlign('center').run()"
-              @click="editor?.chain().focus().toggleTextAlign('center').run()"
-            />
-            <OnyxEditorToolbarAction
-              v-if="hasTextExtension('right')"
-              :label="t('editor.alignments.right')"
-              :icon="iconAlignmentRight"
-              :active="editor?.isActive({ textAlign: 'right' })"
-              :disabled="!editor?.can().chain().toggleTextAlign('right').run()"
-              @click="editor?.chain().focus().toggleTextAlign('right').run()"
-            />
-            <OnyxEditorToolbarAction
-              v-if="hasTextExtension('justify')"
-              :label="t('editor.alignments.block')"
-              :icon="iconAlignmentBlock"
-              :active="editor?.isActive({ textAlign: 'justify' })"
-              :disabled="!editor?.can().chain().toggleTextAlign('justify').run()"
-              @click="editor?.chain().focus().toggleTextAlign('justify').run()"
-            />
-          </OnyxEditorToolbarGroup>
-
-          <OnyxEditorToolbarGroup>
-            <LinkToolbarAction v-if="hasExtension('link')" :editor />
-
-            <OnyxEditorToolbarAction
-              v-if="hasExtension('blockquote')"
-              :label="t('editor.blockquote')"
-              :icon="iconQuote"
-              :active="editor?.isActive('blockquote')"
-              :disabled="!editor?.can().chain().toggleBlockquote().run()"
-              @click="editor?.chain().focus().toggleBlockquote().run()"
-            />
-          </OnyxEditorToolbarGroup>
-
-          <OnyxEditorToolbarGroup v-if="slots.actions">
-            <slot name="actions"></slot>
-          </OnyxEditorToolbarGroup>
-        </div>
-
-        <div
-          v-if="hasExtension('undoRedo')"
-          class="onyx-text-editor__actions onyx-text-editor__actions--fixed"
-        >
-          <OnyxEditorToolbarAction
-            :label="t('editor.undo')"
-            :icon="iconUndo"
-            :disabled="!editor?.can().chain().undo().run()"
-            @click="editor?.chain().focus().undo().run()"
-          />
-          <OnyxEditorToolbarAction
-            :label="t('editor.redo')"
-            :icon="iconRedo"
-            :disabled="!editor?.can().chain().redo().run()"
-            @click="editor?.chain().focus().redo().run()"
-          />
-        </div>
-      </div>
-
-      <EditorContent
-        class="onyx-text-editor__wrapper"
-        :data-autosize-value="autosizeValue"
-        :editor
-      />
-    </div>
-  </OnyxFormElement>
+    <Teleport v-if="toolbarTeleportTarget" :to="toolbarTeleportTarget">
+      <EditorToolbar :editor>
+        <slot name="actions"> </slot>
+      </EditorToolbar>
+    </Teleport>
+
+    <EditorContent class="onyx-text-editor__wrapper" :data-autosize-value="autosizeValue" :editor />
+  </OnyxUnstableFormElementV2>
 </template>
 
 <style lang="scss">
 @use "sit-onyx/src/styles/mixins/layers.scss";
 @use "sit-onyx/src/styles/mixins/input.scss";
 
-.onyx-text-editor,
-.onyx-text-editor-skeleton {
+.onyx-text-editor {
   @include layers.component() {
-    --onyx-text-editor-min-autosize-rows: 3;
-    --onyx-text-editor-max-autosize-rows: 10;
-    --onyx-text-editor-padding-block: var(--onyx-density-xs);
+    --onyx-text-editor-autosize-min-rows: 3;
+    --onyx-text-editor-autosize-max-rows: 10;
 
+    // calculated values
     --onyx-text-editor-min-height: calc(
-      var(--onyx-text-editor-min-autosize-rows) * 1lh + 2 * var(--onyx-text-editor-padding-block)
+      var(--onyx-text-editor-autosize-min-rows) * 1lh + 2 *
+        var(--onyx-form-element-v2-padding-block)
     );
     --onyx-text-editor-max-height: calc(
-      var(--onyx-text-editor-max-autosize-rows) * 1lh + 2 * var(--onyx-text-editor-padding-block)
+      var(--onyx-text-editor-autosize-max-rows) * 1lh + 2 *
+        var(--onyx-form-element-v2-padding-block)
     );
 
+    // needed for correct skeleton height
+    --onyx-form-element-v2-content-height: calc(1lh * var(--onyx-text-editor-autosize-min-rows));
+
     // remove max height and disable auto-sizing if user resizes the textarea manually
-    &:has(.onyx-text-editor__native[style*="height"]) {
+    &:has(.onyx-text-editor__input[style*="height"]) {
       --onyx-text-editor-max-height: unset;
 
       .onyx-text-editor__wrapper::after {
@@ -367,19 +269,22 @@ defineExpose({
 
 .onyx-text-editor {
   @include layers.component() {
-    @include input.define-shared-styles(
-      $base-selector: ".onyx-text-editor",
-      $vertical-padding: var(--onyx-text-editor-padding-block)
-    );
-
+    --onyx-text-editor-flex-direction: column-reverse;
+    --onyx-text-editor-input-border-radius-top: 0;
+    --onyx-text-editor-input-border-radius-bottom: var(--onyx-form-element-v2-border-radius);
     max-width: 100%;
 
+    &--toolbar-bottom {
+      --onyx-text-editor-flex-direction: column;
+      --onyx-text-editor-input-border-radius-top: var(--onyx-form-element-v2-border-radius);
+      --onyx-text-editor-input-border-radius-bottom: 0;
+    }
+
     &__wrapper {
       padding: 0;
-      height: unset;
       display: grid;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      width: 100%;
+      height: 100%;
 
       // auto-resize, based on: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas
       &::after {
@@ -392,79 +297,51 @@ defineExpose({
       }
     }
 
+    // scope styles so they do not apply to nested content, e.g. inside the toolbar
+    > .onyx-form-element-v2__body > .onyx-form-element-v2__content {
+      height: unset; // needed for autosize to work
+      flex-direction: var(--onyx-text-editor-flex-direction);
+
+      > .onyx-form-element-v2__input-container {
+        width: 100%;
+        align-items: flex-start; // top align slots (loading indicator etc.)
+        border-top-left-radius: var(--onyx-text-editor-input-border-radius-top);
+        border-top-right-radius: var(--onyx-text-editor-input-border-radius-top);
+        border-bottom-left-radius: var(--onyx-text-editor-input-border-radius-bottom);
+        border-bottom-right-radius: var(--onyx-text-editor-input-border-radius-bottom);
+
+        // needed so toolbar does not overlay the outline
+        &:focus-within {
+          z-index: 0;
+        }
+      }
+    }
+
     /**
      * Styles that are shared between the <textarea> and the ::after element of the wrapper
      * that is used for the autosize feature.
      */
     &__wrapper:after,
-    &__native {
+    &__input {
       grid-area: 1 / 1;
       height: 100%;
       min-height: var(--onyx-text-editor-min-height);
       max-height: var(--onyx-text-editor-max-height);
-      padding: var(--onyx-text-editor-padding-block) var(--onyx-density-sm);
+      padding: var(--onyx-form-element-v2-padding-block) var(--onyx-form-element-v2-padding-inline);
       word-break: break-word;
     }
 
-    &__native {
+    &__input {
       @include content-styles();
       resize: vertical;
       overflow-y: auto;
+      overflow-x: unset;
+      white-space: pre-line;
 
       &--no-resize {
         resize: none;
       }
     }
-
-    &__body {
-      display: flex;
-      flex-direction: column;
-
-      &--reverse {
-        flex-direction: column-reverse;
-
-        .onyx-text-editor__toolbar {
-          border-top: none;
-          border-bottom: var(--onyx-1px-in-rem) solid var(--border-color);
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-          border-bottom-left-radius: var(--border-radius);
-          border-bottom-right-radius: var(--border-radius);
-        }
-
-        .onyx-text-editor__wrapper {
-          border-top-left-radius: var(--border-radius);
-          border-top-right-radius: var(--border-radius);
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-    }
-
-    &__toolbar {
-      border: var(--onyx-1px-in-rem) solid var(--border-color);
-      border-bottom: none;
-      border-top-left-radius: var(--border-radius);
-      border-top-right-radius: var(--border-radius);
-      color: var(--onyx-color-text-icons-neutral-medium);
-      background-color: var(--onyx-color-base-background-tinted); // TODO: adjust this in Figma
-
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    &__actions {
-      display: flex;
-      align-items: center;
-      gap: var(--onyx-density-xs);
-      overflow: auto;
-      padding: var(--onyx-text-editor-padding-block);
-
-      &--fixed {
-        overflow: visible;
-      }
-    }
   }
 }
 </style>
diff --git a/packages/tiptap/src/components/OnyxTextEditor/types.ts b/packages/tiptap/src/components/OnyxTextEditor/types.ts
index e736fe279c..b4f98f5466 100644
--- a/packages/tiptap/src/components/OnyxTextEditor/types.ts
+++ b/packages/tiptap/src/components/OnyxTextEditor/types.ts
@@ -1,38 +1,31 @@
 import type { Extensions } from "@tiptap/vue-3";
-import type { Nullable, OnyxTextareaProps } from "sit-onyx";
+import type {
+  Nullable,
+  OnyxFormElementV2Props,
+  OnyxTextareaProps,
+  SharedFormElementProps,
+} from "sit-onyx";
 import type { InjectionKey, Ref } from "vue";
 
 // TODO: consider the following features if possible:
-// required, min/max length, custom errors, autocapitalize
-export type OnyxTextEditorProps = Pick<
-  OnyxTextareaProps,
-  | "label"
-  | "labelTooltip"
-  | "disableManualResize"
-  | "disabled"
-  | "hideLabel"
-  | "autosize"
-  | "autofocus"
-  | "message"
-  | "success"
-  | "density"
-  | "placeholder"
-  | "reserveMessageSpace"
-> & {
-  /**
-   * Current editor value.
-   */
-  modelValue?: Nullable<string>;
-  /**
-   * Toolbar config.
-   */
-  toolbar?: ToolbarOptions;
-  /**
-   * Tiptap extensions to use. Should not be changed dynamically.
-   * If set, default extensions will be overridden. Use or configure the OnyxStarterKit in this case.
-   */
-  extensions?: Extensions;
-};
+// min/max length, autocapitalize
+export type OnyxTextEditorProps = Omit<OnyxFormElementV2Props, "open" | "popoverOptions" | "id"> &
+  Pick<SharedFormElementProps, "disabled" | "autofocus" | "placeholder"> &
+  Pick<OnyxTextareaProps, "disableManualResize" | "autosize"> & {
+    /**
+     * Current editor value.
+     */
+    modelValue?: Nullable<string>;
+    /**
+     * Toolbar config.
+     */
+    toolbar?: ToolbarOptions;
+    /**
+     * Tiptap extensions to use. Should not be changed dynamically.
+     * If set, default extensions will be overridden. Use or configure the OnyxStarterKit in this case.
+     */
+    extensions?: Extensions;
+  };
 
 export type ToolbarOptions = {
   /**