diff --git a/packages/form-system/stories/15-features-overview.stories.mdx b/packages/form-system/stories/15-features-overview.stories.mdx
index 10fed8d19..ff84977f0 100644
--- a/packages/form-system/stories/15-features-overview.stories.mdx
+++ b/packages/form-system/stories/15-features-overview.stories.mdx
@@ -4,6 +4,7 @@ import '@lion/fieldset/lion-fieldset.js';
 import '@lion/form/lion-form.js';
 import '@lion/input-amount/lion-input-amount.js';
 import '@lion/input-date/lion-input-date.js';
+import '@lion/input-datepicker/lion-input-datepicker.js';
 import '@lion/input-email/lion-input-email.js';
 import '@lion/input-iban/lion-input-iban.js';
 import '@lion/input-range/lion-input-range.js';
@@ -28,25 +29,35 @@ For usage and installation please see the appropriate packages.
 
 <Preview>
   <Story name="Example">
-    {html`
+    {() => {
+      Required.getMessage = () => 'Please enter a value';
+      return html`
       <lion-form>
         <form>
-          <lion-input
-            name="first_name"
-            label="First Name"
-            .validators="${[new Required()]}"
-          ></lion-input>
-          <lion-input
-            name="last_name"
-            label="Last Name"
-            .validators="${[new Required()]}"
-          ></lion-input>
+          <lion-fieldset name="full_name">
+            <lion-input
+              name="first_name"
+              label="First Name"
+              .validators="${[new Required()]}"
+            ></lion-input>
+            <lion-input
+              name="last_name"
+              label="Last Name"
+              .validators="${[new Required()]}"
+            ></lion-input>
+          </lion-fieldset>
           <lion-input-date
             name="date"
             label="Date of application"
             .modelValue="${new Date('2000-12-12')}"
             .validators="${[new Required()]}"
           ></lion-input-date>
+          <lion-input-datepicker
+            name="datepicker"
+            label="Date to be picked"
+            .modelValue="${new Date('2020-12-12')}"
+            .validators="${[new Required()]}"
+          ></lion-input-datepicker>
           <lion-textarea
             name="bio"
             label="Biography"
@@ -58,7 +69,7 @@ For usage and installation please see the appropriate packages.
           <lion-input-email name="email" label="Email"></lion-input-email>
           <lion-checkbox-group
             label="What do you like?"
-            name="checkers[]"
+            name="checkers"
             .validators="${[new Required()]}"
           >
             <lion-checkbox .choiceValue=${'foo'} label="I like foo"></lion-checkbox>
@@ -101,7 +112,7 @@ For usage and installation please see the appropriate packages.
             step="0.1"
             label="Input range"
           ></lion-input-range>
-          <lion-checkbox-group name="terms" .validators="${[new Required()]}">
+          <lion-checkbox-group .mulipleChoice="${false}" name="terms" .validators="${[new Required()]}">
             <lion-checkbox
               label="I blindly accept all terms and conditions"
             ></lion-checkbox>
@@ -118,7 +129,7 @@ For usage and installation please see the appropriate packages.
           </div>
         </form>
       </lion-form>
-    `}
+    `;}}
   </Story>
 </Preview>
 
@@ -129,6 +140,7 @@ import '@lion/fieldset/lion-fieldset.js';
 import '@lion/form/lion-form.js';
 import '@lion/input-amount/lion-input-amount.js';
 import '@lion/input-date/lion-input-date.js';
+import '@lion/input-datepicker/lion-input-datepicker.js';
 import '@lion/input-email/lion-input-email.js';
 import '@lion/input-iban/lion-input-iban.js';
 import '@lion/input-range/lion-input-range.js';
