diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md
index 94521e3e50..978f74d9a7 100644
--- a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md
+++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md
@@ -10,13 +10,13 @@ import '../components.css';
Checkboxes allow users to choose **1 or more items** from a list of options.
-
+
You can also use a single checkbox to allow a user to enable or disable a feature or setting, along with a save button.
-
+
### When to use
@@ -29,16 +29,16 @@ You can also use a single checkbox to allow a user to enable or disable a featur
Checkbox labels fall to the right of the checkbox control. If placed vertically, all checkbox controls should be aligned with the left edge of other controls or input fields, in the form or on the page.
-You can use headings to label a group of checkboxes. The placement of headings will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange checkboxes, see our [forms documentation](/components/forms/form/design-guidelines).
+You should provide a visible label to a group of checkboxes. The placement of the label will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange checkboxes, see our [forms documentation](/components/forms/form/design-guidelines).
-
+
-You also have the option to use progressive disclosure by nesting other controls underneath a checkbox. The nested options would be enabled or disabled when the user selects or deselects a checkbox.
+You also have the option to use progressive disclosure by nesting other controls underneath a checkbox. The nested options would be shown or hidden when the user selects or deselects a checkbox.
-
+
### When to use switches vs. checkboxes
@@ -47,20 +47,20 @@ The main difference between a switch and a checkbox is that a switch changes an
* Use checkboxes when the options do not save automatically and require the user to perform an additional action to save changes (in this case, pressing the “Save changes” button).
- 
+ 
* Use a switch for situations where you are turning a series of one or more independent options on or off.
- 
+ 
* Use checkboxes when you may have an indeterminate state where you can select all, none, or some actions.
- 
+ 
## Accessibility
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg
deleted file mode 100644
index 9daa03b705..0000000000
--- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg
deleted file mode 100644
index 67bd5eab50..0000000000
--- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg
deleted file mode 100644
index 0d3d8e5e68..0000000000
--- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg
new file mode 100644
index 0000000000..4438b85520
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg
@@ -0,0 +1,32 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg
new file mode 100644
index 0000000000..6160b07caa
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg
@@ -0,0 +1,26 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg
new file mode 100644
index 0000000000..181a1b03d1
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg
@@ -0,0 +1,19 @@
+
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg
similarity index 95%
rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg
rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg
index 440b667b5a..d3a3942708 100644
--- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg
+++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg
@@ -1,6 +1,6 @@
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg
similarity index 90%
rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg
rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg
index 72d155db3b..239d568701 100644
--- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg
+++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg
@@ -1,74 +1,74 @@
diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg
similarity index 99%
rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg
rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg
index 83594e6cad..86404b4f50 100644
--- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg
+++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg
@@ -4,6 +4,6 @@
-
+
diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg
new file mode 100644
index 0000000000..1e62488d03
--- /dev/null
+++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg
similarity index 85%
rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg
rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg
index 651761763b..c4d5e4abac 100644
--- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg
+++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg
@@ -5,7 +5,7 @@
-
+
@@ -15,10 +15,10 @@
-
+
-
-
+
+
@@ -28,9 +28,9 @@
-
-
-
+
+
+
@@ -38,7 +38,7 @@
-
+
@@ -50,53 +50,59 @@
-
+
-
+
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/packages/documentation-site/patternfly-docs/content/components/form/forms.md b/packages/documentation-site/patternfly-docs/content/components/form/forms.md
index cd56238f1e..094cb3cb38 100644
--- a/packages/documentation-site/patternfly-docs/content/components/form/forms.md
+++ b/packages/documentation-site/patternfly-docs/content/components/form/forms.md
@@ -313,7 +313,7 @@ To view an interactive example of field groups, see our [field groups demo](/com
Forms may be placed in several contexts including on a page, in a wizard, or in a modal. Your chosen form placement may impact specific spacing considerations, but general form spacing requirements apply across these contexts.
### General spacing
-Always add 24px of spacing underneath each form input. If a form input includes helper text, this 24px spacing should start below the helper text. Spacing between data inputs like checkboxes and radio buttons should also be 24px when on the same line or stacked on one another. For more spacing information, consult the [PatternFly spacer guidelines](/foundations-and-styles/spacers#considering-line-height-and-padding).
+Add `--pf-t--global--spacer--gap--group-to-group--vertical--default` (24px) of spacing between each form input group. If a form input includes helper text, this spacing should start below the helper text. Spacing between data inputs like checkboxes and radio buttons should also be `--pf-t--global--spacer--gap--group-to-group--vertical--default` (24px) when on the same line or stacked on one another. Spacing between the end of a form and the start of the button action group should be `--pf-t--global--spacer--xl` (32px). For more spacing information, see the [PatternFly spacer guidelines](/foundations-and-styles/spacers#considering-line-height-and-padding).

@@ -322,7 +322,7 @@ Always add 24px of spacing underneath each form input. If a form input includes
### Button spacing
-Place submit or cancel buttons on the bottom left of a form, left-aligned with all form fields. Buttons should be placed 16px apart in all contexts. Buttons for actions other than submitting or canceling the form may be placed elsewhere within a form depending on your use case.
+Place submit or cancel buttons on the bottom left of a form, left-aligned with all form fields. Buttons should be spaced using `--pf-t--global--spacer--gap--action-to-action--default` (16px) in all contexts. Buttons for actions other than submitting or canceling the form may be placed elsewhere within a form depending on your use case.
For more guidance on button placement, see our [button guidelines](/components/button/design-guidelines#button-placement).
@@ -332,7 +332,7 @@ For more guidance on button placement, see our [button guidelines](/components/b
### Forms on a page
-Left and top align a form within a page’s content area. A minimum of 24px padding should separate the form from neighboring elements.
+Left and top align a form within a page’s content area. A minimum of `--pf-t--global--spacer--gap--group-to-group--vertical--default` (24px) padding should separate the form from neighboring elements.

@@ -348,7 +348,7 @@ To accommodate lengthy input fields, the maximum suggested width is 880px. Use y
All input fields in your form will be the same length, except for in a [multi-column form](#multi-column-forms) where you may place two or more adjacent fields in a single line. In a multi-column form, form inputs will share available width on that line.
### Forms in a wizard
-Similar to an in-page form, forms in wizards should be left-aligned in the content area and have a minimum of 24px padding separating its content from neighboring elements.
+Similar to an in-page form, forms in wizards should be left-aligned in the content area and have a minimum of `--pf-t--global--spacer--gap--group-to-group--vertical--default` (24px) padding separating its content from neighboring elements.
In a wizard, form error validation should occur when or by the time the user clicks the “Next” button. Don’t wait until the user has completed the whole wizard to notify them of possible errors and their location.
@@ -357,7 +357,7 @@ In a wizard, form error validation should occur when or by the time the user cli
### Forms in a modal
-Forms in a modal should be horizontally centered with the modal background and fill the modal width, leaving 24px between the form content and the modal background edges.
+Forms in a modal should be horizontally centered with the modal background and fill the modal width, leaving `--pf-t--global--spacer--lg` (24px) between the form content and the modal background edges.

@@ -468,6 +468,20 @@ Use button text to clearly and specifically communicate the action it triggers.
For more button text guidance, see our [button content guidelines](/components/button/design-guidelines#content).
+## Best practices
+
+To ensure your forms are consistent, maintainable, and adaptable across different themes, we recommend following these best practices.
+
+### Menu toggles in a form
+
+Apply the `pf-m-form` modifier, either by applying the class or using the `isForm` prop for React, to all [menu toggles](/components/menus/menu-toggle/html/#usage) used in a form. The `.pf-m-form` class modifies the menu toggle's border radius to match other form elements.
+
+
+
+