diff --git a/src/pages/components/form/images/form-usage-1.png b/src/pages/components/form/images/form-usage-1.png
index 1111c2736b2..d5a9e6ce86a 100644
Binary files a/src/pages/components/form/images/form-usage-1.png and b/src/pages/components/form/images/form-usage-1.png differ
diff --git a/src/pages/components/form/images/form-usage-4.png b/src/pages/components/form/images/form-usage-4.png
index a6ae2122a8a..fa018bde1c6 100644
Binary files a/src/pages/components/form/images/form-usage-4.png and b/src/pages/components/form/images/form-usage-4.png differ
diff --git a/src/pages/components/form/images/form-usage-5.png b/src/pages/components/form/images/form-usage-5.png
index a79589f2b45..00b618fc207 100644
Binary files a/src/pages/components/form/images/form-usage-5.png and b/src/pages/components/form/images/form-usage-5.png differ
diff --git a/src/pages/components/form/images/form-usage-6.png b/src/pages/components/form/images/form-usage-6.png
index 99d6b6c6c87..ab1baa995d0 100644
Binary files a/src/pages/components/form/images/form-usage-6.png and b/src/pages/components/form/images/form-usage-6.png differ
diff --git a/src/pages/components/form/images/form-usage-7.png b/src/pages/components/form/images/form-usage-7.png
index d094467a0b5..1deea4fdaeb 100644
Binary files a/src/pages/components/form/images/form-usage-7.png and b/src/pages/components/form/images/form-usage-7.png differ
diff --git a/src/pages/components/form/images/form-usage-8.png b/src/pages/components/form/images/form-usage-8.png
index 75813e00a8d..6918d7c7112 100644
Binary files a/src/pages/components/form/images/form-usage-8.png and b/src/pages/components/form/images/form-usage-8.png differ
diff --git a/src/pages/components/form/images/form-usage-optional.png b/src/pages/components/form/images/form-usage-optional.png
new file mode 100644
index 00000000000..7fe043ba230
Binary files /dev/null and b/src/pages/components/form/images/form-usage-optional.png differ
diff --git a/src/pages/components/form/images/form-usage-required.png b/src/pages/components/form/images/form-usage-required.png
new file mode 100644
index 00000000000..43a5bcc1177
Binary files /dev/null and b/src/pages/components/form/images/form-usage-required.png differ
diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx
index 7534a340755..488e8a8fe67 100755
--- a/src/pages/components/form/usage.mdx
+++ b/src/pages/components/form/usage.mdx
@@ -291,20 +291,30 @@ characters."_
### Optional versus required fields
-When designing your form, consider the purpose and the use case, and note if the majority of the fields are **required** or **optional**.
+When designing your form, consider the purpose and the use case, and note if the
+majority of the fields are **required** or **optional**.
-- If the majority of the fields are required, mark **only** the optional fields with (optional).
-- If the majority of the fields are optional, mark **only** the required fields with (required).
+- If the majority of the fields are required, mark **only** the optional fields
+ with (optional).
+- If the majority of the fields are optional, mark **only** the required fields
+ with (required).
-Using the appropriate pattern based on the use case will reduce visual noise and clutter; helping your users to more quickly and accurately complete the form. It will also ensure consistency through and across products.
+Using the appropriate pattern based on the use case will reduce visual noise and
+clutter; helping your users to more quickly and accurately complete the form. It
+will also ensure consistency through and across products.
-If you choose to mark only optional form fields, it is recommended that an instruction precedes the form stating either “All fields are required” or “All fields are required unless marked optional”.
+If you choose to mark only optional form fields, it is recommended that an
+instruction precedes the form stating either “All fields are required” or “All
+fields are required unless marked optional”.
-
-Example of a short user sign-up form using the Optional pattern
+
+
+
+ Example of a short user sign-up form using the optional pattern
+
@@ -312,8 +322,11 @@ Example of a short user sign-up form using the Optional pattern
-
-Example of product configuration properties using the Required pattern
+
+
+
+ Example of product configuration properties using the required pattern
+
diff --git a/src/pages/patterns/forms-pattern/images/Do-Form-required.png b/src/pages/patterns/forms-pattern/images/Do-Form-required.png
new file mode 100644
index 00000000000..0df1e306c79
Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/Do-Form-required.png differ
diff --git a/src/pages/patterns/forms-pattern/images/Dont-form-required.png b/src/pages/patterns/forms-pattern/images/Dont-form-required.png
new file mode 100644
index 00000000000..77696043fa4
Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/Dont-form-required.png differ
diff --git a/src/pages/patterns/forms-pattern/images/Elements.png b/src/pages/patterns/forms-pattern/images/Elements.png
index bb528373b16..90aba7c8ec8 100644
Binary files a/src/pages/patterns/forms-pattern/images/Elements.png and b/src/pages/patterns/forms-pattern/images/Elements.png differ
diff --git a/src/pages/patterns/forms-pattern/images/form-do.png b/src/pages/patterns/forms-pattern/images/form-do.png
new file mode 100644
index 00000000000..0df1e306c79
Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/form-do.png differ
diff --git a/src/pages/patterns/forms-pattern/images/form-dont.png b/src/pages/patterns/forms-pattern/images/form-dont.png
new file mode 100644
index 00000000000..77696043fa4
Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/form-dont.png differ
diff --git a/src/pages/patterns/forms-pattern/images/form-usage-optional.png b/src/pages/patterns/forms-pattern/images/form-usage-optional.png
new file mode 100644
index 00000000000..7fe043ba230
Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/form-usage-optional.png differ
diff --git a/src/pages/patterns/forms-pattern/images/form-usage-required.png b/src/pages/patterns/forms-pattern/images/form-usage-required.png
new file mode 100644
index 00000000000..43a5bcc1177
Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/form-usage-required.png differ
diff --git a/src/pages/patterns/forms-pattern/index.mdx b/src/pages/patterns/forms-pattern/index.mdx
index cbdac0f8599..af8ecbecdf5 100644
--- a/src/pages/patterns/forms-pattern/index.mdx
+++ b/src/pages/patterns/forms-pattern/index.mdx
@@ -122,61 +122,94 @@ Advantages:
### Optional vs. mandatory
-Forms items can be labeled as either optional or required depending on several factors. A common distinction in IBM products for using required or optional is the forms complexity.
-1. **Simple forms** - generally shorter and/or user- or consumer-oriented; such as sign-up and contact forms and checkout screens. Most of the fields will tend to be required.
-2. **Complex forms** - generally longer and product-oriented; contain properties and settings that are used to configure Enterprise software. Although they will usually contain at least one required field, the majority of the fields will tend to be optional.
+Forms items can be labeled as either optional or required depending on several
+factors. A common distinction in IBM products for using required or optional is
+the forms complexity.
+
+1. **Simple forms** - generally shorter and/or user- or consumer-oriented; such
+ as sign-up and contact forms and checkout screens. Most of the fields will
+ tend to be required.
+2. **Complex forms** - generally longer and product-oriented; contain properties
+ and settings that are used to configure Enterprise software. Although they
+ will usually contain at least one required field, the majority of the fields
+ will tend to be optional.
+
+Note if the majority of the fields are **required** or **optional**, as the
+overall number of form fields for your entire product should inform your
+treatment. The pattern used should be consistent throughout your product, or at
+minimum, consistent between all of the same types of form within your product.
+
+- If the majority of the fields are required, mark **only** the optional field
+ labels with _(optional)_.
+- If the majority of the fields are optional, mark **only** the required field
+ labels with _(required)_.
+
+When designing your form, consider the purpose and the use case to reduce visual
+noise and clutter to allow your user to better complete their task. This will
+also ensure consistency through and across products.
+
+An excess of optional fields should be avoided. If it’s necessary to have a
+large number of optional fields, we recommend devoting an entire section to
+optional fields to avoid excessive repetition.
-
-Note if the majority of the fields are **required** or **optional**, as the overall number of form fields for your entire product should inform your treatment. The pattern used should be consistent throughout your product, or at minimum, consistent between all of the same types of form within your product.
-- If the majority of the fields are required, mark **only** the optional field labels with *(optional)*.
-- If the majority of the fields are optional, mark **only** the required field labels with *(required)*.
-
-
-When designing your form, consider the purpose and the use case to reduce visual noise and clutter to allow your user to better complete their task. This will also ensure consistency through and across products.
-
-
-An excess of optional fields should be avoided. If it’s necessary to have a large number of optional fields, we recommend devoting an entire section to optional fields to avoid excessive repetition.
-
+
+
+
+ Example of a short user sign-up form using the optional pattern
+
+
-
+
+
+ Example of product configuration properties using the required pattern
+
#### When to use
+
-
+
-
+
#### Best practices
-- Consider the overall number of required and optional fields in the forms for your entire product. The pattern used should be consistent throughout your product, or at minimum consistent between all of the same type of form within your product.
- - For example, if you have 100 types of connections properties forms and the fields are optional in 85 of the 100 forms, all 100 should use the required pattern.
-- Use the techniques illustrated below in the [Default Values](#default-values) and [Designing for Longer Forms](#designing-for-longer-forms) sections in order to make your forms easier and more efficient to use.
-
+- Consider the overall number of required and optional fields in the forms for
+ your entire product. The pattern used should be consistent throughout your
+ product, or at minimum consistent between all of the same type of form within
+ your product.
+ - For example, if you have 100 types of connections properties forms and the
+ fields are optional in 85 of the 100 forms, all 100 should use the required
+ pattern.
+- Use the techniques illustrated below in the [Default Values](#default-values)
+ and [Designing for Longer Forms](#designing-for-longer-forms) sections in
+ order to make your forms easier and more efficient to use.
### Text inputs
@@ -386,13 +419,20 @@ the user or formatting is in question, use placeholder text.
#### Default values
-Default values can be set for for all types of inputs. Ensure that if a default value is provided, it is something that would commonly be used anyway and would not cause disruption or errors if the user forgets or opts not to make any changes to it before submitting the form. Good default values reduce cognitive load.
-
+Default values can be set for for all types of inputs. Ensure that if a default
+value is provided, it is something that would commonly be used anyway and would
+not cause disruption or errors if the user forgets or opts not to make any
+changes to it before submitting the form. Good default values reduce cognitive
+load.
For example:
-- If you can detect or determine where your users are from, have their country pre-selected in a "Country" dropdown.
-- If there is a common or minimum value (i.e., a quota or memory limit), pre-fill that value.
-- If a text input can be detected or determined in advance (i.e.-company name), pre-fill that value.
+
+- If you can detect or determine where your users are from, have their country
+ pre-selected in a "Country" dropdown.
+- If there is a common or minimum value (i.e., a quota or memory limit),
+ pre-fill that value.
+- If a text input can be detected or determined in advance (i.e.-company name),
+ pre-fill that value.
- If a start date is required, use the current date as the default.
### Buttons
@@ -882,9 +922,12 @@ in-depth accessibility guidance for each form element.
### Further reading
-- Nick Babich,
- [The Power of Defaults](https://uxplanet.org/the-power-of-defaults-992d50b73968)(UX Planet, 2017)
-- Raluca Budiu, [Marking Required Fields in Forms](https://www.nngroup.com/articles/required-fields/) (Nielsen Norman Group, 2019)
+- Nick Babich,
+ [The Power of Defaults](https://uxplanet.org/the-power-of-defaults-992d50b73968)(UX
+ Planet, 2017)
+- Raluca Budiu,
+ [Marking Required Fields in Forms](https://www.nngroup.com/articles/required-fields/)
+ (Nielsen Norman Group, 2019)
- Andrew Coyle,
[Design Better Forms](https://uxdesign.cc/design-better-forms-96fadca0f49c),
(UX Collective, 2016)
@@ -894,11 +937,11 @@ in-depth accessibility guidance for each form element.
- Marieke McCloskey,
[Accordions Are Not Always the Answer for Complex Content on Desktops](https://www.nngroup.com/articles/accordions-complex-content/),
Nielsen Norman Group, 2014)
-- Jakob Nielsen,
- [The Power of Defaults](https://www.nngroup.com/articles/the-power-of-defaults/)(Nielsen Norman Group, 2015)
-- Preibusch et al., [*The privacy economics of voluntary
-over-disclosure in Web forms*](http://preibusch.de/publications/Preibusch-Krol-Beresford__voluntary_over-disclosure.pdf)(2013)
-
+- Jakob Nielsen,
+ [The Power of Defaults](https://www.nngroup.com/articles/the-power-of-defaults/)(Nielsen
+ Norman Group, 2015)
+- Preibusch et al.,
+ [_The privacy economics of voluntary over-disclosure in Web forms_](http://preibusch.de/publications/Preibusch-Krol-Beresford__voluntary_over-disclosure.pdf)(2013)
## Feedback