diff --git a/packages/form-system/stories/17-Validation-Examples.stories.mdx b/packages/form-system/stories/17-Validation-Examples.stories.mdx
index 3fd22e2a9..93e24387a 100644
--- a/packages/form-system/stories/17-Validation-Examples.stories.mdx
+++ b/packages/form-system/stories/17-Validation-Examples.stories.mdx
@@ -29,8 +29,10 @@ import {
 
 ## Required Validator
 
-The required validator can be put onto every form field element and will make sure that element is not empty.
-For an input that may mean that it is not an empty string while for a checkbox group it means at least one checkbox needs to be checked.
+The required validator can be put onto every form field element and will make sure that element is
+not empty.
+For an input that may mean that it is not an empty string,
+while for a checkbox group it means at least one checkbox needs to be checked.
 
 <Story name="Required Validator">
   {html`
diff --git a/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx b/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
index c18fb904a..f0870739c 100644
--- a/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
+++ b/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
@@ -26,7 +26,7 @@ it has a tabindex=“0” applied.
 
 Now we want to integrate the slider in our form framework to enrich the user interface, get
 validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview--page).
-We start of by creating a component `<lion-slider>` that extends from `LionField`.
+We start by creating a component `<lion-slider>` that extends from `LionField`.
 Then we follow the steps below:
 
 #### 1. Add your interaction element as ‘input slot'
diff --git a/packages/form-system/stories/fieldset-examples.stories.mdx b/packages/form-system/stories/fieldset-examples.stories.mdx
index 00586fa41..ca7ed46f9 100644
--- a/packages/form-system/stories/fieldset-examples.stories.mdx
+++ b/packages/form-system/stories/fieldset-examples.stories.mdx
@@ -298,7 +298,7 @@ Alternatively you can also let the fieldset validator be dependent on the error
 
 Simply loop over the formElements inside your Validator's `execute` method:
 ```js
-this.formElementsArray.some(el => el.hasFeedbackFor.includes('error'));
+this.formElements.some(el => el.hasFeedbackFor.includes('error'));
 ```
 
 ### Validating multiple fieldsets
diff --git a/packages/form-system/stories/form-examples.stories.mdx b/packages/form-system/stories/form-examples.stories.mdx
index 1cd2ceac4..7a3a85f0d 100644
--- a/packages/form-system/stories/form-examples.stories.mdx
+++ b/packages/form-system/stories/form-examples.stories.mdx
@@ -1,4 +1,4 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
+import { Story, Meta, html, Preview } from '@open-wc/demoing-storybook';
 import { Required, MaxLength, loadDefaultFeedbackMessages } from '@lion/validate';
 import '@lion/fieldset/lion-fieldset.js';
 import '@lion/input/lion-input.js';
@@ -10,6 +10,7 @@ import '@lion/form/lion-form.js';
 
 A form can have multiple nested fieldsets.
 
+<Preview>
 <Story name="Default">
   {html`
     <lion-form id="form">
@@ -25,48 +26,38 @@ A form can have multiple nested fieldsets.
           </lion-fieldset>
           <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
         </lion-fieldset>
-        <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
+        <button type="button" @click=${() => console.log(document.querySelector('#form').serializedValue)}>
           Log to Action Logger
         </button>
       </form>
     </lion-form>
   `}
 </Story>
-
-```html
-<lion-form id="form">
-  <form>
-    <lion-fieldset label="Personal data" name="personalData">
-      <lion-fieldset label="Full Name" name="fullName">
-        <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-        <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-      </lion-fieldset>
-      <lion-fieldset label="Location" name="location">
-        <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
-        <lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
-      </lion-fieldset>
-      <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
-    </lion-fieldset>
-    <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
-      Log to Action Logger
-    </button>
-  </form>
-</lion-form>
-```
+</Preview>
 
 ## Form Submit / Reset
 
 You can control whether a form gets submitted based on validation states.
 Same thing goes for resetting the inputs to the original state.
 
+Be sure to call `serializedValue` when a you want to submit a form.
+This value automatically filters out disabled children and makes sure the values
+that are retrieved can be transmitted over a wire. (for instance, an input-date with a modelValue
+of type `Date` will be serialized to an iso formatted string).
+
+
+>  Note: Offering a reset button is a bad practice in terms of accessibility.
+This button is only used here to demonstrate the `serializeGroup()` method.
+
+<Preview>
 <Story name="Submit/reset">
   {() => {
     loadDefaultFeedbackMessages();
     const submit = () => {
       const form = document.querySelector('#form2');
       if (!form.hasFeedbackFor.includes('error')) {
-        console.log(form.serializeGroup());
-        form.resetGroup();
+        document.getElementById('form2_output').innerText = JSON.stringify(form.serializedValue);
+        document.querySelector('#form2').resetGroup();
       }
     };
     return html`
@@ -85,58 +76,65 @@ Same thing goes for resetting the inputs to the original state.
               .validators=${[new Required(), new MaxLength(15)]}
             >
             </lion-input>
+            <lion-input
+              name="address"
+              disabled
+              label="Address"
+              .validators=${[new MaxLength(15)]}
+            >
+            </lion-input>
           </lion-fieldset>
           <button type="submit">Submit & Reset (if successfully submitted)</button>
-          <button type="button" @click=${() => document.querySelector('#form2').resetGroup()}>
-            Reset
+          <button type="button" @click=${() => {
+            document.querySelector('#form2').resetGroup();
+            const form = document.querySelector('#form2');
+            document.getElementById('form2_output').innerText = JSON.stringify(form.serializedValue);
+          }}>
+            reset
           </button>
-          <p>
-            A reset button should never be offered to users. This button is only used here to
-            demonstrate the functionality.
-          </p>
+          <pre id="form2_output">
+          </pre>
         </form></lion-form
       >
     `;
   }}
 </Story>
+</Preview>
 
-```js
-import { Required, MaxLength } from '@lion/validate'
 
-const submit = () => {
-  const form = document.querySelector('#form2');
-  if (!form.hasFeedbackFor.includes('error')) {
-    console.log(form.serializeGroup());
-    form.resetGroup();
-  }
-};
-```
 
-```html
-<lion-form id="form2" @submit="${submit}">
-  <form>
-    <lion-fieldset label="Name" name="name">
-      <lion-input
-        name="firstName"
-        label="First Name"
-        .validators=${[new Required(), new MaxLength(15)]}
-      >
-      </lion-input>
-      <lion-input
-        name="lastName"
-        label="Last Name"
-        .validators=${[new Required(), new MaxLength(15)]}
-      >
-      </lion-input>
-    </lion-fieldset>
-    <button type="submit">Submit & Reset (if successfully submitted)</button>
-    <button type="button" @click=${() => console.log(document.querySelector('#form2'))}>
-      Reset
-    </button>
-    <p>
-      A reset button should never be offered to users. This button is only used here to
-      demonstrate the functionality.
-    </p>
-  </form>
-</lion-form>
-```
+## Serialize in a multistep form
+
+In a multistep form (consisting of multiple forms) it might be handy to wrap the serialized output
+with the name of the form.
+
+<Preview>
+  <Story name="Multistep">
+    {() => {
+      loadDefaultFeedbackMessages();
+      const serializeWithName = (formId, outputId) => {
+        const form = document.getElementById(formId);
+        if (!form.hasFeedbackFor.includes('error')) {
+          const output = { [form.name]: form.serializedValue };
+          document.getElementById(outputId).innerText = JSON.stringify(output);
+        }
+      };
+      return html`
+        <lion-form name="step1FormName" id="form3"><form>
+          <lion-input name="step1InputName" label="Step 1 Input"></lion-input>
+          <button @click="${() => serializeWithName('form3', 'form3_output')}">
+            serialize step 1 with name
+          </button>
+          <pre id="form3_output"></pre>
+        </form></lion-form>
+        <lion-form name="step2FormName" id="form4"><form>
+          <lion-input name="step2InputName" label="Step 2 Input"></lion-input>
+          <button @click="${() => serializeWithName('form4', 'form4_output')}">
+            serialize step 2 with name
+          </button>
+          <pre id="form4_output"></pre>
+        </form></lion-form>
+      `;
+    }}
+  </Story>
+</Preview>
diff --git a/packages/form-system/test/form-integrations.test.js b/packages/form-system/test/form-integrations.test.js
index 602cf16ba..6db704d3d 100644
--- a/packages/form-system/test/form-integrations.test.js
+++ b/packages/form-system/test/form-integrations.test.js
@@ -3,7 +3,7 @@ import './helpers/umbrella-form.js';
 
 // Test umbrella form
 describe('Form Integrations', () => {
-  it.skip('".serializedValue" returns all non disabled fields based on form structure', async () => {
+  it('".serializedValue" returns all non disabled fields based on form structure', async () => {
     const el = await fixture(
       html`
         <umbrella-form></umbrella-form>