diff --git a/core/lib/Drupal/Core/Render/Element/Details.php b/core/lib/Drupal/Core/Render/Element/Details.php
index c45810ef2dfc9c1e53ea13163bd55ad39871132d..cf57bc7f4d132ec406f16d1437c953d7525fa315 100644
--- a/core/lib/Drupal/Core/Render/Element/Details.php
+++ b/core/lib/Drupal/Core/Render/Element/Details.php
@@ -54,9 +54,9 @@ public function getInfo() {
   public static function preRenderDetails($element) {
     Element::setAttributes($element, array('id'));
 
-    // The .form-wrapper class is required for #states to treat details like
+    // The .js-form-wrapper class is required for #states to treat details like
     // containers.
-    static::setAttributes($element, array('form-wrapper'));
+    static::setAttributes($element, array('js-form-wrapper', 'form-wrapper'));
 
     // Collapsible details.
     $element['#attached']['library'][] = 'core/drupal.collapse';
diff --git a/core/misc/states.js b/core/misc/states.js
index 3a67aeaae71cd02a373056fc2d460a01e999e052..9472848e8aca02e7fb7ecd95d3944e677a06324c 100644
--- a/core/misc/states.js
+++ b/core/misc/states.js
@@ -596,7 +596,7 @@
     if (e.trigger) {
       $(e.target)
         .prop('disabled', e.value)
-        .closest('.form-item, .js-form-submit, .form-wrapper').toggleClass('form-disabled', e.value)
+        .closest('.form-item, .js-form-submit, .js-form-wrapper').toggleClass('form-disabled', e.value)
         .find('select, input, textarea').prop('disabled', e.value);
 
       // Note: WebKit nightlies don't reflect that change correctly.
@@ -607,21 +607,21 @@
   $(document).on('state:required', function (e) {
     if (e.trigger) {
       if (e.value) {
-        var $label = $(e.target).attr({'required': 'required', 'aria-required': 'aria-required'}).closest('.form-item, .form-wrapper').find('label');
+        var $label = $(e.target).attr({'required': 'required', 'aria-required': 'aria-required'}).closest('.form-item, .js-form-wrapper').find('label');
         // Avoids duplicate required markers on initialization.
         if (!$label.hasClass('form-required').length) {
           $label.addClass('form-required');
         }
       }
       else {
-        $(e.target).removeAttr('required aria-required').closest('.form-item, .form-wrapper').find('label.form-required').removeClass('form-required');
+        $(e.target).removeAttr('required aria-required').closest('.form-item, .js-form-wrapper').find('label.form-required').removeClass('form-required');
       }
     }
   });
 
   $(document).on('state:visible', function (e) {
     if (e.trigger) {
-      $(e.target).closest('.form-item, .js-form-submit, .form-wrapper').toggle(e.value);
+      $(e.target).closest('.form-item, .js-form-submit, .js-form-wrapper').toggle(e.value);
     }
   });
 
diff --git a/core/modules/system/templates/container.html.twig b/core/modules/system/templates/container.html.twig
index 6fb81591615851437b2bac3f880425e3892b394a..167965c7c3dbf388a5f9df1751841a70d7e1ce20 100644
--- a/core/modules/system/templates/container.html.twig
+++ b/core/modules/system/templates/container.html.twig
@@ -17,4 +17,10 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes.addClass(has_parent ? 'form-wrapper') }}>{{ children }}</div>
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>
diff --git a/core/modules/system/templates/fieldset.html.twig b/core/modules/system/templates/fieldset.html.twig
index aace95077d4206dcf07b4a856c6a445b28405156..a40e1ab94846a45a57d29646f507447aafdbccfb 100644
--- a/core/modules/system/templates/fieldset.html.twig
+++ b/core/modules/system/templates/fieldset.html.twig
@@ -22,7 +22,14 @@
  * @ingroup themeable
  */
 #}
-<fieldset{{ attributes.addClass('form-item', 'form-wrapper') }}>
+{%
+  set classes = [
+    'form-item',
+    'js-form-wrapper',
+    'form-wrapper',
+  ]
+%}
+<fieldset{{ attributes.addClass(classes) }}>
   {%
     set legend_span_classes = [
       'fieldset-legend',
diff --git a/core/modules/views/src/Tests/ViewElementTest.php b/core/modules/views/src/Tests/ViewElementTest.php
index e9c8105577e5b13ced901fc8b5925a071ac73dfb..bd17747ddadf50b7f852a67a176c1e35438f0b5c 100644
--- a/core/modules/views/src/Tests/ViewElementTest.php
+++ b/core/modules/views/src/Tests/ViewElementTest.php
@@ -71,7 +71,7 @@ public function testViewElement() {
     // Test a form.
     $this->drupalGet('views_test_data_element_form');
 
-    $xpath = $this->xpath('//div[@class="views-element-container form-wrapper"]');
+    $xpath = $this->xpath('//div[@class="views-element-container js-form-wrapper form-wrapper"]');
     $this->assertTrue($xpath, 'The view container has been found on the form.');
 
     $xpath = $this->xpath('//div[@class="view-content"]');
@@ -138,7 +138,7 @@ public function testViewElementEmbed() {
     // Test a form.
     $this->drupalGet('views_test_data_element_embed_form');
 
-    $xpath = $this->xpath('//div[@class="views-element-container form-wrapper"]');
+    $xpath = $this->xpath('//div[@class="views-element-container js-form-wrapper form-wrapper"]');
     $this->assertTrue($xpath, 'The view container has been found on the form.');
 
     $xpath = $this->xpath('//div[@class="view-content"]');
diff --git a/core/themes/classy/templates/form/container.html.twig b/core/themes/classy/templates/form/container.html.twig
index 90ff39d7cd4ad1b3d4e72cb242e3ae60a68dd99d..5e5bce8c389657ceeaacea5ec6d889b34d2aaee6 100644
--- a/core/themes/classy/templates/form/container.html.twig
+++ b/core/themes/classy/templates/form/container.html.twig
@@ -15,4 +15,10 @@
  * @see template_preprocess_container()
  */
 #}
-<div{{ attributes.addClass(has_parent ? 'form-wrapper') }}>{{ children }}</div>
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>
diff --git a/core/themes/classy/templates/form/fieldset.html.twig b/core/themes/classy/templates/form/fieldset.html.twig
index 92860742bc84e22d4a67823c2dc2ccda2c506e3a..67b8451bae79790336ad178166b68a63c74a2cfd 100644
--- a/core/themes/classy/templates/form/fieldset.html.twig
+++ b/core/themes/classy/templates/form/fieldset.html.twig
@@ -20,7 +20,14 @@
  * @see template_preprocess_fieldset()
  */
 #}
-<fieldset{{ attributes.addClass('form-item', 'form-wrapper') }}>
+{%
+  set classes = [
+    'form-item',
+    'js-form-wrapper',
+    'form-wrapper',
+  ]
+%}
+<fieldset{{ attributes.addClass(classes) }}>
   {%
     set legend_span_classes = [
       'fieldset-legend',