From aa9804429086490f2d52cf2d67607bdf49e74bb3 Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Tue, 15 Jun 2021 10:11:59 +0200
Subject: [PATCH] Form elements that support react-hook-form can now be made
 read-only (#1696)

The recently integrated form library react-hook-form does not submit disabled inputs, but a behaviour where interaction with an input is not possible and it is still submitted is necessary. This feature implements a readOnly property for all components that support react-hook-form. It is visually indistinguishable from a disabled input but will be submitted when the form is submitted. All form fields use disabled fieldset wrappers to accomplish this goal because react-hook-form only checks the disabled property on the input itself, not any ancestors, and the inputs are still correctly displayed as disabled.
---
 gradle/changelog/readonly_form_elements.yaml  |   2 +
 .../src/__snapshots__/storyshots.test.ts.snap | 656 ++++++++++++------
 .../src/forms/Checkbox.stories.tsx            |  11 +-
 scm-ui/ui-components/src/forms/Checkbox.tsx   |   7 +-
 .../src/forms/InputField.stories.tsx          |  22 +-
 scm-ui/ui-components/src/forms/InputField.tsx |   6 +-
 .../ui-components/src/forms/Radio.stories.tsx |   4 +
 scm-ui/ui-components/src/forms/Radio.tsx      |  11 +-
 .../src/forms/Select.stories.tsx              |  22 +
 scm-ui/ui-components/src/forms/Select.tsx     |   6 +-
 .../src/forms/Textarea.stories.tsx            |  27 +-
 scm-ui/ui-components/src/forms/Textarea.tsx   |   6 +-
 12 files changed, 557 insertions(+), 223 deletions(-)
 create mode 100644 gradle/changelog/readonly_form_elements.yaml

diff --git a/gradle/changelog/readonly_form_elements.yaml b/gradle/changelog/readonly_form_elements.yaml
new file mode 100644
index 0000000000..23cea09f81
--- /dev/null
+++ b/gradle/changelog/readonly_form_elements.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: Form elements that support react-hook-form can now be made read-only ([#1696](https://github.com/scm-manager/scm-manager/pulls/1696))
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 7e1a50c3ca..1b71cc893a 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -46451,7 +46451,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
   <div
     className="AddKeyValueEntryToTableField__InputLevel-kiarql-0 kYncSL"
   >
-    <div
+    <fieldset
       className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 iutNFQ"
     >
       <label
@@ -46471,8 +46471,8 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
           value=""
         />
       </div>
-    </div>
-    <div
+    </fieldset>
+    <fieldset
       className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 iutNFQ"
     >
       <label
@@ -46492,7 +46492,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
           value=""
         />
       </div>
-    </div>
+    </fieldset>
     <button
       className="button is-default AddKeyValueEntryToTableField__MarginTopButton-kiarql-2 kygLQj"
       disabled={true}
@@ -46522,7 +46522,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
   <div
     className="AddKeyValueEntryToTableField__InputLevel-kiarql-0 kYncSL"
   >
-    <div
+    <fieldset
       className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 iutNFQ"
     >
       <label
@@ -46543,8 +46543,8 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
           value=""
         />
       </div>
-    </div>
-    <div
+    </fieldset>
+    <fieldset
       className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 iutNFQ"
     >
       <label
@@ -46565,7 +46565,7 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
           value=""
         />
       </div>
-    </div>
+    </fieldset>
     <button
       className="button is-default AddKeyValueEntryToTableField__MarginTopButton-kiarql-2 kygLQj"
       disabled={true}
@@ -46592,7 +46592,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
 <div
   className="Checkboxstories__Spacing-sc-1bg8q8e-0 bKxINN"
 >
-  <div
+  <fieldset
     className="field"
   >
     <div
@@ -46612,8 +46612,8 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
         Not checked
       </label>
     </div>
-  </div>
-  <div
+  </fieldset>
+  <fieldset
     className="field"
   >
     <div
@@ -46633,8 +46633,8 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
         Checked
       </label>
     </div>
-  </div>
-  <div
+  </fieldset>
+  <fieldset
     className="field"
   >
     <div
@@ -46654,7 +46654,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
         Indeterminate
       </label>
     </div>
-  </div>
+  </fieldset>
 </div>
 `;
 
@@ -46662,7 +46662,7 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
 <div
   className="Checkboxstories__Spacing-sc-1bg8q8e-0 bKxINN"
 >
-  <div
+  <fieldset
     className="field"
   >
     <div
@@ -46684,13 +46684,13 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
         Checked but disabled
       </label>
     </div>
-  </div>
+  </fieldset>
 </div>
 `;
 
 exports[`Storyshots Forms|Checkbox Legacy Events 1`] = `
 Array [
-  <div
+  <fieldset
     className="field"
   >
     <div
@@ -46709,7 +46709,7 @@ Array [
          
       </label>
     </div>
-  </div>,
+  </fieldset>,
   <div
     className="mt-3"
   >
@@ -46722,7 +46722,7 @@ exports[`Storyshots Forms|Checkbox ReactHookForm 1`] = `
 <form
   onSubmit={[Function]}
 >
-  <div
+  <fieldset
     className="field"
   >
     <div
@@ -46742,8 +46742,8 @@ exports[`Storyshots Forms|Checkbox ReactHookForm 1`] = `
         Remember Me
       </label>
     </div>
-  </div>
-  <div
+  </fieldset>
+  <fieldset
     className="field"
   >
     <div
@@ -46763,7 +46763,53 @@ exports[`Storyshots Forms|Checkbox ReactHookForm 1`] = `
         Scramble Password
       </label>
     </div>
-  </div>
+  </fieldset>
+  <fieldset
+    className="field"
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+        disabled={true}
+      >
+        <input
+          className="checkbox"
+          disabled={true}
+          name="disabled"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
+        Disabled wont be submitted
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="field"
+    disabled={true}
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+      >
+        <input
+          className="checkbox"
+          name="readonly"
+          onBlur={[Function]}
+          onChange={[Function]}
+          readOnly={true}
+          type="checkbox"
+        />
+         
+        Readonly will be submitted
+      </label>
+    </div>
+  </fieldset>
   <div
     className="pt-2"
   >
@@ -46782,7 +46828,7 @@ exports[`Storyshots Forms|Checkbox ReactHookForm 1`] = `
 
 exports[`Storyshots Forms|Checkbox Ref 1`] = `
 Array [
-  <div
+  <fieldset
     className="field"
   >
     <div
@@ -46802,7 +46848,7 @@ Array [
         Ref Checkbox
       </label>
     </div>
-  </div>,
+  </fieldset>,
   <button
     className="button is-primary"
     onClick={[Function]}
@@ -46818,7 +46864,7 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
 <div
   className="Checkboxstories__Spacing-sc-1bg8q8e-0 bKxINN"
 >
-  <div
+  <fieldset
     className="field"
   >
     <div
@@ -46846,8 +46892,8 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
         </span>
       </label>
     </div>
-  </div>
-  <div
+  </fieldset>
+  <fieldset
     className="field"
   >
     <div
@@ -46875,7 +46921,7 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
         </span>
       </label>
     </div>
-  </div>
+  </fieldset>
 </div>
 `;
 
@@ -47073,7 +47119,7 @@ exports[`Storyshots Forms|InputField AutoFocus 1`] = `
 <div
   className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
 >
-  <div
+  <fieldset
     className="field"
   >
     <label
@@ -47092,7 +47138,7 @@ exports[`Storyshots Forms|InputField AutoFocus 1`] = `
         onKeyPress={[Function]}
       />
     </div>
-  </div>
+  </fieldset>
 </div>
 `;
 
@@ -47100,7 +47146,7 @@ exports[`Storyshots Forms|InputField AutoFocusAndRef 1`] = `
 <div
   className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
 >
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47115,8 +47161,8 @@ exports[`Storyshots Forms|InputField AutoFocusAndRef 1`] = `
         placeholder="Click the button to focus me"
       />
     </div>
-  </div>
-  <div
+  </fieldset>
+  <fieldset
     className="field"
   >
     
@@ -47131,7 +47177,7 @@ exports[`Storyshots Forms|InputField AutoFocusAndRef 1`] = `
         placeholder="Click me to switch focus"
       />
     </div>
-  </div>
+  </fieldset>
   <button
     className="button is-primary"
     onClick={[Function]}
@@ -47147,7 +47193,7 @@ exports[`Storyshots Forms|InputField Default Value 1`] = `
 <div
   className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
 >
-  <div
+  <fieldset
     className="field"
   >
     <label
@@ -47167,7 +47213,7 @@ exports[`Storyshots Forms|InputField Default Value 1`] = `
         onKeyPress={[Function]}
       />
     </div>
-  </div>
+  </fieldset>
 </div>
 `;
 
@@ -47175,7 +47221,7 @@ exports[`Storyshots Forms|InputField Legacy Events 1`] = `
 <div
   className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
 >
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47191,7 +47237,7 @@ exports[`Storyshots Forms|InputField Legacy Events 1`] = `
         value=""
       />
     </div>
-  </div>
+  </fieldset>
   <div
     className="mt-3"
   >
@@ -47207,7 +47253,53 @@ exports[`Storyshots Forms|InputField React Hook Form 1`] = `
   <form
     onSubmit={[Function]}
   >
-    <div
+    <fieldset
+      className="field"
+      disabled={true}
+    >
+      <label
+        className="label"
+      >
+        Readonly
+         
+      </label>
+      <div
+        className="control"
+      >
+        <input
+          className="input"
+          defaultValue="I am readonly but still show up on submit!"
+          name="readonly"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onKeyPress={[Function]}
+        />
+      </div>
+    </fieldset>
+    <fieldset
+      className="field"
+    >
+      <label
+        className="label"
+      >
+        Disabled
+         
+      </label>
+      <div
+        className="control"
+      >
+        <input
+          className="input"
+          defaultValue="I am disabled and dont show up on submit!"
+          disabled={true}
+          name="disabled"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onKeyPress={[Function]}
+        />
+      </div>
+    </fieldset>
+    <fieldset
       className="field"
     >
       <label
@@ -47227,8 +47319,8 @@ exports[`Storyshots Forms|InputField React Hook Form 1`] = `
           onKeyPress={[Function]}
         />
       </div>
-    </div>
-    <div
+    </fieldset>
+    <fieldset
       className="field"
     >
       <label
@@ -47248,7 +47340,7 @@ exports[`Storyshots Forms|InputField React Hook Form 1`] = `
           onKeyPress={[Function]}
         />
       </div>
-    </div>
+    </fieldset>
     <div
       className="pt-2"
     >
@@ -47270,7 +47362,7 @@ exports[`Storyshots Forms|InputField Ref 1`] = `
 <div
   className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
 >
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47285,7 +47377,7 @@ exports[`Storyshots Forms|InputField Ref 1`] = `
         placeholder="Click the button to focus me"
       />
     </div>
-  </div>
+  </fieldset>
   <button
     className="button is-primary"
     onClick={[Function]}
@@ -47301,30 +47393,34 @@ exports[`Storyshots Forms|Radio Default 1`] = `
 <div
   className="Radiostories__Spacing-sc-18hvwhd-0 cAoTRX"
 >
-  <label
-    className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
-  >
-    <input
-      checked={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="radio"
-    />
-     
-    Not checked
-  </label>
-  <label
-    className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
-  >
-    <input
-      checked={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="radio"
-    />
-     
-    Checked
-  </label>
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+    >
+      <input
+        checked={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
+      />
+       
+      Not checked
+    </label>
+  </fieldset>
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+    >
+      <input
+        checked={true}
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
+      />
+       
+      Checked
+    </label>
+  </fieldset>
 </div>
 `;
 
@@ -47332,36 +47428,40 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
 <div
   className="Radiostories__Spacing-sc-18hvwhd-0 cAoTRX"
 >
-  <label
-    className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
-    disabled={true}
-  >
-    <input
-      checked={true}
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
       disabled={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="radio"
-    />
-     
-    Checked but disabled
-  </label>
+    >
+      <input
+        checked={true}
+        disabled={true}
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
+      />
+       
+      Checked but disabled
+    </label>
+  </fieldset>
 </div>
 `;
 
 exports[`Storyshots Forms|Radio Legacy Events 1`] = `
 Array [
-  <label
-    className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
-  >
-    <input
-      checked={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="radio"
-    />
-     
-  </label>,
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+    >
+      <input
+        checked={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
+      />
+       
+    </label>
+  </fieldset>,
   <div
     className="mt-3"
   >
@@ -47377,47 +47477,85 @@ exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
   <div
     className="Radiostories__RadioList-sc-18hvwhd-1 lcyKug"
   >
+    <fieldset>
+      <label
+        className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      >
+        <input
+          defaultChecked={true}
+          name="rememberMe"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="true"
+        />
+         
+        Remember Me
+      </label>
+    </fieldset>
+    <fieldset>
+      <label
+        className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      >
+        <input
+          name="rememberMe"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="false"
+        />
+         
+        Dont Remember Me
+      </label>
+    </fieldset>
+  </div>
+  <fieldset>
     <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio ml-2"
     >
       <input
-        defaultChecked={true}
-        name="rememberMe"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value="true"
-      />
-       
-      Remember Me
-    </label>
-    <label
-      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
-    >
-      <input
-        name="rememberMe"
+        name="scramblePassword"
         onBlur={[Function]}
         onChange={[Function]}
         type="radio"
         value="false"
       />
        
-      Dont Remember Me
+      Scramble Password
     </label>
-  </div>
-  <label
-    className="Radio__StyledRadio-ays4vp-0 da-DBNS radio ml-2"
-  >
-    <input
-      name="scramblePassword"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="radio"
-      value="false"
-    />
-     
-    Scramble Password
-  </label>
+  </fieldset>
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+      disabled={true}
+    >
+      <input
+        disabled={true}
+        name="disabled"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
+        value="false"
+      />
+       
+      Disabled wont be submitted
+    </label>
+  </fieldset>
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+    >
+      <input
+        name="readonly"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
+        value="false"
+      />
+       
+      Readonly will be submitted
+    </label>
+  </fieldset>
   <div
     className="pt-2"
   >
@@ -47436,18 +47574,20 @@ exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
 
 exports[`Storyshots Forms|Radio Ref 1`] = `
 Array [
-  <label
-    className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
-  >
-    <input
-      checked={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="radio"
-    />
-     
-    Ref Radio Button
-  </label>,
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+    >
+      <input
+        checked={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
+      />
+       
+      Ref Radio Button
+    </label>
+  </fieldset>,
   <button
     className="button is-primary"
     onClick={[Function]}
@@ -47463,52 +47603,56 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
 <div
   className="Radiostories__RadioList-sc-18hvwhd-1 lcyKug"
 >
-  <label
-    className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
-  >
-    <input
-      checked={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="radio"
-    />
-     
-    Classic helpText
-    <span
-      className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
-      data-tooltip="This is a classic help text."
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
     >
-      <i
-        className="fas fa-question-circle has-text-blue-light"
+      <input
+        checked={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
       />
-    </span>
-  </label>
-  <label
-    className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
-  >
-    <input
-      checked={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="radio"
-    />
-     
-    Long helpText
-    <span
-      className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
-      data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+       
+      Classic helpText
+      <span
+        className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+        data-tooltip="This is a classic help text."
+      >
+        <i
+          className="fas fa-question-circle has-text-blue-light"
+        />
+      </span>
+    </label>
+  </fieldset>
+  <fieldset>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
     >
-      <i
-        className="fas fa-question-circle has-text-blue-light"
+      <input
+        checked={true}
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
       />
-    </span>
-  </label>
+       
+      Long helpText
+      <span
+        className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
+        data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      >
+        <i
+          className="fas fa-question-circle has-text-blue-light"
+        />
+      </span>
+    </label>
+  </fieldset>
 </div>
 `;
 
 exports[`Storyshots Forms|Select Legacy Events 1`] = `
 Array [
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47531,7 +47675,7 @@ Array [
         </option>
       </select>
     </div>
-  </div>,
+  </fieldset>,
   <div
     className="mt-3"
   />,
@@ -47542,7 +47686,7 @@ exports[`Storyshots Forms|Select ReactHookForm 1`] = `
 <form
   onSubmit={[Function]}
 >
-  <div
+  <fieldset
     className="field"
   >
     <label
@@ -47571,8 +47715,8 @@ exports[`Storyshots Forms|Select ReactHookForm 1`] = `
         </option>
       </select>
     </div>
-  </div>
-  <div
+  </fieldset>
+  <fieldset
     className="field"
   >
     <label
@@ -47601,7 +47745,71 @@ exports[`Storyshots Forms|Select ReactHookForm 1`] = `
         </option>
       </select>
     </div>
-  </div>
+  </fieldset>
+  <fieldset
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Disabled wont be submitted
+       
+    </label>
+    <div
+      className="control select"
+    >
+      <select
+        defaultValue="false"
+        disabled={true}
+        name="disabled"
+        onBlur={[Function]}
+        onChange={[Function]}
+      >
+        <option
+          value="true"
+        >
+          Yes
+        </option>
+        <option
+          value="false"
+        >
+          No
+        </option>
+      </select>
+    </div>
+  </fieldset>
+  <fieldset
+    className="field"
+    disabled={true}
+  >
+    <label
+      className="label"
+    >
+      Readonly will be submitted
+       
+    </label>
+    <div
+      className="control select"
+    >
+      <select
+        defaultValue="false"
+        name="readonly"
+        onBlur={[Function]}
+        onChange={[Function]}
+      >
+        <option
+          value="true"
+        >
+          Yes
+        </option>
+        <option
+          value="false"
+        >
+          No
+        </option>
+      </select>
+    </div>
+  </fieldset>
   <div
     className="pt-2"
   >
@@ -47620,7 +47828,7 @@ exports[`Storyshots Forms|Select ReactHookForm 1`] = `
 
 exports[`Storyshots Forms|Select Ref 1`] = `
 Array [
-  <div
+  <fieldset
     className="field"
   >
     <label
@@ -47649,7 +47857,7 @@ Array [
         </option>
       </select>
     </div>
-  </div>,
+  </fieldset>,
   <button
     className="button is-primary"
     onClick={[Function]}
@@ -47663,7 +47871,7 @@ Array [
 `;
 
 exports[`Storyshots Forms|Textarea AutoFocus 1`] = `
-<div
+<fieldset
   className="field"
 >
   <label
@@ -47682,12 +47890,12 @@ exports[`Storyshots Forms|Textarea AutoFocus 1`] = `
       onKeyDown={[Function]}
     />
   </div>
-</div>
+</fieldset>
 `;
 
 exports[`Storyshots Forms|Textarea AutoFocusAndRef 1`] = `
 Array [
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47702,8 +47910,8 @@ Array [
         placeholder="Click the button to focus me"
       />
     </div>
-  </div>,
-  <div
+  </fieldset>,
+  <fieldset
     className="field"
   >
     
@@ -47718,7 +47926,7 @@ Array [
         placeholder="Click me to switch focus"
       />
     </div>
-  </div>,
+  </fieldset>,
   <button
     className="button is-primary"
     onClick={[Function]}
@@ -47731,7 +47939,7 @@ Array [
 `;
 
 exports[`Storyshots Forms|Textarea Default Value 1`] = `
-<div
+<fieldset
   className="field"
 >
   <label
@@ -47751,12 +47959,12 @@ exports[`Storyshots Forms|Textarea Default Value 1`] = `
       onKeyDown={[Function]}
     />
   </div>
-</div>
+</fieldset>
 `;
 
 exports[`Storyshots Forms|Textarea Legacy Events 1`] = `
 Array [
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47772,7 +47980,7 @@ Array [
         value=""
       />
     </div>
-  </div>,
+  </fieldset>,
   <div
     className="mt-3"
   >
@@ -47785,7 +47993,7 @@ exports[`Storyshots Forms|Textarea OnCancel 1`] = `
 <div
   className="Textareastories__Spacing-lk5v3m-0 kWEmCD"
 >
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47800,7 +48008,7 @@ exports[`Storyshots Forms|Textarea OnCancel 1`] = `
         value="Use the escape key to clear the textarea"
       />
     </div>
-  </div>
+  </fieldset>
 </div>
 `;
 
@@ -47808,7 +48016,7 @@ exports[`Storyshots Forms|Textarea OnChange 1`] = `
 <div
   className="Textareastories__Spacing-lk5v3m-0 kWEmCD"
 >
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47823,7 +48031,7 @@ exports[`Storyshots Forms|Textarea OnChange 1`] = `
         value="Start typing"
       />
     </div>
-  </div>
+  </fieldset>
   <hr />
   <p>
     Start typing
@@ -47835,7 +48043,7 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
 <div
   className="Textareastories__Spacing-lk5v3m-0 kWEmCD"
 >
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47850,7 +48058,7 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
         value="Use the ctrl/command + Enter to submit the textarea"
       />
     </div>
-  </div>
+  </fieldset>
   <hr />
   <p>
     
@@ -47862,7 +48070,7 @@ exports[`Storyshots Forms|Textarea ReactHookForm 1`] = `
 <form
   onSubmit={[Function]}
 >
-  <div
+  <fieldset
     className="field"
   >
     <label
@@ -47882,8 +48090,8 @@ exports[`Storyshots Forms|Textarea ReactHookForm 1`] = `
         onKeyDown={[Function]}
       />
     </div>
-  </div>
-  <div
+  </fieldset>
+  <fieldset
     className="field"
   >
     <label
@@ -47903,7 +48111,53 @@ exports[`Storyshots Forms|Textarea ReactHookForm 1`] = `
         onKeyDown={[Function]}
       />
     </div>
-  </div>
+  </fieldset>
+  <fieldset
+    className="field"
+    disabled={true}
+  >
+    <label
+      className="label"
+    >
+      Readonly
+       
+    </label>
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        defaultValue="I am readonly but still show up on submit!"
+        name="readonly"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+      />
+    </div>
+  </fieldset>
+  <fieldset
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Disabled
+       
+    </label>
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        defaultValue="I am disabled and dont show up on submit!"
+        disabled={true}
+        name="disabled"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+      />
+    </div>
+  </fieldset>
   <div
     className="pt-2"
   >
@@ -47922,7 +48176,7 @@ exports[`Storyshots Forms|Textarea ReactHookForm 1`] = `
 
 exports[`Storyshots Forms|Textarea Ref 1`] = `
 Array [
-  <div
+  <fieldset
     className="field"
   >
     
@@ -47936,7 +48190,7 @@ Array [
         onKeyDown={[Function]}
       />
     </div>
-  </div>,
+  </fieldset>,
   <button
     className="button is-primary"
     onClick={[Function]}
diff --git a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
index d2dbc11314..202f609c3c 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
@@ -56,10 +56,17 @@ const Ref: FC = () => {
 type Settings = {
   rememberMe: string;
   scramblePassword: string;
+  readonly: boolean;
+  disabled: boolean;
 };
 
 const ReactHookForm: FC = () => {
-  const { register, handleSubmit } = useForm<Settings>();
+  const { register, handleSubmit } = useForm<Settings>({
+    defaultValues: {
+      disabled: true,
+      readonly: true
+    }
+  });
   const [stored, setStored] = useState<Settings>();
 
   const onSubmit = (settings: Settings) => {
@@ -71,6 +78,8 @@ const ReactHookForm: FC = () => {
       <form onSubmit={handleSubmit(onSubmit)}>
         <Checkbox label="Remember Me" {...register("rememberMe")} />
         <Checkbox label="Scramble Password" {...register("scramblePassword")} />
+        <Checkbox label="Disabled wont be submitted" disabled={true} {...register("disabled")} />
+        <Checkbox label="Readonly will be submitted" readOnly={true} {...register("readonly")} />
         <div className="pt-2">
           <SubmitButton>Submit</SubmitButton>
         </div>
diff --git a/scm-ui/ui-components/src/forms/Checkbox.tsx b/scm-ui/ui-components/src/forms/Checkbox.tsx
index 223b921fdd..63c190b4f6 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.tsx
+++ b/scm-ui/ui-components/src/forms/Checkbox.tsx
@@ -42,6 +42,7 @@ type BaseProps = {
   helpText?: string;
   testId?: string;
   className?: string;
+  readOnly?: boolean;
 };
 
 const InnerCheckbox: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
@@ -51,6 +52,7 @@ const InnerCheckbox: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
   disabled,
   testId,
   className,
+  readOnly,
   ...props
 }) => {
   const field = useInnerRef(props.innerRef);
@@ -95,7 +97,7 @@ const InnerCheckbox: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
     }
   };
   return (
-    <div className="field">
+    <fieldset className="field" disabled={readOnly}>
       {renderLabelWithHelp()}
       <div className="control">
         {/*
@@ -113,13 +115,14 @@ const InnerCheckbox: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
             ref={field}
             checked={props.checked}
             disabled={disabled}
+            readOnly={readOnly}
             {...createAttributesForTesting(testId)}
           />{" "}
           {label}
           {renderHelp()}
         </label>
       </div>
-    </div>
+    </fieldset>
   );
 };
 
diff --git a/scm-ui/ui-components/src/forms/InputField.stories.tsx b/scm-ui/ui-components/src/forms/InputField.stories.tsx
index 48c4dd91f0..62a04eb625 100644
--- a/scm-ui/ui-components/src/forms/InputField.stories.tsx
+++ b/scm-ui/ui-components/src/forms/InputField.stories.tsx
@@ -62,6 +62,8 @@ const AutoFocusAndRef: FC = () => {
 };
 
 type Name = {
+  readonly: string;
+  disabled: string;
   firstName: string;
   lastName: string;
 };
@@ -70,7 +72,7 @@ const ReactHookForm: FC = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors }
+    formState: { errors },
   } = useForm<Name>();
   const [stored, setStored] = useState<Person>();
 
@@ -81,6 +83,18 @@ const ReactHookForm: FC = () => {
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)}>
+        <InputField
+          label="Readonly"
+          defaultValue="I am readonly but still show up on submit!"
+          readOnly={true}
+          {...register("readonly")}
+        />
+        <InputField
+          label="Disabled"
+          defaultValue="I am disabled and dont show up on submit!"
+          disabled={true}
+          {...register("disabled")}
+        />
         <InputField label="First Name" autofocus={true} {...register("firstName")} />
         <InputField
           label="Last Name"
@@ -107,15 +121,15 @@ const LegacyEvents: FC = () => {
   const [value, setValue] = useState<string>("");
   return (
     <>
-      <InputField placeholder="Legacy onChange handler" value={value} onChange={e => setValue(e)} />
+      <InputField placeholder="Legacy onChange handler" value={value} onChange={(e) => setValue(e)} />
       <div className="mt-3">{value}</div>
     </>
   );
 };
 
 storiesOf("Forms|InputField", module)
-  .addDecorator(storyFn => <Decorator>{storyFn()}</Decorator>)
-  .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
+  .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
+  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("AutoFocus", () => <InputField label="Field with AutoFocus" autofocus={true} />)
   .add("Default Value", () => <InputField label="Field with Default Value" defaultValue={"I am a default value"} />)
   .add("Ref", () => <Ref />)
diff --git a/scm-ui/ui-components/src/forms/InputField.tsx b/scm-ui/ui-components/src/forms/InputField.tsx
index 26ea3b73c5..5ec0098979 100644
--- a/scm-ui/ui-components/src/forms/InputField.tsx
+++ b/scm-ui/ui-components/src/forms/InputField.tsx
@@ -44,6 +44,7 @@ type BaseProps = {
   className?: string;
   testId?: string;
   defaultValue?: string;
+  readOnly?: boolean;
 };
 
 export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>> = ({
@@ -62,6 +63,7 @@ export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>
   testId,
   autofocus,
   defaultValue,
+  readOnly,
   ...props
 }) => {
   const field = useAutofocus<HTMLInputElement>(autofocus, props.innerRef);
@@ -101,7 +103,7 @@ export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>
     helper = <p className="help is-info">{informationMessage}</p>;
   }
   return (
-    <div className={classNames("field", className)}>
+    <fieldset className={classNames("field", className)} disabled={readOnly}>
       <LabelWithHelpIcon label={label} helpText={helpText} />
       <div className="control">
         <input
@@ -120,7 +122,7 @@ export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>
         />
       </div>
       {helper}
-    </div>
+    </fieldset>
   );
 };
 
diff --git a/scm-ui/ui-components/src/forms/Radio.stories.tsx b/scm-ui/ui-components/src/forms/Radio.stories.tsx
index 641ea4da25..04b6190c48 100644
--- a/scm-ui/ui-components/src/forms/Radio.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.stories.tsx
@@ -65,6 +65,8 @@ const Ref: FC = () => {
 type Settings = {
   rememberMe: string;
   scramblePassword: string;
+  readonly: string;
+  disabled: string;
 };
 
 const ReactHookForm: FC = () => {
@@ -83,6 +85,8 @@ const ReactHookForm: FC = () => {
           <Radio value={"false"} label="Dont Remember Me" {...register("rememberMe")} />
         </RadioList>
         <Radio className="ml-2" value={"false"} label="Scramble Password" {...register("scramblePassword")} />
+        <Radio value={"false"} label="Disabled wont be submitted" disabled={true} {...register("disabled")} />
+        <Radio value={"false"} label="Readonly will be submitted" {...register("readonly")} />
         <div className="pt-2">
           <SubmitButton>Submit</SubmitButton>
         </div>
diff --git a/scm-ui/ui-components/src/forms/Radio.tsx b/scm-ui/ui-components/src/forms/Radio.tsx
index dbadcd65ef..1ce80ca989 100644
--- a/scm-ui/ui-components/src/forms/Radio.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.tsx
@@ -31,6 +31,10 @@ const StyledRadio = styled.label`
   margin-right: 0.5em;
 `;
 
+const InlineFieldset = styled.fieldset`
+  display: inline-block;
+`;
+
 type BaseProps = {
   label?: string;
   name?: string;
@@ -40,9 +44,10 @@ type BaseProps = {
   helpText?: string;
   defaultChecked?: boolean;
   className?: string;
+  readOnly?: boolean;
 };
 
-const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name, defaultChecked, ...props }) => {
+const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name, defaultChecked, readOnly, ...props }) => {
   const renderHelp = () => {
     const helpText = props.helpText;
     if (helpText) {
@@ -71,7 +76,7 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name
   };
 
   return (
-    <>
+    <InlineFieldset disabled={readOnly}>
       {/*
         we have to ignore the next line,
         because jsx label does not the custom disabled attribute
@@ -92,7 +97,7 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name
         {props.label}
         {renderHelp()}
       </StyledRadio>
-    </>
+    </InlineFieldset>
   );
 };
 
diff --git a/scm-ui/ui-components/src/forms/Select.stories.tsx b/scm-ui/ui-components/src/forms/Select.stories.tsx
index 4e5e579567..d3ce8b38ff 100644
--- a/scm-ui/ui-components/src/forms/Select.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Select.stories.tsx
@@ -62,6 +62,8 @@ const Ref: FC = () => {
 type Settings = {
   rememberMe: string;
   scramblePassword: string;
+  disabled: string;
+  readonly: string;
 };
 
 const ReactHookForm: FC = () => {
@@ -91,6 +93,26 @@ const ReactHookForm: FC = () => {
           label="Scramble Password"
           {...register("scramblePassword")}
         />
+        <Select
+          options={[
+            { label: "Yes", value: "true" },
+            { label: "No", value: "false" }
+          ]}
+          label="Disabled wont be submitted"
+          defaultValue="false"
+          disabled={true}
+          {...register("disabled")}
+        />
+        <Select
+          options={[
+            { label: "Yes", value: "true" },
+            { label: "No", value: "false" }
+          ]}
+          label="Readonly will be submitted"
+          readOnly={true}
+          defaultValue="false"
+          {...register("readonly")}
+        />
 
         <div className="pt-2">
           <SubmitButton>Submit</SubmitButton>
diff --git a/scm-ui/ui-components/src/forms/Select.tsx b/scm-ui/ui-components/src/forms/Select.tsx
index d08341d0dc..8eff28ef84 100644
--- a/scm-ui/ui-components/src/forms/Select.tsx
+++ b/scm-ui/ui-components/src/forms/Select.tsx
@@ -43,6 +43,7 @@ type BaseProps = {
   disabled?: boolean;
   testId?: string;
   defaultValue?: string;
+  readOnly?: boolean;
 };
 
 const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
@@ -54,6 +55,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   loading,
   disabled,
   testId,
+  readOnly,
   ...props
 }) => {
   const field = useInnerRef(props.innerRef);
@@ -96,7 +98,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   const loadingClass = loading ? "is-loading" : "";
 
   return (
-    <div className="field">
+    <fieldset className="field" disabled={readOnly}>
       <LabelWithHelpIcon label={label} helpText={helpText} />
       <div className={classNames("control select", loadingClass)}>
         <select
@@ -118,7 +120,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
           })}
         </select>
       </div>
-    </div>
+    </fieldset>
   );
 };
 
diff --git a/scm-ui/ui-components/src/forms/Textarea.stories.tsx b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
index 9e057e224d..e93c0eab60 100644
--- a/scm-ui/ui-components/src/forms/Textarea.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
@@ -29,6 +29,7 @@ import Button from "../buttons/Button";
 import { useForm } from "react-hook-form";
 import { SubmitButton } from "../buttons";
 import { MemoryRouter } from "react-router-dom";
+import InputField from "./InputField";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -38,7 +39,7 @@ const OnChangeTextarea = () => {
   const [value, setValue] = useState("Start typing");
   return (
     <Spacing>
-      <Textarea value={value} onChange={v => setValue(v)} />
+      <Textarea value={value} onChange={(v) => setValue(v)} />
       <hr />
       <p>{value}</p>
     </Spacing>
@@ -56,7 +57,7 @@ const OnSubmitTextare = () => {
 
   return (
     <Spacing>
-      <Textarea value={value} onChange={v => setValue(v)} onSubmit={submit} />
+      <Textarea value={value} onChange={(v) => setValue(v)} onSubmit={submit} />
       <hr />
       <p>{submitted}</p>
     </Spacing>
@@ -72,7 +73,7 @@ const OnCancelTextarea = () => {
 
   return (
     <Spacing>
-      <Textarea value={value} onChange={v => setValue(v)} onCancel={cancel} />
+      <Textarea value={value} onChange={(v) => setValue(v)} onCancel={cancel} />
     </Spacing>
   );
 };
@@ -105,13 +106,15 @@ const AutoFocusAndRef: FC = () => {
 type Commit = {
   message: string;
   footer: string;
+  readonly: string;
+  disabled: string;
 };
 
 const ReactHookForm: FC = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors }
+    formState: { errors },
   } = useForm<Commit>();
   const [stored, setStored] = useState<Commit>();
 
@@ -130,6 +133,18 @@ const ReactHookForm: FC = () => {
           errorMessage={"Message is required"}
         />
         <Textarea label="Footer" {...register("footer")} />
+        <Textarea
+          label="Readonly"
+          readOnly={true}
+          defaultValue="I am readonly but still show up on submit!"
+          {...register("readonly")}
+        />
+        <Textarea
+          label="Disabled"
+          disabled={true}
+          defaultValue="I am disabled and dont show up on submit!"
+          {...register("disabled")}
+        />
         <div className="pt-2">
           <SubmitButton>Submit</SubmitButton>
         </div>
@@ -149,14 +164,14 @@ const LegacyEvents: FC = () => {
   const [value, setValue] = useState<string>("");
   return (
     <>
-      <Textarea placeholder="Legacy onChange handler" value={value} onChange={e => setValue(e)} />
+      <Textarea placeholder="Legacy onChange handler" value={value} onChange={(e) => setValue(e)} />
       <div className="mt-3">{value}</div>
     </>
   );
 };
 
 storiesOf("Forms|Textarea", module)
-  .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
+  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("OnChange", () => <OnChangeTextarea />)
   .add("OnSubmit", () => <OnSubmitTextare />)
   .add("OnCancel", () => <OnCancelTextarea />)
diff --git a/scm-ui/ui-components/src/forms/Textarea.tsx b/scm-ui/ui-components/src/forms/Textarea.tsx
index 68e4199b4d..d9116b4332 100644
--- a/scm-ui/ui-components/src/forms/Textarea.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.tsx
@@ -41,6 +41,7 @@ type BaseProps = {
   errorMessage?: string | string[];
   informationMessage?: string;
   defaultValue?: string;
+  readOnly?: boolean;
 };
 
 const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
@@ -57,6 +58,7 @@ const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
   validationError,
   informationMessage,
   defaultValue,
+  readOnly,
   ...props
 }) => {
   const ref = useAutofocus<HTMLTextAreaElement>(autofocus, props.innerRef);
@@ -101,7 +103,7 @@ const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
   }
 
   return (
-    <div className="field">
+    <fieldset className="field" disabled={readOnly}>
       <LabelWithHelpIcon label={label} helpText={helpText} />
       <div className="control">
         <textarea
@@ -118,7 +120,7 @@ const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
         />
       </div>
       {helper}
-    </div>
+    </fieldset>
   );
 };