diff --git a/assets/index.html b/assets/index.html
index e4cf73b85..2ed400284 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -17,6 +17,18 @@
         max-width: 700px;
       }
 
+      div {
+        margin-bottom: 1rem;
+
+        label {
+          display: block;
+        }
+
+        textarea {
+          width: 100%;
+        }
+      }
+
       #output {
         margin: 1rem 0 0;
       }
@@ -72,7 +84,21 @@
   </head>
   <body>
     <main>
-      <trix-editor autofocus class="trix-content" input="input"></trix-editor>
+      <form>
+        <h1>Form with required textarea field</h1>
+        <div>
+          <trix-editor autofocus required class="trix-content" input="input"></trix-editor>
+        </div>
+
+        <div>
+          <label for="comments">Your comments</label>
+          <textarea id="comments" required></textarea>
+        </div>
+
+        <div>
+          <input type="submit" />
+        </div>
+      </form>
       <details id="output">
         <summary>Output</summary>
         <textarea readonly id="input"></textarea>
diff --git a/src/trix/elements/trix_editor_element.js b/src/trix/elements/trix_editor_element.js
index 33877cc1a..9ed5cdbf2 100644
--- a/src/trix/elements/trix_editor_element.js
+++ b/src/trix/elements/trix_editor_element.js
@@ -25,6 +25,14 @@ const autofocus = function(element) {
   }
 }
 
+const makeRequired = function(element) {
+  if (element.hasAttribute("required")) {
+    // element.inputElement.removeAttribute("readonly")
+    element.inputElement.required = true
+    console.log("input", element.inputElement)
+  }
+}
+
 const makeEditable = function(element) {
   if (element.hasAttribute("contenteditable")) {
     return
@@ -257,6 +265,7 @@ export default class TrixEditorElement extends HTMLElement {
   connectedCallback() {
     if (!this.hasAttribute("data-trix-internal")) {
       makeEditable(this)
+      makeRequired(this)
       addAccessibilityRole(this)
       ensureAriaLabel(this)
 
