diff --git a/stories/FormCheckbox/Styled.stories.mdx b/stories/FormCheckbox/Styled.stories.mdx
index e5e96333..760615ee 100644
--- a/stories/FormCheckbox/Styled.stories.mdx
+++ b/stories/FormCheckbox/Styled.stories.mdx
@@ -8,10 +8,10 @@ import '../style.css';
 
 In this section we're using the formCheckbox component providing the GovUk style passing the relative `className`. Feel free to use your own css and style the formInput as you prefer
 
-### GDS styled checkboxes
+### GDS styled checkbox
 
 <Canvas>
-  <Story name="multiple checkboxes">
+  <Story name="checkbox">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(false);
@@ -20,56 +20,14 @@ In this section we're using the formCheckbox component providing the GovUk style
         setChecked(!checked);
       };
       return (
-        <div className="govuk-form-group">
-          <fieldset className="govuk-fieldset" aria-describedby="waste-hint">
-            <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
-              <h1 className="govuk-fieldset__heading">
-                Which types of waste do you transport?
-              </h1>
-            </legend>
-            <div id="waste-hint" className="govuk-hint">
-              Select all that apply.
-            </div>
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset" aria-describedby="">
             <div className="govuk-checkboxes">
               <FormCheckbox
-                name="waste"
-                label="Waste from animal carcasses"
+                name="lorem"
+                label="Lorem ipsum"
                 value="carcasses"
-                id="waste"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-              <FormCheckbox
-                name="waste-2"
-                label="Waste from mines of quarries"
-                value="mines"
-                id="waste-2"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-              <FormCheckbox
-                name="waste-3"
-                label="Farm or agricultural waste"
-                value="farm"
-                id="waste-3"
+                id="lorem"
                 onChange={handleChange}
                 inputProps={{
                   className: 'govuk-checkboxes__input',
@@ -90,10 +48,10 @@ In this section we're using the formCheckbox component providing the GovUk style
   </Story>
 </Canvas>
 
-### GDS styled checkboxes with hint
+### GDS styled checkbox with hint
 
 <Canvas>
-  <Story name="multiple checkboxes with hint">
+  <Story name="checkbox with hint">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(false);
@@ -102,94 +60,40 @@ In this section we're using the formCheckbox component providing the GovUk style
         setChecked(!checked);
       };
       return (
-        <div className="govuk-form-group">
-          <fieldset
-            className="govuk-fieldset"
-            aria-describedby="nationality-hint"
-          >
-            <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
-              <h1 className="govuk-fieldset__heading">
-                What is your nationality?
-              </h1>
-            </legend>
-            <div id="nationality-hint" className="govuk-hint">
-              If you have dual nationality, select all options that are relevant
-              to you.
-            </div>
-            <div className="govuk-checkboxes">
-              <FormCheckbox
-                name="nationality"
-                label="British"
-                value="british"
-                id="nationality"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-                hint={{
-                  text: 'including English, Scottish, Welsh and Northern Irish',
-                  className: 'govuk-hint govuk-checkboxes__hint',
-                  id: 'nationality-item-hint',
-                }}
-              />
-              <FormCheckbox
-                name="nationality-2"
-                label="Irish"
-                value="irish"
-                id="nationality-2"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-              <FormCheckbox
-                name="nationality-3"
-                label="Citizen of another country"
-                value="other"
-                id="nationality-3"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-            </div>
-          </fieldset>
-        </div>
+        <FormCheckbox
+          name="lorem-2"
+          label="Lorem ipsum"
+          value="lorem ipsum"
+          id="lorem-2"
+          onChange={handleChange}
+          inputProps={{
+            className: 'govuk-checkboxes__input',
+          }}
+          itemProps={{
+            className: 'govuk-checkboxes__item',
+          }}
+          labelProps={{
+            className: 'govuk-label govuk-checkboxes__label',
+          }}
+          defaultChecked={checked}
+          hint={{
+            text: 'Lorem ipsum hint text',
+            className: 'govuk-hint govuk-checkboxes__hint',
+            id: 'nationality-item-hint',
+          }}
+        />
       );
     }}
   </Story>
 </Canvas>
 
