diff --git a/core/lib/Drupal/Core/Render/Element/Details.php b/core/lib/Drupal/Core/Render/Element/Details.php
index c45810e..6035314 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'));
 
     // Collapsible details.
     $element['#attached']['library'][] = 'core/drupal.collapse';
diff --git a/core/misc/states.js b/core/misc/states.js
index 680e86e..c968b3a 100644
--- a/core/misc/states.js
+++ b/core/misc/states.js
@@ -509,7 +509,7 @@
     if (e.trigger) {
       $(e.target)
         .prop('disabled', e.value)
-        .closest('.form-item, .form-submit, .form-wrapper').toggleClass('form-disabled', e.value)
+        .closest('.form-item, .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.
@@ -520,21 +520,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, .form-submit, .form-wrapper').toggle(e.value);
+      $(e.target).closest('.form-item, .form-submit, .js-form-wrapper').toggle(e.value);
     }
   });
 
diff --git a/core/modules/locale/css/locale.admin.css b/core/modules/locale/css/locale.admin.css
index 741ab9b..9da0b94 100644
--- a/core/modules/locale/css/locale.admin.css
+++ b/core/modules/locale/css/locale.admin.css
@@ -48,7 +48,7 @@
   position: absolute;
 }
 
-.locale-translate-filter-form .form-wrapper {
+.locale-translate-filter-form .js-form-wrapper {
   margin-bottom:0;
 }
 
diff --git a/core/modules/quickedit/css/quickedit.module.css b/core/modules/quickedit/css/quickedit.module.css
index 8ac9a55..6288b00 100644
--- a/core/modules/quickedit/css/quickedit.module.css
+++ b/core/modules/quickedit/css/quickedit.module.css
@@ -72,7 +72,7 @@
 /**
  * Default form styling overrides.
  */
-.quickedit-form .form-wrapper .form-wrapper {
+.quickedit-form .js-form-wrapper .js-form-wrapper {
   margin: inherit;
 }
 .quickedit-form .form-actions {
diff --git a/core/modules/quickedit/css/quickedit.theme.css b/core/modules/quickedit/css/quickedit.theme.css
index 8d9e198..8d36906 100644
--- a/core/modules/quickedit/css/quickedit.theme.css
+++ b/core/modules/quickedit/css/quickedit.theme.css
@@ -44,7 +44,7 @@
 .quickedit-form .form-item {
   margin: 0;
 }
-.quickedit-form .form-wrapper {
+.quickedit-form .js-form-wrapper {
   margin: .5em;
 }
 
diff --git a/core/modules/system/templates/checkboxes.html.twig b/core/modules/system/templates/checkboxes.html.twig
index 7c56355..00384d3 100644
--- a/core/modules/system/templates/checkboxes.html.twig
+++ b/core/modules/system/templates/checkboxes.html.twig
@@ -14,4 +14,4 @@
  @todo: remove this file once http://drupal.org/node/1819284 is resolved.
  This is identical to core/modules/system/templates/container.html.twig
 #}
-<div{{ attributes.addClass('form-checkboxes') }}>{{ children }}</div>
+<div{{ attributes }}>{{ children }}</div>
diff --git a/core/modules/system/templates/container.html.twig b/core/modules/system/templates/container.html.twig
index 6fb8159..9f91a7f 100644
--- a/core/modules/system/templates/container.html.twig
+++ b/core/modules/system/templates/container.html.twig
@@ -17,4 +17,4 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes.addClass(has_parent ? 'form-wrapper') }}>{{ children }}</div>
+<div{{ attributes.addClass(has_parent ? 'js-form-wrapper') }}>{{ children }}</div>
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index b5f2a03..49b6a91 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -219,10 +219,10 @@ input.form-radio {
 }
 
 /* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
-.views-admin .form-type-checkbox + .form-wrapper {
+.views-admin .form-type-checkbox + .js-form-wrapper {
   margin-left: 16px; /* LTR */
 }
-[dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {
+[dir="rtl"] .views-admin .form-type-checkbox + .js-form-wrapper {
   margin-left: 0;
   margin-right: 16px;
 }
diff --git a/core/themes/bartik/css/components/form.css b/core/themes/bartik/css/components/form.css
index 69a0a72..f39929d 100644
--- a/core/themes/bartik/css/components/form.css
+++ b/core/themes/bartik/css/components/form.css
@@ -145,7 +145,7 @@ input.form-submit:focus {
 .node-form .description {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.node-form .form-wrapper {
+.node-form .js-form-wrapper {
   margin-bottom: 2em;
 }
 
diff --git a/core/themes/seven/css/components/form.css b/core/themes/seven/css/components/form.css
index 79b342e..24b38be 100644
--- a/core/themes/seven/css/components/form.css
+++ b/core/themes/seven/css/components/form.css
@@ -258,7 +258,7 @@ select {
     width: auto;
   }
   .form-actions input,
-  .form-wrapper input[type="submit"] {
+  .js-form-wrapper input[type="submit"] {
     float: none;
     margin-left: 0;
     margin-right: 0;
@@ -267,7 +267,7 @@ select {
     width: 100%;
   }
   .form-actions input:first-child,
-  .form-wrapper input[type="submit"]:first-child {
+  .js-form-wrapper input[type="submit"]:first-child {
     margin-top: 0;
   }
   .exposed-filters .filters,