From 640a270e1de2cbdb70c847f994dfbecdcfd2fe07 Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Fri, 14 May 2021 09:08:57 +0200
Subject: [PATCH] refactor form fields to enable usage with react-hook-form
 (#1656)

React Hook Form is a library that makes working with forms easier and reduces boilerplate. For it to be used in our project, some of the form fields had to be adjusted.
---
 gradle/changelog/react_hook_form.yaml         |   2 +
 scm-ui/ui-components/package.json             |   1 +
 .../src/__snapshots__/storyshots.test.ts.snap | 963 ++++++++++++++++--
 .../src/forms/Checkbox.stories.tsx            |  74 +-
 scm-ui/ui-components/src/forms/Checkbox.tsx   | 109 +-
 scm-ui/ui-components/src/forms/DropDown.tsx   |   3 +
 .../src/forms/FormFieldTypes.tsx              |  81 ++
 .../src/forms/InputField.stories.tsx          | 124 +++
 scm-ui/ui-components/src/forms/InputField.tsx | 148 +--
 .../ui-components/src/forms/Radio.stories.tsx |  77 +-
 scm-ui/ui-components/src/forms/Radio.tsx      |  82 +-
 .../src/forms/Select.stories.tsx              | 130 +++
 scm-ui/ui-components/src/forms/Select.tsx     | 121 ++-
 .../src/forms/Textarea.stories.tsx            | 100 +-
 scm-ui/ui-components/src/forms/Textarea.tsx   | 111 +-
 .../ui-components/src/forms/useAutofocus.ts   |  50 +
 scm-ui/ui-components/src/forms/useInnerRef.ts |  43 +
 scm-ui/ui-plugins/package.json                |   1 +
 scm-ui/ui-webapp/package.json                 |   1 +
 scm-ui/ui-webapp/src/containers/loadBundle.ts |   6 +-
 yarn.lock                                     |   5 +
 21 files changed, 1926 insertions(+), 306 deletions(-)
 create mode 100644 gradle/changelog/react_hook_form.yaml
 create mode 100644 scm-ui/ui-components/src/forms/FormFieldTypes.tsx
 create mode 100644 scm-ui/ui-components/src/forms/InputField.stories.tsx
 create mode 100644 scm-ui/ui-components/src/forms/Select.stories.tsx
 create mode 100644 scm-ui/ui-components/src/forms/useAutofocus.ts
 create mode 100644 scm-ui/ui-components/src/forms/useInnerRef.ts

diff --git a/gradle/changelog/react_hook_form.yaml b/gradle/changelog/react_hook_form.yaml
new file mode 100644
index 0000000000..a0165ffe22
--- /dev/null
+++ b/gradle/changelog/react_hook_form.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: Add support for react-hook-form ([#1656](https://github.com/scm-manager/scm-manager/pull/1656))
diff --git a/scm-ui/ui-components/package.json b/scm-ui/ui-components/package.json
index 1b1546a772..a3eef7c72e 100644
--- a/scm-ui/ui-components/package.json
+++ b/scm-ui/ui-components/package.json
@@ -72,6 +72,7 @@
     "react": "^17.0.1",
     "react-diff-view": "^2.4.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^7.5.1",
     "react-i18next": "^10.13.1",
     "react-router-dom": "^5.1.2",
     "react-select": "^2.1.2",
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 4ff705e8e8..0d04539dc4 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -46421,8 +46421,6 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
           onBlur={[Function]}
           onChange={[Function]}
           onKeyPress={[Function]}
-          placeholder=""
-          type="text"
           value=""
         />
       </div>
@@ -46444,8 +46442,6 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
           onBlur={[Function]}
           onChange={[Function]}
           onKeyPress={[Function]}
-          placeholder=""
-          type="text"
           value=""
         />
       </div>
@@ -46497,8 +46493,6 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
           onBlur={[Function]}
           onChange={[Function]}
           onKeyPress={[Function]}
-          placeholder=""
-          type="text"
           value=""
         />
       </div>
@@ -46521,8 +46515,6 @@ exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
           onBlur={[Function]}
           onChange={[Function]}
           onKeyPress={[Function]}
-          placeholder=""
-          type="text"
           value=""
         />
       </div>
@@ -46558,21 +46550,18 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
   >
     <div
       className="control"
-      onClick={[Function]}
-      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
       >
-        <span
-          className="gwt-Anchor"
-          tabIndex={0}
-        >
-          <i
-            className="is-outlined fa-square has-text-black far"
-          />
-           
-        </span>
+        <input
+          checked={false}
+          className="checkbox"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
         Not checked
       </label>
     </div>
@@ -46582,21 +46571,18 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
   >
     <div
       className="control"
-      onClick={[Function]}
-      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
       >
-        <span
-          className="gwt-Anchor"
-          tabIndex={0}
-        >
-          <i
-            className="is-outlined fa-check-square has-text-link fa"
-          />
-           
-        </span>
+        <input
+          checked={true}
+          className="checkbox"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
         Checked
       </label>
     </div>
@@ -46606,21 +46592,18 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
   >
     <div
       className="control"
-      onClick={[Function]}
-      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
       >
-        <span
-          className="gwt-Anchor"
-          tabIndex={0}
-        >
-          <i
-            className="is-outlined fa-minus-square has-text-link far"
-          />
-           
-        </span>
+        <input
+          checked={true}
+          className="checkbox"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
         Indeterminate
       </label>
     </div>
@@ -46637,22 +46620,20 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
   >
     <div
       className="control"
-      onClick={[Function]}
-      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
         disabled={true}
       >
-        <span
-          className="gwt-Anchor"
-          tabIndex={0}
-        >
-          <i
-            className="is-outlined fa-check-square has-text-grey-light fa"
-          />
-           
-        </span>
+        <input
+          checked={true}
+          className="checkbox"
+          disabled={true}
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
         Checked but disabled
       </label>
     </div>
@@ -46660,6 +46641,132 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|Checkbox Legacy Events 1`] = `
+Array [
+  <div
+    className="field"
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+      >
+        <input
+          checked={false}
+          className="checkbox"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
+      </label>
+    </div>
+  </div>,
+  <div
+    className="mt-3"
+  >
+    false
+  </div>,
+]
+`;
+
+exports[`Storyshots Forms|Checkbox ReactHookForm 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="field"
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+      >
+        <input
+          className="checkbox"
+          name="rememberMe"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
+        Remember Me
+      </label>
+    </div>
+  </div>
+  <div
+    className="field"
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+      >
+        <input
+          className="checkbox"
+          name="scramblePassword"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
+        Scramble Password
+      </label>
+    </div>
+  </div>
+  <div
+    className="pt-2"
+  >
+    <button
+      className="button is-primary"
+      data-testid="submit-button"
+      onClick={[Function]}
+      type="submit"
+    >
+       
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots Forms|Checkbox Ref 1`] = `
+Array [
+  <div
+    className="field"
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+      >
+        <input
+          checked={false}
+          className="checkbox"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
+        Ref Checkbox
+      </label>
+    </div>
+  </div>,
+  <button
+    className="button is-primary"
+    onClick={[Function]}
+    type="button"
+  >
+     
+    Toggle Checkbox
+  </button>,
+]
+`;
+
 exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
 <div
   className="Checkboxstories__Spacing-sc-1bg8q8e-0 bKxINN"
@@ -46669,21 +46776,18 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
   >
     <div
       className="control"
-      onClick={[Function]}
-      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
       >
-        <span
-          className="gwt-Anchor"
-          tabIndex={0}
-        >
-          <i
-            className="is-outlined fa-square has-text-black far"
-          />
-           
-        </span>
+        <input
+          checked={false}
+          className="checkbox"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
         Classic helpText
         <span
           className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
@@ -46701,21 +46805,18 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
   >
     <div
       className="control"
-      onClick={[Function]}
-      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
       >
-        <span
-          className="gwt-Anchor"
-          tabIndex={0}
-        >
-          <i
-            className="is-outlined fa-check-square has-text-link fa"
-          />
-           
-        </span>
+        <input
+          checked={true}
+          className="checkbox"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
         Long helpText
         <span
           className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 eRZLRi is-inline-block has-tooltip-multiline"
@@ -46836,6 +46937,234 @@ exports[`Storyshots Forms|DropDown With Translation 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|InputField AutoFocus 1`] = `
+<div
+  className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
+>
+  <div
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Field with AutoFocus
+       
+    </label>
+    <div
+      className="control"
+    >
+      <input
+        className="input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyPress={[Function]}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms|InputField AutoFocusAndRef 1`] = `
+<div
+  className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
+>
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <input
+        className="input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyPress={[Function]}
+        placeholder="Click the button to focus me"
+      />
+    </div>
+  </div>
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <input
+        className="input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyPress={[Function]}
+        placeholder="Click me to switch focus"
+      />
+    </div>
+  </div>
+  <button
+    className="button is-primary"
+    onClick={[Function]}
+    type="button"
+  >
+     
+    Focus First InputField
+  </button>
+</div>
+`;
+
+exports[`Storyshots Forms|InputField Default Value 1`] = `
+<div
+  className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
+>
+  <div
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Field with Default Value
+       
+    </label>
+    <div
+      className="control"
+    >
+      <input
+        className="input"
+        defaultValue="I am a default value"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyPress={[Function]}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms|InputField Legacy Events 1`] = `
+<div
+  className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
+>
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <input
+        className="input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyPress={[Function]}
+        placeholder="Legacy onChange handler"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="mt-3"
+  >
+    
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms|InputField React Hook Form 1`] = `
+<div
+  className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
+>
+  <form
+    onSubmit={[Function]}
+  >
+    <div
+      className="field"
+    >
+      <label
+        className="label"
+      >
+        First Name
+         
+      </label>
+      <div
+        className="control"
+      >
+        <input
+          className="input"
+          name="firstName"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onKeyPress={[Function]}
+        />
+      </div>
+    </div>
+    <div
+      className="field"
+    >
+      <label
+        className="label"
+      >
+        Last Name
+         
+      </label>
+      <div
+        className="control"
+      >
+        <input
+          className="input"
+          name="lastName"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onKeyPress={[Function]}
+        />
+      </div>
+    </div>
+    <div
+      className="pt-2"
+    >
+      <button
+        className="button is-primary"
+        data-testid="submit-button"
+        onClick={[Function]}
+        type="submit"
+      >
+         
+        Submit
+      </button>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Forms|InputField Ref 1`] = `
+<div
+  className="InputFieldstories__Decorator-kq2lhz-0 cURTRq"
+>
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <input
+        className="input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyPress={[Function]}
+        placeholder="Click the button to focus me"
+      />
+    </div>
+  </div>
+  <button
+    className="button is-primary"
+    onClick={[Function]}
+    type="button"
+  >
+     
+    Focus InputField
+  </button>
+</div>
+`;
+
 exports[`Storyshots Forms|Radio Default 1`] = `
 <div
   className="Radiostories__Spacing-sc-18hvwhd-0 cAoTRX"
@@ -46845,6 +47174,7 @@ exports[`Storyshots Forms|Radio Default 1`] = `
   >
     <input
       checked={false}
+      onBlur={[Function]}
       onChange={[Function]}
       type="radio"
     />
@@ -46856,6 +47186,7 @@ exports[`Storyshots Forms|Radio Default 1`] = `
   >
     <input
       checked={true}
+      onBlur={[Function]}
       onChange={[Function]}
       type="radio"
     />
@@ -46876,6 +47207,7 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
     <input
       checked={true}
       disabled={true}
+      onBlur={[Function]}
       onChange={[Function]}
       type="radio"
     />
@@ -46885,6 +47217,116 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
 </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>,
+  <div
+    className="mt-3"
+  >
+    false
+  </div>,
+]
+`;
+
+exports[`Storyshots Forms|Radio ReactHookForm 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="Radiostories__RadioList-sc-18hvwhd-1 lcyKug"
+  >
+    <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>
+    <label
+      className="Radio__StyledRadio-ays4vp-0 da-DBNS radio"
+    >
+      <input
+        name="rememberMe"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="radio"
+        value="false"
+      />
+       
+      Dont Remember Me
+    </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>
+  <div
+    className="pt-2"
+  >
+    <button
+      className="button is-primary"
+      data-testid="submit-button"
+      onClick={[Function]}
+      type="submit"
+    >
+       
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
+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>,
+  <button
+    className="button is-primary"
+    onClick={[Function]}
+    type="button"
+  >
+     
+    Check InputField
+  </button>,
+]
+`;
+
 exports[`Storyshots Forms|Radio With HelpText 1`] = `
 <div
   className="Radiostories__RadioList-sc-18hvwhd-1 lcyKug"
@@ -46894,6 +47336,7 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
   >
     <input
       checked={false}
+      onBlur={[Function]}
       onChange={[Function]}
       type="radio"
     />
@@ -46913,6 +47356,7 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
   >
     <input
       checked={true}
+      onBlur={[Function]}
       onChange={[Function]}
       type="radio"
     />
@@ -46930,6 +47374,281 @@ exports[`Storyshots Forms|Radio With HelpText 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|Select Legacy Events 1`] = `
+Array [
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control select"
+    >
+      <select
+        onBlur={[Function]}
+        onChange={[Function]}
+      >
+        <option
+          value="true"
+        >
+          Yes
+        </option>
+        <option
+          value="false"
+        >
+          No
+        </option>
+      </select>
+    </div>
+  </div>,
+  <div
+    className="mt-3"
+  />,
+]
+`;
+
+exports[`Storyshots Forms|Select ReactHookForm 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Remember Me
+       
+    </label>
+    <div
+      className="control select"
+    >
+      <select
+        name="rememberMe"
+        onBlur={[Function]}
+        onChange={[Function]}
+      >
+        <option
+          value="true"
+        >
+          Yes
+        </option>
+        <option
+          value="false"
+        >
+          No
+        </option>
+      </select>
+    </div>
+  </div>
+  <div
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Scramble Password
+       
+    </label>
+    <div
+      className="control select"
+    >
+      <select
+        name="scramblePassword"
+        onBlur={[Function]}
+        onChange={[Function]}
+      >
+        <option
+          value="true"
+        >
+          Yes
+        </option>
+        <option
+          value="false"
+        >
+          No
+        </option>
+      </select>
+    </div>
+  </div>
+  <div
+    className="pt-2"
+  >
+    <button
+      className="button is-primary"
+      data-testid="submit-button"
+      onClick={[Function]}
+      type="submit"
+    >
+       
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots Forms|Select Ref 1`] = `
+Array [
+  <div
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Ref Radio Button
+       
+    </label>
+    <div
+      className="control select"
+    >
+      <select
+        onBlur={[Function]}
+        onChange={[Function]}
+        value="false"
+      >
+        <option
+          value="true"
+        >
+          foo
+        </option>
+        <option
+          value="false"
+        >
+          bar
+        </option>
+      </select>
+    </div>
+  </div>,
+  <button
+    className="button is-primary"
+    onClick={[Function]}
+    type="button"
+  >
+     
+    Focus Select Field
+  </button>,
+  "false",
+]
+`;
+
+exports[`Storyshots Forms|Textarea AutoFocus 1`] = `
+<div
+  className="field"
+>
+  <label
+    className="label"
+  >
+    Field with AutoFocus
+     
+  </label>
+  <div
+    className="control"
+  >
+    <textarea
+      className="textarea"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onKeyDown={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms|Textarea AutoFocusAndRef 1`] = `
+Array [
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Click the button to focus me"
+      />
+    </div>
+  </div>,
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Click me to switch focus"
+      />
+    </div>
+  </div>,
+  <button
+    className="button is-primary"
+    onClick={[Function]}
+    type="button"
+  >
+     
+    Focus First InputField
+  </button>,
+]
+`;
+
+exports[`Storyshots Forms|Textarea Default Value 1`] = `
+<div
+  className="field"
+>
+  <label
+    className="label"
+  >
+    Field with Default Value
+     
+  </label>
+  <div
+    className="control"
+  >
+    <textarea
+      className="textarea"
+      defaultValue="I am a text area with so much default value its crazy!"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onKeyDown={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms|Textarea Legacy Events 1`] = `
+Array [
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Legacy onChange handler"
+        value=""
+      />
+    </div>
+  </div>,
+  <div
+    className="mt-3"
+  >
+    
+  </div>,
+]
+`;
+
 exports[`Storyshots Forms|Textarea OnCancel 1`] = `
 <div
   className="Textareastories__Spacing-lk5v3m-0 kWEmCD"
@@ -46943,7 +47662,7 @@ exports[`Storyshots Forms|Textarea OnCancel 1`] = `
     >
       <textarea
         className="textarea"