-### GDS styled checkboxes with conditionally revealing content
+### GDS styled checkbox with conditionally revealing content
 
 <Canvas>
   <Story name="conditional input">
     {() => {
       const [value, setValue] = React.useState({
         contact: false,
-        'contact-2': false,
-        'contact-3': false,
       });
       const handleChange = (event, conditional) => {
         setValue({
@@ -199,129 +103,49 @@ In this section we're using the formCheckbox component providing the GovUk style
         console.log(conditional);
       };
       return (
-        <div className="govuk-form-group">
-          <fieldset className="govuk-fieldset" aria-describedby="contact-hint">
-            <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
-              <h1 className="govuk-fieldset__heading">
-                How would you like to be contacted?
-              </h1>
-            </legend>
-            <div id="contact-hint" className="govuk-hint">
-              Select all options that are relevant to you.
-            </div>
-            <div className="govuk-checkboxes">
-              <FormCheckbox
-                name="contact"
-                label="Email"
-                value="contact-by-email"
-                id="contact"
-                ariaDataControls="conditional-contact"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                selected={value['contact']}
-                conditional={{
-                  value: '',
-                  name: 'contact-by-email',
-                  label: 'Email address',
-                  type: 'text',
-                  className: 'govuk-form-group',
-                  groupClassName:
-                    'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden',
-                  id: 'conditional-contact',
-                  inputClassName: 'govuk-input govuk-!-width-one-third',
-                  inputId: 'contact-by-email',
-                  labelClassName: 'govuk-label',
-                }}
-              />
-              <FormCheckbox
-                name="contact"
-                label="Phone"
-                value="contact-by-phone"
-                id="contact-2"
-                ariaDataControls="conditional-contact-2"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                selected={value['contact-2']}
-                conditional={{
-                  value: '',
-                  onChange: (value) => {},
-                  name: 'contact-by-phone',
-                  label: 'Phone number',
-                  type: 'text',
-                  className: 'govuk-form-group',
-                  groupClassName:
-                    'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden',
-                  id: 'conditional-contact-2',
-                  inputClassName: 'govuk-input govuk-!-width-one-third',
-                  inputId: 'contact-by-phone',
-                  labelClassName: 'govuk-label',
-                }}
-              />
-              <FormCheckbox
-                name="contact"
-                label="Text"
-                value="contact-by-text"
-                id="contact-3"
-                ariaDataControls="conditional-contact-3"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                selected={value['contact-3']}
-                conditional={{
-                  value: '',
-                  onChange: (value) => {},
-                  name: 'contact-by-text',
-                  label: 'Mobile phone number',
-                  type: 'text',
-                  className: 'govuk-form-group',
-                  groupClassName:
-                    'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden',
-                  id: 'conditional-contact-3',
-                  inputClassName: 'govuk-input govuk-!-width-one-third',
-                  inputId: 'contact-by-text',
-                  labelClassName: 'govuk-label',
-                }}
-              />
-            </div>
-          </fieldset>
-        </div>
+        <FormCheckbox
+          name="contact"
+          label="Email"
+          value="contact-by-email"
+          id="contact"
+          ariaDataControls="conditional-contact"
+          onChange={handleChange}
+          inputProps={{
+            className: 'govuk-checkboxes__input',
+          }}
+          itemProps={{
+            className: 'govuk-checkboxes__item',
+          }}
+          labelProps={{
+            className: 'govuk-label govuk-checkboxes__label',
+          }}
+          selected={value['contact']}
+          conditional={{
+            value: '',
+            name: 'contact-by-email',
+            label: 'Email address',
+            type: 'text',
+            className: 'govuk-form-group',
+            groupClassName:
+              'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden',
+            id: 'conditional-contact',
+            inputClassName: 'govuk-input govuk-!-width-one-third',
+            inputId: 'contact-by-email',
+            labelClassName: 'govuk-label',
+          }}
+        />
       );
     }}
   </Story>
 </Canvas>
 
-### GDS styled checkboxes with conditionally revealing content where the conditinal is a sibling
+### GDS styled checkbox with conditionally revealing content where the conditinal is a sibling
 
 <Canvas>
   <Story name="conditional input with sibling conditional">
     {() => {
       const [value, setValue] = React.useState({
-        contact: false,
-        'contact-2': false,
-        'contact-3': false,
+        'contact-sibiling': false,
       });
       const handleChange = (event, conditional) => {
         setValue({
@@ -331,221 +155,47 @@ In this section we're using the formCheckbox component providing the GovUk style
         console.log(conditional);
       };
       return (
-        <div className="govuk-form-group">
-          <fieldset className="govuk-fieldset" aria-describedby="contact-hint">
-            <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
-              <h1 className="govuk-fieldset__heading">
-                How would you like to be contacted?
-              </h1>
-            </legend>
-            <div id="contact-hint" className="govuk-hint">
-              Select all options that are relevant to you.
-            </div>
-            <div className="govuk-checkboxes">
-              <FormCheckbox
-                name="contact"
-                label="Email"
-                value="contact-by-email"
-                id="contact"
-                ariaDataControls="conditional-contact"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                selected={value['contact']}
-                conditional={{
-                  value: '',
-                  name: 'contact-by-email',
-                  label: 'Email address',
-                  type: 'text',
-                  className: 'govuk-form-group',
-                  groupClassName:
-                    'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden',
-                  id: 'conditional-contact',
-                  inputClassName: 'govuk-input govuk-!-width-one-third',
-                  inputId: 'contact-by-email',
-                  labelClassName: 'govuk-label',
-                  position: 'sibling',
-                }}
-              />
-              <FormCheckbox
-                name="contact"
-                label="Phone"
-                value="contact-by-phone"
-                id="contact-2"
-                ariaDataControls="conditional-contact-2"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                selected={value['contact-2']}
-                conditional={{
-                  value: '',
-                  onChange: (value) => {},
-                  name: 'contact-by-phone',
-                  label: 'Phone number',
-                  type: 'text',
-                  className: 'govuk-form-group',
-                  groupClassName:
-                    'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden',
-                  id: 'conditional-contact-2',
-                  inputClassName: 'govuk-input govuk-!-width-one-third',
-                  inputId: 'contact-by-phone',
-                  labelClassName: 'govuk-label',
-                  position: 'sibling',
-                }}
-              />
-              <FormCheckbox
-                name="contact"
-                label="Text"
-                value="contact-by-text"
-                id="contact-3"
-                ariaDataControls="conditional-contact-3"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                selected={value['contact-3']}
-                conditional={{
-                  value: '',
-                  onChange: (value) => {},
-                  name: 'contact-by-text',
-                  label: 'Mobile phone number',
-                  type: 'text',
-                  className: 'govuk-form-group',
-                  groupClassName:
-                    'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden',
-                  id: 'conditional-contact-3',
-                  inputClassName: 'govuk-input govuk-!-width-one-third',
-                  inputId: 'contact-by-text',
-                  labelClassName: 'govuk-label',
-                  position: 'sibling',
-                }}
-              />
-            </div>
-          </fieldset>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### GDS styled small checkboxes
-
-<Canvas>
-  <Story name="small styled checkboxes">
-    {() => {
-      const [value, setValue] = React.useState('');
-      const [checked, setChecked] = React.useState(false);
-      const handleChange = (event) => {
-        setValue(event.currentTarget.value);
-        setChecked(!checked);
-      };
-      return (
-        <div className="govuk-form-group">
-          <fieldset className="govuk-fieldset" aria-describedby="contact-hint">
-            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
-              <h1 className="govuk-fieldset__heading">Organisation</h1>
-            </legend>
-            <div className="govuk-checkboxes govuk-checkboxes--small">
-              <FormCheckbox
-                name="organisation"
-                label="HM Revenue and Customs (HMRC)"
-                value="hmrc"
-                id="organisation"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-              <FormCheckbox
-                name="organisation-2"
-                label="Employment Tribunal"
-                value="employment-tribunal"
-                id="organisation-2"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-              <FormCheckbox
-                name="organisation-3"
-                label="Ministry of Defence"
-                value="MOD"
-                id="organisation-3"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-              <FormCheckbox
-                name="organisation-4"
-                label="Department for Transport"
-                value="DfT"
-                id="organisation-4"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-            </div>
-          </fieldset>
-        </div>
+        <FormCheckbox
+          name="contact"
+          label="Email"
+          value="contact-by-email"
+          id="contact-sibiling"
+          ariaDataControls="conditional-contact"
+          onChange={handleChange}
+          inputProps={{
+            className: 'govuk-checkboxes__input',
+          }}
+          itemProps={{
+            className: 'govuk-checkboxes__item',
+          }}
+          labelProps={{
+            className: 'govuk-label govuk-checkboxes__label',
+          }}
+          selected={value['contact-sibiling']}
+          conditional={{
+            value: '',
+            name: 'contact-by-email',
+            label: 'Email address',
+            type: 'text',
+            className: 'govuk-form-group',
+            groupClassName:
+              'govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden',
+            id: 'conditional-contact',
+            inputClassName: 'govuk-input govuk-!-width-one-third',
+            inputId: 'contact-by-email',
+            labelClassName: 'govuk-label',
+            position: 'sibling',
+          }}
+        />
       );
     }}
   </Story>
 </Canvas>
 
-### GDS styled checkboxes with error validation
+### GDS styled small checkbox
 
 <Canvas>
-  <Story name="checkboxes with error">
+  <Story name="small styled checkbox">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(false);
@@ -554,84 +204,23 @@ In this section we're using the formCheckbox component providing the GovUk style
         setChecked(!checked);
       };
       return (
-        <div className="govuk-form-group govuk-form-group--error">
-          <fieldset
-            className="govuk-fieldset"
-            aria-describedby="nationality-hint"
-          >
-            <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
-              <h1 className="govuk-fieldset__heading">
-                What is your nationality?
-              </h1>
-            </legend>
-            <div id="nationality-hint" className="govuk-hint">
-              If you have dual nationality, select all options that are relevant
-              to you.
-            </div>
-            <span id="nationality-error" className="govuk-error-message">
-              <span className="govuk-visually-hidden">Error:</span> Select if
-              you are British, Irish or a citizen of a different country
-            </span>
-            <div className="govuk-checkboxes">
-              <FormCheckbox
-                name="nationality"
-                label="British"
-                value="british"
-                id="nationality"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-                hint={{
-                  text: 'including English, Scottish, Welsh and Northern Irish',
-                  className: 'govuk-hint govuk-checkboxes__hint',
-                  id: 'nationality-item-hint',
-                }}
-              />
-              <FormCheckbox
-                name="nationality-2"
-                label="Irish"
-                value="irish"
-                id="nationality-2"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-              <FormCheckbox
-                name="nationality-3"
-                label="Citizen of another country"
-                value="other"
-                id="nationality-3"
-                onChange={handleChange}
-                inputProps={{
-                  className: 'govuk-checkboxes__input',
-                }}
-                itemProps={{
-                  className: 'govuk-checkboxes__item',
-                }}
-                labelProps={{
-                  className: 'govuk-label govuk-checkboxes__label',
-                }}
-                defaultChecked={checked}
-              />
-            </div>
-          </fieldset>
-        </div>
+        <FormCheckbox
+          name="organisation"
+          label="HM Revenue and Customs (HMRC)"
+          value="hmrc"
+          id="organisation"
+          onChange={handleChange}
+          inputProps={{
+            className: 'govuk-checkboxes__input',
+          }}
+          itemProps={{
+            className: 'govuk-checkboxes__item',
+          }}
+          labelProps={{
+            className: 'govuk-label govuk-checkboxes__label',
+          }}
+          defaultChecked={checked}
+        />
       );
     }}
   </Story>
diff --git a/stories/FormCheckbox/UnStyled.stories.mdx b/stories/FormCheckbox/UnStyled.stories.mdx
index d464b857..07216c65 100644
--- a/stories/FormCheckbox/UnStyled.stories.mdx
+++ b/stories/FormCheckbox/UnStyled.stories.mdx
@@ -7,7 +7,7 @@ import '../style.css';
 ### Example of basic checkbox
 
 <Canvas>
-  <Story name="basic">
+  <Story name="un-styled-basic">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(false);
@@ -36,7 +36,7 @@ import '../style.css';
 By default, the hint will display underneath the checkbox
 
 <Canvas>
-  <Story name="with hint">
+  <Story name="un-styled-basic-with-hint">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(false);
@@ -67,7 +67,7 @@ By default, the hint will display underneath the checkbox
 ### Example of basic checkbox with hint positioned above
 
 <Canvas>
-  <Story name="with hint above">
+  <Story name="un-styled-basic-with-hint-above">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(false);
@@ -98,7 +98,7 @@ By default, the hint will display underneath the checkbox
 ### Example of disabled checkbox
 
 <Canvas>
-  <Story name="disabled">
+  <Story name="un-styled-disabled">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(false);
@@ -126,7 +126,7 @@ By default, the hint will display underneath the checkbox
 ### Example of preselected checkbox
 
 <Canvas>
-  <Story name="preselected">
+  <Story name="un-styled-preselected">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(true);
@@ -153,7 +153,7 @@ By default, the hint will display underneath the checkbox
 ### Example of checkbox with conditional input field
 
 <Canvas>
-  <Story name="conditional">
+  <Story name="un-styled-conditional">
     {() => {
       const [value, setValue] = React.useState('');
       const [checked, setChecked] = React.useState(true);
@@ -181,10 +181,7 @@ By default, the hint will display underneath the checkbox
               name: 'conditional-6',
               label: 'condition label',
               type: 'text',
-              className: 'classes',
-              groupClassName: 'group-classes',
               id: 'checkbox-6',
-              inputClassName: 'input-classes',
               inputId: 'input-6',
             }}
           />
@@ -194,76 +191,44 @@ By default, the hint will display underneath the checkbox
   </Story>
 </Canvas>
 
-### Example of nested checkbox
-
-<Canvas>
-  <Story name="nested">
-    {() => {
-      const [value, setValue] = React.useState('');
-      const [checked, setChecked] = React.useState(false);
-      const handleChange = (event) => {
-        setValue(event.currentTarget.value);
-        setChecked(!checked);
-      };
-      return (
-        <FormCheckbox
-          label="checkbox label"
-          value={value}
-          id="checkbox-7"
-          inputProps={{
-            name: 'checkbox-7',
-          }}
-          onChange={handleChange}
-          selected={checked}
-          nested={true}
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
 ### Example of a checkbox with a sibling conditional
 
 The property conditionalPosition can be set to 'sibling' if you want the conditional element to be a sibling of the main input elment for styling purposes
 
 <Canvas>
-  <Story name="conditional">
+  <Story name="un-styled-conditional-sibiling">
     {() => {
-      const [value, setValue] = React.useState('');
-      const [checked, setChecked] = React.useState(true);
+      const [value, setValue] = React.useState({
+        'contact-sibiling': false,
+        'contact-sibiling-2': false,
+        'contact-sibiling-3': false,
+      });
       const handleChange = (event, conditional) => {
-        if (conditional) {
-          console.log(conditional);
-          return;
-        }
-        setValue(event.currentTarget.value);
-        setChecked(event.currentTarget.checked);
+        setValue({
+          ...value,
+          [event.target.id]: event.target.checked,
+        });
+        console.log(conditional);
       };
       return (
-        <>
         <FormCheckbox
-          label="checkbox label"
-          value={value}
-          id="checkbox-6"
-          inputProps={{
-            name: 'checkbox-6',
-          }}
+          name="contact"
+          label="Email"
+          value="contact-by-email"
+          id="contact-sibiling"
+          ariaDataControls="conditional-contact"
           onChange={handleChange}
-          selected={checked}
+          selected={value['contact-sibiling']}
           conditional={{
             value: '',
-            name: 'conditional-6',
-            label: 'condition label',
+            name: 'contact-by-email',
+            label: 'Email address',
             type: 'text',
-            className: 'classes',
-            groupClassName: 'group-classes',
-            id: 'checkbox-6',
-            inputClassName: 'input-classes',
-            inputId: 'input-6',
-            position='sibling'
+            id: 'conditional-contact',
+            inputId: 'contact-by-email',
+            position: 'sibling',
           }}
         />
-        </>
       );
     }}
   </Story>