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..a2765c684e 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
@@ -32,13 +32,13 @@ Checkbox labels fall to the right of the checkbox control. If placed vertically,
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 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.
-
+
### 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.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.png
new file mode 100644
index 0000000000..589c0a9a9a
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.png differ
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.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.png
new file mode 100644
index 0000000000..59468906f1
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.png differ
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.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.png
new file mode 100644
index 0000000000..db55cab847
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.png differ
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/CB-usage-single.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.png
new file mode 100644
index 0000000000..b7539771a5
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.png differ
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.png
new file mode 100644
index 0000000000..1b9b661b1a
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.png differ
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.png
new file mode 100644
index 0000000000..08bf38b736
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.png differ
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.png b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.png
new file mode 100644
index 0000000000..9b6106af29
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.png differ
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..defca9180c 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--lg` (24px) of spacing below each form input. 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--lg` (24px) when on the same line or stacked on one another. 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--md` (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--lg` (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--lg` (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 and dropdowns in a form
+
+Apply the `pf-m-form` modifier to all dropdowns and [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.
+
+
+
+