-        disabled={false}
+        onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
         value="Use the escape key to clear the textarea"
@@ -46966,7 +47685,7 @@ exports[`Storyshots Forms|Textarea OnChange 1`] = `
     >
       <textarea
         className="textarea"
-        disabled={false}
+        onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
         value="Start typing"
@@ -46993,7 +47712,7 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
     >
       <textarea
         className="textarea"
-        disabled={false}
+        onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
         value="Use the ctrl/command + Enter to submit the textarea"
@@ -47007,6 +47726,96 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|Textarea ReactHookForm 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Message
+       
+    </label>
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        name="message"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+      />
+    </div>
+  </div>
+  <div
+    className="field"
+  >
+    <label
+      className="label"
+    >
+      Footer
+       
+    </label>
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        name="footer"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+      />
+    </div>
+  </div>
+  <div
+    className="pt-2"
+  >
+    <button
+      className="button is-primary"
+      data-testid="submit-button"
+      onClick={[Function]}
+      type="submit"
+    >
+       
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots Forms|Textarea Ref 1`] = `
+Array [
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+      />
+    </div>
+  </div>,
+  <button
+    className="button is-primary"
+    onClick={[Function]}
+    type="button"
+  >
+     
+    Focus InputField
+  </button>,
+]
+`;
+
 exports[`Storyshots Help Default 1`] = `
 <div
   className="Helpstories__Wrapper-yq79zu-0 bZhLbP"
diff --git a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
index 29b0e2938a..d2dbc11314 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
@@ -21,16 +21,83 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useRef, useState } from "react";
 import { storiesOf } from "@storybook/react";
 import Checkbox from "./Checkbox";
 import styled from "styled-components";
+import Button from "../buttons/Button";
+import { useForm } from "react-hook-form";
+import { SubmitButton } from "../buttons";
+import { MemoryRouter } from "react-router-dom";
 
 const Spacing = styled.div`
   padding: 2em;
 `;
 
+const Ref: FC = () => {
+  const ref = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <Checkbox label={"Ref Checkbox"} checked={false} ref={ref} />
+      <Button
+        action={() => {
+          if (ref.current) {
+            ref.current.checked = !ref.current.checked;
+          }
+        }}
+        color="primary"
+      >
+        Toggle Checkbox
+      </Button>
+    </>
+  );
+};
+
+type Settings = {
+  rememberMe: string;
+  scramblePassword: string;
+};
+
+const ReactHookForm: FC = () => {
+  const { register, handleSubmit } = useForm<Settings>();
+  const [stored, setStored] = useState<Settings>();
+
+  const onSubmit = (settings: Settings) => {
+    setStored(settings);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Checkbox label="Remember Me" {...register("rememberMe")} />
+        <Checkbox label="Scramble Password" {...register("scramblePassword")} />
+        <div className="pt-2">
+          <SubmitButton>Submit</SubmitButton>
+        </div>
+      </form>
+      {stored ? (
+        <div className="mt-5">
+          <pre>
+            <code>{JSON.stringify(stored, null, 2)}</code>
+          </pre>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+const LegacyEvents: FC = () => {
+  const [value, setValue] = useState<boolean>(false);
+  return (
+    <>
+      <Checkbox checked={value} onChange={setValue} />
+      <div className="mt-3">{JSON.stringify(value)}</div>
+    </>
+  );
+};
+
 storiesOf("Forms|Checkbox", module)
+  .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Default", () => (
     <Spacing>
       <Checkbox label="Not checked" checked={false} />
@@ -52,4 +119,7 @@ storiesOf("Forms|Checkbox", module)
         helpText="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."
       />
     </Spacing>
-  ));
+  ))
+  .add("Ref", () => <Ref />)
+  .add("Legacy Events", () => <LegacyEvents />)
+  .add("ReactHookForm", () => <ReactHookForm />);
diff --git a/scm-ui/ui-components/src/forms/Checkbox.tsx b/scm-ui/ui-components/src/forms/Checkbox.tsx
index 4f31c1b175..223b921fdd 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.tsx
+++ b/scm-ui/ui-components/src/forms/Checkbox.tsx
@@ -21,69 +21,108 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { Help } from "../index";
+import React, { ChangeEvent, FC, FocusEvent, useEffect } from "react";
+import { createAttributesForTesting, Help } from "../index";
 import LabelWithHelpIcon from "./LabelWithHelpIcon";
-import TriStateCheckbox from "./TriStateCheckbox";
+import useInnerRef from "./useInnerRef";
+import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
+import classNames from "classnames";
 
-type Props = {
+export interface CheckboxElement extends HTMLElement {
+  value: boolean;
+}
+
+type BaseProps = {
   label?: string;
-  onChange?: (value: boolean, name?: string) => void;
-  checked: boolean;
+  checked?: boolean;
   indeterminate?: boolean;
   name?: string;
   title?: string;
   disabled?: boolean;
   helpText?: string;
   testId?: string;
+  className?: string;
 };
 
-export default class Checkbox extends React.Component<Props> {
-  onCheckboxChange = () => {
-    if (this.props.onChange) {
-      this.props.onChange(!this.props.checked, this.props.name);
+const InnerCheckbox: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
+  label,
+  name,
+  indeterminate,
+  disabled,
+  testId,
+  className,
+  ...props
+}) => {
+  const field = useInnerRef(props.innerRef);
+
+  useEffect(() => {
+    if (field.current) {
+      field.current.indeterminate = indeterminate || false;
+    }
+  }, [field, indeterminate]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (props.onChange) {
+      if (isUsingRef<BaseProps, HTMLInputElement, boolean>(props)) {
+        props.onChange(event);
+      } else if (isLegacy(props)) {
+        props.onChange(event.target.checked, name);
+      }
     }
   };
 
-  onKeyDown = (event: React.KeyboardEvent) => {
-    const SPACE = 32;
-    if (event.keyCode === SPACE) {
-      this.onCheckboxChange();
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (props.onBlur) {
+      if (isUsingRef<BaseProps, HTMLInputElement, boolean>(props)) {
+        props.onBlur(event);
+      } else if (isLegacy(props)) {
+        props.onBlur(event.target.checked, name);
+      }
     }
   };
 
-  renderHelp = () => {
-    const { title, helpText } = this.props;
+  const renderHelp = () => {
+    const { title, helpText } = props;
     if (helpText && !title) {
       return <Help message={helpText} />;
     }
   };
 
-  renderLabelWithHelp = () => {
-    const { title, helpText } = this.props;
+  const renderLabelWithHelp = () => {
+    const { title, helpText } = props;
     if (title) {
       return <LabelWithHelpIcon label={title} helpText={helpText} />;
     }
   };
-
-  render() {
-    const { label, checked, indeterminate, disabled, testId } = this.props;
-    return (
-      <div className="field">
-        {this.renderLabelWithHelp()}
-        <div className="control" onClick={this.onCheckboxChange} onKeyDown={this.onKeyDown}>
-          {/*
+  return (
+    <div className="field">
+      {renderLabelWithHelp()}
+      <div className="control">
+        {/*
             we have to ignore the next line,
             because jsx label does not the custom disabled attribute
             but bulma does.
             // @ts-ignore */}
-          <label className="checkbox" disabled={disabled}>
-            <TriStateCheckbox checked={checked} indeterminate={indeterminate} disabled={disabled} testId={testId} />
-            {label}
-            {this.renderHelp()}
-          </label>
-        </div>
+        <label className="checkbox" disabled={disabled}>
+          <input
+            type="checkbox"
+            name={name}
+            className={classNames("checkbox", className)}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            ref={field}
+            checked={props.checked}
+            disabled={disabled}
+            {...createAttributesForTesting(testId)}
+          />{" "}
+          {label}
+          {renderHelp()}
+        </label>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+const Checkbox: FieldType<BaseProps, HTMLInputElement, boolean> = createFormFieldWrapper(InnerCheckbox);
+
+export default Checkbox;
diff --git a/scm-ui/ui-components/src/forms/DropDown.tsx b/scm-ui/ui-components/src/forms/DropDown.tsx
index e801a0c2a8..443a084d71 100644
--- a/scm-ui/ui-components/src/forms/DropDown.tsx
+++ b/scm-ui/ui-components/src/forms/DropDown.tsx
@@ -38,6 +38,9 @@ const FullWidthSelect = styled.select`
   width: 100%;
 `;
 
+/**
+ * @deprecated Use `Select` instead
+ */
 class DropDown extends React.Component<Props> {
   render() {
     const { options, optionValues, preselectedOption, className, disabled } = this.props;
diff --git a/scm-ui/ui-components/src/forms/FormFieldTypes.tsx b/scm-ui/ui-components/src/forms/FormFieldTypes.tsx
new file mode 100644
index 0000000000..998548c733
--- /dev/null
+++ b/scm-ui/ui-components/src/forms/FormFieldTypes.tsx
@@ -0,0 +1,81 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { ChangeEvent, FC, FocusEvent } from "react";
+
+export type MinimumBaseProps = {
+  name?: string;
+};
+
+export type LegacyProps<Base extends MinimumBaseProps, ValueType> = Base & {
+  onChange?: (value: ValueType, name?: string) => void;
+  onBlur?: (value: ValueType, name?: string) => void;
+  innerRef?: never;
+};
+
+export type RefProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = Base & {
+  onChange?: (event: ChangeEvent<ElementType>) => void;
+  onBlur?: (event: FocusEvent<ElementType>) => void;
+};
+
+export type InnerRefProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = RefProps<
+  Base,
+  ElementType
+> & {
+  innerRef: React.ForwardedRef<ElementType>;
+};
+
+export const isUsingRef = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
+  props: Partial<FieldProps<Base, ElementType, ValueType>>
+): props is InnerRefProps<Base, ElementType> => {
+  return (props as Partial<InnerRefProps<Base, ElementType>>).innerRef !== undefined;
+};
+
+export const isLegacy = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
+  props: FieldProps<Base, ElementType, ValueType>
+): props is LegacyProps<Base, ValueType> => {
+  return (props as Partial<InnerRefProps<Base, ElementType>>).innerRef === undefined;
+};
+
+export type FieldProps<Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType> =
+  | LegacyProps<Base, ValueType>
+  | InnerRefProps<Base, ElementType>;
+
+export type OuterProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = RefProps<Base, ElementType> & {
+  ref: React.Ref<ElementType>;
+};
+
+export type FieldType<Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType> = {
+  (props: OuterProps<Base, ElementType>): React.ReactElement<OuterProps<Base, ElementType>> | null;
+  (props: LegacyProps<Base, ValueType>): React.ReactElement<LegacyProps<Base, ValueType>> | null;
+};
+
+export const createFormFieldWrapper = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
+  InnerType: FC<FieldProps<Base, ElementType, ValueType>>
+) =>
+  React.forwardRef<ElementType, LegacyProps<Base, ValueType> | OuterProps<Base, ElementType>>((props, ref) => {
+    if (ref) {
+      return <InnerType innerRef={ref} {...(props as RefProps<Base, ElementType>)} />;
+    }
+    return <InnerType {...(props as LegacyProps<Base, ValueType>)} />;
+  });
diff --git a/scm-ui/ui-components/src/forms/InputField.stories.tsx b/scm-ui/ui-components/src/forms/InputField.stories.tsx
new file mode 100644
index 0000000000..48c4dd91f0
--- /dev/null
+++ b/scm-ui/ui-components/src/forms/InputField.stories.tsx
@@ -0,0 +1,124 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC, useRef, useState } from "react";
+import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
+import InputField from "./InputField";
+import Button from "../buttons/Button";
+import { MemoryRouter } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { SubmitButton } from "../buttons";
+import { Person } from "@scm-manager/ui-types";
+
+const Decorator = styled.div`
+  padding: 2rem;
+  max-width: 30rem;
+`;
+
+const Ref: FC = () => {
+  const ref = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <InputField ref={ref} placeholder="Click the button to focus me" />
+      <Button action={() => ref.current?.focus()} color="primary">
+        Focus InputField
+      </Button>
+    </>
+  );
+};
+
+const AutoFocusAndRef: FC = () => {
+  const ref = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <InputField ref={ref} autofocus={true} placeholder="Click the button to focus me" />
+      <InputField placeholder="Click me to switch focus" />
+      <Button action={() => ref.current?.focus()} color="primary">
+        Focus First InputField
+      </Button>
+    </>
+  );
+};
+
+type Name = {
+  firstName: string;
+  lastName: string;
+};
+
+const ReactHookForm: FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<Name>();
+  const [stored, setStored] = useState<Person>();
+
+  const onSubmit = (person: Person) => {
+    setStored(person);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <InputField label="First Name" autofocus={true} {...register("firstName")} />
+        <InputField
+          label="Last Name"
+          {...register("lastName", { required: true })}
+          validationError={!!errors.lastName}
+          errorMessage={"Last name is required"}
+        />
+        <div className="pt-2">
+          <SubmitButton>Submit</SubmitButton>
+        </div>
+      </form>
+      {stored ? (
+        <div className="mt-5">
+          <pre>
+            <code>{JSON.stringify(stored, null, 2)}</code>
+          </pre>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+const LegacyEvents: FC = () => {
+  const [value, setValue] = useState<string>("");
+  return (
+    <>
+      <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>)
+  .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 />)
+  .add("Legacy Events", () => <LegacyEvents />)
+  .add("AutoFocusAndRef", () => <AutoFocusAndRef />)
+  .add("React Hook Form", () => <ReactHookForm />);
diff --git a/scm-ui/ui-components/src/forms/InputField.tsx b/scm-ui/ui-components/src/forms/InputField.tsx
index bd2f3d176b..26ea3b73c5 100644
--- a/scm-ui/ui-components/src/forms/InputField.tsx
+++ b/scm-ui/ui-components/src/forms/InputField.tsx
@@ -21,109 +21,109 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
+import React, { ChangeEvent, FC, FocusEvent, KeyboardEvent } from "react";
 import classNames from "classnames";
 import LabelWithHelpIcon from "./LabelWithHelpIcon";
 import { createAttributesForTesting } from "../devBuild";
+import useAutofocus from "./useAutofocus";
+import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 
-type Props = {
+type BaseProps = {
   label?: string;
   name?: string;
   placeholder?: string;
   value?: string;
   type?: string;
   autofocus?: boolean;
-  onChange: (value: string, name?: string) => void;
   onReturnPressed?: () => void;
   validationError?: boolean;
-  errorMessage?: string;
+  errorMessage?: string | string[];
   informationMessage?: string;
   disabled?: boolean;
   helpText?: string;
   className?: string;
   testId?: string;
-  onBlur?: (value: string, name?: string) => void;
+  defaultValue?: string;
 };
 
-class InputField extends React.Component<Props> {
-  static defaultProps = {
-    type: "text",
-    placeholder: ""
-  };
+export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>> = ({
+  name,
+  onReturnPressed,
+  type,
+  placeholder,
+  value,
+  validationError,
+  errorMessage,
+  informationMessage,
+  disabled,
+  label,
+  helpText,
+  className,
+  testId,
+  autofocus,
+  defaultValue,
+  ...props
+}) => {
+  const field = useAutofocus<HTMLInputElement>(autofocus, props.innerRef);
 
-  field: HTMLInputElement | null | undefined;
-
-  componentDidMount() {
-    if (this.props.autofocus && this.field) {
-      this.field.focus();
-    }
-  }
-
-  handleInput = (event: ChangeEvent<HTMLInputElement>) => {
-    this.props.onChange(event.target.value, this.props.name);
-  };
-
-  handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    if (this.props.onBlur) {
-      this.props.onBlur(event.target.value, this.props.name);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (props.onChange) {
+      if (isUsingRef<BaseProps, HTMLInputElement, string>(props)) {
+        props.onChange(event);
+      } else if (isLegacy(props)) {
+        props.onChange(event.target.value, name);
+      }
     }
   };
 
-  handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
-    const onReturnPressed = this.props.onReturnPressed;
-    if (!onReturnPressed) {
-      return;
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (props.onBlur) {
+      if (isUsingRef<BaseProps, HTMLInputElement, string>(props)) {
+        props.onBlur(event);
+      } else if (isLegacy(props)) {
+        props.onBlur(event.target.value, name);
+      }
     }
-    if (event.key === "Enter") {
+  };
+
+  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (onReturnPressed && event.key === "Enter") {
       event.preventDefault();
       onReturnPressed();
     }
   };
 
-  render() {
-    const {
-      type,
-      placeholder,
-      value,
-      validationError,
-      errorMessage,
-      informationMessage,
-      disabled,
-      label,
-      helpText,
-      className,
-      testId
-    } = this.props;
-    const errorView = validationError ? "is-danger" : "";
-    let helper;
-    if (validationError) {
-      helper = <p className="help is-danger">{errorMessage}</p>;
-    } else if (informationMessage) {
-      helper = <p className="help is-info">{informationMessage}</p>;
-    }
-    return (
-      <div className={classNames("field", className)}>
-        <LabelWithHelpIcon label={label} helpText={helpText} />
-        <div className="control">
-          <input
-            ref={input => {
-              this.field = input;
-            }}
-            className={classNames("input", errorView)}
-            type={type}
-            placeholder={placeholder}
-            value={value}
-            onChange={this.handleInput}
-            onKeyPress={this.handleKeyPress}
-            disabled={disabled}
-            onBlur={this.handleBlur}
-            {...createAttributesForTesting(testId)}
-          />
-        </div>
-        {helper}
-      </div>
-    );
+  const errorView = validationError ? "is-danger" : "";
+  let helper;
+  if (validationError) {
+    helper = <p className="help is-danger">{errorMessage}</p>;
+  } else if (informationMessage) {
+    helper = <p className="help is-info">{informationMessage}</p>;
   }
-}
+  return (
+    <div className={classNames("field", className)}>
+      <LabelWithHelpIcon label={label} helpText={helpText} />
+      <div className="control">
+        <input
+          ref={field}
+          name={name}
+          className={classNames("input", errorView)}
+          type={type}
+          placeholder={placeholder}
+          value={value}
+          disabled={disabled}
+          onChange={handleChange}
+          onKeyPress={handleKeyPress}
+          onBlur={handleBlur}
+          defaultValue={defaultValue}
+          {...createAttributesForTesting(testId)}
+        />
+      </div>
+      {helper}
+    </div>
+  );
+};
+
+const InputField: FieldType<BaseProps, HTMLInputElement, string> = createFormFieldWrapper(InnerInputField);
 
 export default InputField;
diff --git a/scm-ui/ui-components/src/forms/Radio.stories.tsx b/scm-ui/ui-components/src/forms/Radio.stories.tsx
index aef1bfe29d..641ea4da25 100644
--- a/scm-ui/ui-components/src/forms/Radio.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.stories.tsx
@@ -21,10 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useRef, useState } from "react";
 import { storiesOf } from "@storybook/react";
 import Radio from "./Radio";
 import styled from "styled-components";
+import Button from "../buttons/Button";
+import { useForm } from "react-hook-form";
+import { SubmitButton } from "../buttons";
+import { MemoryRouter } from "react-router-dom";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -39,7 +43,73 @@ const RadioList = styled.div`
   padding: 2em;
 `;
 
+const Ref: FC = () => {
+  const ref = useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <Radio label={"Ref Radio Button"} checked={false} ref={ref} />
+      <Button
+        action={() => {
+          if (ref.current) {
+            ref.current.checked = true;
+          }
+        }}
+        color="primary"
+      >
+        Check InputField
+      </Button>
+    </>
+  );
+};
+
+type Settings = {
+  rememberMe: string;
+  scramblePassword: string;
+};
+
+const ReactHookForm: FC = () => {
+  const { register, handleSubmit } = useForm<Settings>();
+  const [stored, setStored] = useState<Settings>();
+
+  const onSubmit = (settings: Settings) => {
+    setStored(settings);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <RadioList>
+          <Radio defaultChecked={true} value={"true"} label="Remember Me" {...register("rememberMe")} />
+          <Radio value={"false"} label="Dont Remember Me" {...register("rememberMe")} />
+        </RadioList>
+        <Radio className="ml-2" value={"false"} label="Scramble Password" {...register("scramblePassword")} />
+        <div className="pt-2">
+          <SubmitButton>Submit</SubmitButton>
+        </div>
+      </form>
+      {stored ? (
+        <div className="mt-5">
+          <pre>
+            <code>{JSON.stringify(stored, null, 2)}</code>
+          </pre>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+const LegacyEvents: FC = () => {
+  const [value, setValue] = useState<boolean>(false);
+  return (
+    <>
+      <Radio checked={value} onChange={setValue} />
+      <div className="mt-3">{JSON.stringify(value)}</div>
+    </>
+  );
+};
+
 storiesOf("Forms|Radio", module)
+  .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Default", () => (
     <Spacing>
       <Radio label="Not checked" checked={false} />
@@ -60,4 +130,7 @@ storiesOf("Forms|Radio", module)
         helpText="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."
       />
     </RadioList>
-  ));
+  ))
+  .add("Ref", () => <Ref />)
+  .add("Legacy Events", () => <LegacyEvents />)
+  .add("ReactHookForm", () => <ReactHookForm />);
diff --git a/scm-ui/ui-components/src/forms/Radio.tsx b/scm-ui/ui-components/src/forms/Radio.tsx
index fe6a35f4a6..dbadcd65ef 100644
--- a/scm-ui/ui-components/src/forms/Radio.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.tsx
@@ -21,61 +21,81 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, FC, FocusEvent } from "react";
 import { Help } from "../index";
 import styled from "styled-components";
+import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
+import classNames from "classnames";
 
 const StyledRadio = styled.label`
   margin-right: 0.5em;
 `;
 
-type Props = {
+type BaseProps = {
   label?: string;
   name?: string;
   value?: string;
-  checked: boolean;
-  onChange?: (value: boolean, name?: string) => void;
+  checked?: boolean;
   disabled?: boolean;
   helpText?: string;
+  defaultChecked?: boolean;
+  className?: string;
 };
 
-class Radio extends React.Component<Props> {
-  renderHelp = () => {
-    const helpText = this.props.helpText;
+const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name, defaultChecked, ...props }) => {
+  const renderHelp = () => {
+    const helpText = props.helpText;
     if (helpText) {
       return <Help message={helpText} />;
     }
   };
 
-  onValueChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (this.props.onChange) {
-      this.props.onChange(event.target.checked, this.props.name);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (props.onChange) {
+      if (isUsingRef<BaseProps, HTMLInputElement, boolean>(props)) {
+        props.onChange(event);
+      } else if (isLegacy(props)) {
+        props.onChange(Boolean(event.target.checked), name);
+      }
     }
   };
 
-  render() {
-    return (
-      <>
-        {/*
-        we have to ignore the next line, 
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (props.onBlur) {
+      if (isUsingRef<BaseProps, HTMLInputElement, boolean>(props)) {
+        props.onBlur(event);
+      } else if (isLegacy(props)) {
+        props.onBlur(Boolean(event.target.checked), name);
+      }
+    }
+  };
+
+  return (
+    <>
+      {/*
+        we have to ignore the next line,
         because jsx label does not the custom disabled attribute
         but bulma does.
         // @ts-ignore */}
-        <StyledRadio className="radio" disabled={this.props.disabled}>
-          <input
-            type="radio"
-            name={this.props.name}
-            value={this.props.value}
-            checked={this.props.checked}
-            onChange={this.onValueChange}
-            disabled={this.props.disabled}
-          />{" "}
-          {this.props.label}
-          {this.renderHelp()}
-        </StyledRadio>
-      </>
-    );
-  }
-}
+      <StyledRadio className={classNames("radio", props.className)} disabled={props.disabled}>
+        <input
+          type="radio"
+          name={name}
+          value={props.value}
+          checked={props.checked}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          disabled={props.disabled}
+          ref={props.innerRef}
+          defaultChecked={defaultChecked}
+        />{" "}
+        {props.label}
+        {renderHelp()}
+      </StyledRadio>
+    </>
+  );
+};
+
+const Radio: FieldType<BaseProps, HTMLInputElement, boolean> = createFormFieldWrapper(InnerRadio);
 
 export default Radio;
diff --git a/scm-ui/ui-components/src/forms/Select.stories.tsx b/scm-ui/ui-components/src/forms/Select.stories.tsx
new file mode 100644
index 0000000000..4e5e579567
--- /dev/null
+++ b/scm-ui/ui-components/src/forms/Select.stories.tsx
@@ -0,0 +1,130 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC, useRef, useState } from "react";
+import Button from "../buttons/Button";
+import { useForm } from "react-hook-form";
+import { SubmitButton } from "../buttons";
+import { storiesOf } from "@storybook/react";
+import { MemoryRouter } from "react-router-dom";
+import Select from "./Select";
+
+const Ref: FC = () => {
+  const ref = useRef<HTMLSelectElement>(null);
+  const [selected, setSelected] = useState("false");
+  return (
+    <>
+      <Select
+        options={[
+          { label: "foo", value: "true" },
+          { label: "bar", value: "false" }
+        ]}
+        value={selected}
+        label={"Ref Radio Button"}
+        onChange={e => setSelected(e.target.value)}
+        ref={ref}
+      />
+      <Button
+        action={() => {
+          if (ref.current) {
+            ref.current.focus();
+          }
+        }}
+        color="primary"
+      >
+        Focus Select Field
+      </Button>
+      {selected}
+    </>
+  );
+};
+
+type Settings = {
+  rememberMe: string;
+  scramblePassword: string;
+};
+
+const ReactHookForm: FC = () => {
+  const { register, handleSubmit } = useForm<Settings>();
+  const [stored, setStored] = useState<Settings>();
+
+  const onSubmit = (settings: Settings) => {
+    setStored(settings);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Select
+          options={[
+            { label: "Yes", value: "true" },
+            { label: "No", value: "false" }
+          ]}
+          label="Remember Me"
+          {...register("rememberMe")}
+        />
+        <Select
+          options={[
+            { label: "Yes", value: "true" },
+            { label: "No", value: "false" }
+          ]}
+          label="Scramble Password"
+          {...register("scramblePassword")}
+        />
+
+        <div className="pt-2">
+          <SubmitButton>Submit</SubmitButton>
+        </div>
+      </form>
+      {stored ? (
+        <div className="mt-5">
+          <pre>
+            <code>{JSON.stringify(stored, null, 2)}</code>
+          </pre>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+const LegacyEvents: FC = () => {
+  const [value, setValue] = useState<string>();
+  return (
+    <>
+      <Select
+        options={[
+          { label: "Yes", value: "true" },
+          { label: "No", value: "false" }
+        ]}
+        onChange={setValue}
+      />
+      <div className="mt-3">{JSON.stringify(value)}</div>
+    </>
+  );
+};
+
+storiesOf("Forms|Select", module)
+  .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
+  .add("Ref", () => <Ref />)
+  .add("Legacy Events", () => <LegacyEvents />)
+  .add("ReactHookForm", () => <ReactHookForm />);
diff --git a/scm-ui/ui-components/src/forms/Select.tsx b/scm-ui/ui-components/src/forms/Select.tsx
index c950184939..9373b7e8d2 100644
--- a/scm-ui/ui-components/src/forms/Select.tsx
+++ b/scm-ui/ui-components/src/forms/Select.tsx
@@ -21,72 +21,107 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, FC, FocusEvent, useEffect } from "react";
 import classNames from "classnames";
 import LabelWithHelpIcon from "./LabelWithHelpIcon";
-import {createAttributesForTesting} from "../devBuild";
+import { createAttributesForTesting } from "../devBuild";
+import useInnerRef from "./useInnerRef";
+import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 
 export type SelectItem = {
   value: string;
   label: string;
 };
 
-type Props = {
+type BaseProps = {
   name?: string;
   label?: string;
   options: SelectItem[];
   value?: string;
-  onChange: (value: string, name?: string) => void;
   loading?: boolean;
   helpText?: string;
   disabled?: boolean;
   testId?: string;
+  defaultValue?: string;
 };
 
-class Select extends React.Component<Props> {
-  field: HTMLSelectElement | null | undefined;
+const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
+  value,
+  defaultValue,
+  name,
+  label,
+  helpText,
+  loading,
+  disabled,
+  testId,
+  ...props
+}) => {
+  const field = useInnerRef(props.innerRef);
 
-  componentDidMount() {
-    // trigger change after render, if value is null to set it to the first value
-    // of the given options.
-    if (!this.props.value && this.field && this.field.value) {
-      this.props.onChange(this.field.value);
+  const handleInput = (event: ChangeEvent<HTMLSelectElement>) => {
+    if (props.onChange) {
+      if (isUsingRef<BaseProps, HTMLSelectElement, string>(props)) {
+        props.onChange(event);
+      } else if (isLegacy(props)) {
+        props.onChange(event.target.value, name);
+      }
     }
-  }
-
-  handleInput = (event: ChangeEvent<HTMLSelectElement>) => {
-    this.props.onChange(event.target.value, this.props.name);
   };
 
-  render() {
-    const { options, value, label, helpText, loading, disabled, testId } = this.props;
-    const loadingClass = loading ? "is-loading" : "";
+  const handleBlur = (event: FocusEvent<HTMLSelectElement>) => {
+    if (props.onBlur) {
+      if (isUsingRef<BaseProps, HTMLSelectElement, string>(props)) {
+        props.onBlur(event);
+      } else if (isLegacy(props)) {
+        props.onBlur(event.target.value, name);
+      }
+    }
+  };
 
-    return (
-      <div className="field">
-        <LabelWithHelpIcon label={label} helpText={helpText} />
-        <div className={classNames("control select", loadingClass)}>
-          <select
-            ref={input => {
-              this.field = input;
-            }}
-            value={value}
-            onChange={this.handleInput}
-            disabled={disabled}
-            {...createAttributesForTesting(testId)}
-          >
-            {options.map(opt => {
-              return (
-                <option value={opt.value} key={"KEY_" + opt.value}>
-                  {opt.label}
-                </option>
-              );
-            })}
-          </select>
-        </div>
+  useEffect(() => {
+    // trigger change after render, if value is null to set it to the first value
+    // of the given options.
+    if (!value && field.current?.value) {
+      if (props.onChange) {
+        if (isUsingRef<BaseProps, HTMLSelectElement, string>(props)) {
+          const event = new Event("change");
+          field.current?.dispatchEvent(event);
+        } else if (isLegacy(props)) {
+          props.onChange(field.current?.value, name);
+        }
+      }
+    }
+  }, [field, name, props, value]);
+
+  const loadingClass = loading ? "is-loading" : "";
+
+  return (
+    <div className="field">
+      <LabelWithHelpIcon label={label} helpText={helpText} />
+      <div className={classNames("control select", loadingClass)}>
+        <select
+          name={name}
+          ref={field}
+          value={value}
+          defaultValue={defaultValue}
+          onChange={handleInput}
+          onBlur={handleBlur}
+          disabled={disabled}
+          {...createAttributesForTesting(testId)}
+        >
+          {props.options.map(opt => {
+            return (
+              <option value={opt.value} key={"KEY_" + opt.value}>
+                {opt.label}
+              </option>
+            );
+          })}
+        </select>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+const Select: FieldType<BaseProps, HTMLSelectElement, string> = createFormFieldWrapper(InnerSelect);
 
 export default Select;
diff --git a/scm-ui/ui-components/src/forms/Textarea.stories.tsx b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
index bcb638cbaa..9e057e224d 100644
--- a/scm-ui/ui-components/src/forms/Textarea.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
@@ -21,10 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { useState } from "react";
+import React, { FC, useRef, useState } from "react";
 import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import Textarea from "./Textarea";
+import Button from "../buttons/Button";
+import { useForm } from "react-hook-form";
+import { SubmitButton } from "../buttons";
+import { MemoryRouter } from "react-router-dom";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -59,7 +63,7 @@ const OnSubmitTextare = () => {
   );
 };
 
-const OnCancelTextare = () => {
+const OnCancelTextarea = () => {
   const [value, setValue] = useState("Use the escape key to clear the textarea");
 
   const cancel = () => {
@@ -73,7 +77,97 @@ const OnCancelTextare = () => {
   );
 };
 
+const Ref: FC = () => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  return (
+    <>
+      <Textarea ref={ref} />
+      <Button action={() => ref.current?.focus()} color="primary">
+        Focus InputField
+      </Button>
+    </>
+  );
+};
+
+const AutoFocusAndRef: FC = () => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  return (
+    <>
+      <Textarea ref={ref} autofocus={true} placeholder="Click the button to focus me" />
+      <Textarea placeholder="Click me to switch focus" />
+      <Button action={() => ref.current?.focus()} color="primary">
+        Focus First InputField
+      </Button>
+    </>
+  );
+};
+
+type Commit = {
+  message: string;
+  footer: string;
+};
+
+const ReactHookForm: FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<Commit>();
+  const [stored, setStored] = useState<Commit>();
+
+  const onSubmit = (commit: Commit) => {
+    setStored(commit);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Textarea
+          autofocus={true}
+          label="Message"
+          {...register("message", { required: true })}
+          validationError={!!errors.message}
+          errorMessage={"Message is required"}
+        />
+        <Textarea label="Footer" {...register("footer")} />
+        <div className="pt-2">
+          <SubmitButton>Submit</SubmitButton>
+        </div>
+      </form>
+      {stored ? (
+        <div className="mt-5">
+          <pre>
+            <code>{JSON.stringify(stored, null, 2)}</code>
+          </pre>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+const LegacyEvents: FC = () => {
+  const [value, setValue] = useState<string>("");
+  return (
+    <>
+      <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>)
   .add("OnChange", () => <OnChangeTextarea />)
   .add("OnSubmit", () => <OnSubmitTextare />)
-  .add("OnCancel", () => <OnCancelTextare />);
+  .add("OnCancel", () => <OnCancelTextarea />)
+  .add("AutoFocus", () => <Textarea label="Field with AutoFocus" autofocus={true} />)
+  .add("Default Value", () => (
+    <Textarea
+      label="Field with Default Value"
+      defaultValue={"I am a text area with so much default value its crazy!"}
+    />
+  ))
+  .add("Ref", () => <Ref />)
+  .add("Legacy Events", () => <LegacyEvents />)
+  .add("AutoFocusAndRef", () => <AutoFocusAndRef />)
+  .add("ReactHookForm", () => <ReactHookForm />);
diff --git a/scm-ui/ui-components/src/forms/Textarea.tsx b/scm-ui/ui-components/src/forms/Textarea.tsx
index 6ca4454d2b..68e4199b4d 100644
--- a/scm-ui/ui-components/src/forms/Textarea.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.tsx
@@ -21,70 +21,107 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ChangeEvent, KeyboardEvent } from "react";
+import React, { ChangeEvent, FC, FocusEvent, KeyboardEvent } from "react";
 import LabelWithHelpIcon from "./LabelWithHelpIcon";
+import useAutofocus from "./useAutofocus";
+import classNames from "classnames";
+import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 
-type Props = {
+type BaseProps = {
   name?: string;
   label?: string;
   placeholder?: string;
   value?: string;
   autofocus?: boolean;
-  onChange: (value: string, name?: string) => void;
   helpText?: string;
   disabled?: boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
+  validationError?: boolean;
+  errorMessage?: string | string[];
+  informationMessage?: string;
+  defaultValue?: string;
 };
 
-class Textarea extends React.Component<Props> {
-  field: HTMLTextAreaElement | null | undefined;
+const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
+  placeholder,
+  value,
+  autofocus,
+  name,
+  label,
+  helpText,
+  disabled,
+  onSubmit,
+  onCancel,
+  errorMessage,
+  validationError,
+  informationMessage,
+  defaultValue,
+  ...props
+}) => {
+  const ref = useAutofocus<HTMLTextAreaElement>(autofocus, props.innerRef);
 
-  componentDidMount() {
-    if (this.props.autofocus && this.field) {
-      this.field.focus();
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    if (props.onChange) {
+      if (isUsingRef<BaseProps, HTMLTextAreaElement, string>(props)) {
+        props.onChange(event);
+      } else if (isLegacy(props)) {
+        props.onChange(event.target.value, name);
+      }
     }
-  }
-
-  handleInput = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    this.props.onChange(event.target.value, this.props.name);
   };
 
-  onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    const { onCancel } = this.props;
+  const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+    if (props.onBlur) {
+      if (isUsingRef<BaseProps, HTMLTextAreaElement, string>(props)) {
+        props.onBlur(event);
+      } else if (isLegacy(props)) {
+        props.onBlur(event.target.value, name);
+      }
+    }
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (onCancel && event.key === "Escape") {
       onCancel();
       return;
     }
 
-    const { onSubmit } = this.props;
     if (onSubmit && event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
       onSubmit();
     }
   };
 
-  render() {
-    const { placeholder, value, label, helpText, disabled } = this.props;
-
-    return (
-      <div className="field">
-        <LabelWithHelpIcon label={label} helpText={helpText} />
-        <div className="control">
-          <textarea
-            className="textarea"
-            ref={input => {
-              this.field = input;
-            }}
-            placeholder={placeholder}
-            onChange={this.handleInput}
-            value={value}
-            disabled={!!disabled}
-            onKeyDown={this.onKeyDown}
-          />
-        </div>
-      </div>
-    );
+  const errorView = validationError ? "is-danger" : "";
+  let helper;
+  if (validationError) {
+    helper = <p className="help is-danger">{errorMessage}</p>;
+  } else if (informationMessage) {
+    helper = <p className="help is-info">{informationMessage}</p>;
   }
-}
+
+  return (
+    <div className="field">
+      <LabelWithHelpIcon label={label} helpText={helpText} />
+      <div className="control">
+        <textarea
+          className={classNames("textarea", errorView)}
+          ref={ref}
+          name={name}
+          placeholder={placeholder}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={value}
+          disabled={disabled}
+          onKeyDown={onKeyDown}
+          defaultValue={defaultValue}
+        />
+      </div>
+      {helper}
+    </div>
+  );
+};
+
+const Textarea: FieldType<BaseProps, HTMLTextAreaElement, string> = createFormFieldWrapper(InnerTextarea);
 
 export default Textarea;
diff --git a/scm-ui/ui-components/src/forms/useAutofocus.ts b/scm-ui/ui-components/src/forms/useAutofocus.ts
new file mode 100644
index 0000000000..f09b772cb4
--- /dev/null
+++ b/scm-ui/ui-components/src/forms/useAutofocus.ts
@@ -0,0 +1,50 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useEffect } from "react";
+import { useRef } from "react";
+
+const useAutofocus = <T extends HTMLElement | null>(enabled?: boolean, innerRef?: React.ForwardedRef<T>) => {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (enabled && ref.current) {
+      ref.current.focus();
+    }
+  }, [enabled, ref]);
+
+  useEffect(() => {
+    if (innerRef) {
+      if (typeof innerRef === "function") {
+        innerRef(ref.current);
+      } else {
+        innerRef.current = ref.current;
+      }
+    }
+  }, [ref, innerRef]);
+
+  return ref;
+};
+
+export default useAutofocus;
diff --git a/scm-ui/ui-components/src/forms/useInnerRef.ts b/scm-ui/ui-components/src/forms/useInnerRef.ts
new file mode 100644
index 0000000000..ecf04820ba
--- /dev/null
+++ b/scm-ui/ui-components/src/forms/useInnerRef.ts
@@ -0,0 +1,43 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useEffect, useRef } from "react";
+
+const useInnerRef = <T extends HTMLElement | null>(innerRef?: React.ForwardedRef<T>) => {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (innerRef) {
+      if (typeof innerRef === "function") {
+        innerRef(ref.current);
+      } else {
+        innerRef.current = ref.current;
+      }
+    }
+  }, [ref, innerRef]);
+
+  return ref;
+};
+
+export default useInnerRef;
diff --git a/scm-ui/ui-plugins/package.json b/scm-ui/ui-plugins/package.json
index a7754cb2a6..42a36d0423 100644
--- a/scm-ui/ui-plugins/package.json
+++ b/scm-ui/ui-plugins/package.json
@@ -11,6 +11,7 @@
     "classnames": "^2.2.6",
     "query-string": "^5.0.1",
     "react": "^17.0.1",
+    "react-hook-form": "^7.5.1",
     "react-i18next": "^10.13.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^5.1.2",
diff --git a/scm-ui/ui-webapp/package.json b/scm-ui/ui-webapp/package.json
index a59ca189a7..2ed5cbae24 100644
--- a/scm-ui/ui-webapp/package.json
+++ b/scm-ui/ui-webapp/package.json
@@ -14,6 +14,7 @@
     "query-string": "5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^7.5.1",
     "react-i18next": "^10.13.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^5.1.2",
diff --git a/scm-ui/ui-webapp/src/containers/loadBundle.ts b/scm-ui/ui-webapp/src/containers/loadBundle.ts
index bf03dddd53..87b127a13b 100644
--- a/scm-ui/ui-webapp/src/containers/loadBundle.ts
+++ b/scm-ui/ui-webapp/src/containers/loadBundle.ts
@@ -31,7 +31,8 @@ import * as ReactDOM from "react-dom";
 import * as ReactRouterDom from "react-router-dom";
 import * as Redux from "redux";
 import * as ReactRedux from "react-redux";
-import SytleComponentsDefault, * as SytleComponents from "styled-components";
+import StyledComponentsDefault, * as StyledComponents from "styled-components";
+import ReactHookFormDefault, * as ReactHookForm from "react-hook-form";
 import * as ReactI18Next from "react-i18next";
 import ClassNamesDefault, * as ClassNames from "classnames";
 import QueryStringDefault, * as QueryString from "query-string";
@@ -113,8 +114,9 @@ const expose = (name: string, cmp: any, defaultCmp?: any) => {
 expose("react", React);
 expose("react-dom", ReactDOM);
 expose("react-router-dom", ReactRouterDom);
-expose("styled-components", SytleComponents, SytleComponentsDefault);
+expose("styled-components", StyledComponents, StyledComponentsDefault);
 expose("react-i18next", ReactI18Next);
+expose("react-hook-form", ReactHookForm, ReactHookFormDefault);
 expose("classnames", ClassNames, ClassNamesDefault);
 expose("query-string", QueryString, QueryStringDefault);
 expose("@scm-manager/ui-extensions", UIExtensions);
diff --git a/yarn.lock b/yarn.lock
index df0b4895ea..066245135d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16327,6 +16327,11 @@ react-helmet-async@^1.0.2, react-helmet-async@^1.0.7:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-hook-form@^7.5.1:
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.5.2.tgz#4f8da6d22ae67aa18ce170a0980bd7e1e7bd6917"
+  integrity sha512-fRA6TieC+wsumcdAM7OTeWSa+s+qG2ZlWfTXB2gpOwVeWpJxDwUpZZRfZdU9Bj6TEn1v/ZPJg/1xbmUGVI+MWA==
+
 react-i18next@^10.13.1:
   version "10.13.2"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-10.13.2.tgz#2943705fa751d366fc95b3755520ebe6eeed2408"