From 6ed876a3aeec4ffc4afdaf8de92fce143032b881 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Sat, 30 May 2020 22:51:41 +0200
Subject: [PATCH] Create `FormLayout` component and make form fields ready for
 it (#44)

---
 src/demo/pages/DemoContainer.jsx              | 185 ++++++++++++++++++
 src/demo/pages/navigation.js                  |   4 +
 .../components/layout/CardList/CardList.scss  |   3 +-
 .../layout/FormLayout/FormLayout.jsx          |  58 ++++++
 .../layout/FormLayout/FormLayout.scss         |  22 +++
 src/lib/components/layout/FormLayout/index.js |   1 +
 src/lib/components/layout/List/List.scss      |   3 +-
 src/lib/components/layout/Media/Media.scss    |   3 +-
 src/lib/components/layout/Row/Row.scss        |   3 +-
 .../ForgotPassword.test.jsx.snap              |   6 +
 .../__snapshots__/Login.test.jsx.snap         |  16 ++
 .../__snapshots__/NewPassword.test.jsx.snap   |  12 ++
 .../ui/CheckboxField/CheckboxField.jsx        |  20 +-
 .../ui/CheckboxField/CheckboxField.scss       |   8 +
 .../tests/CheckboxField.test.jsx              |   2 +
 .../__snapshots__/CheckboxField.test.jsx.snap |   2 +
 .../MultipleSelectField.jsx                   |  10 +-
 .../MultipleSelectField.scss                  |   4 +
 .../tests/MultipleSelectField.test.jsx        |   1 +
 .../MultipleSelectField.test.jsx.snap         |   5 +
 src/lib/components/ui/Radio/Radio.jsx         |  20 +-
 src/lib/components/ui/Radio/Radio.scss        |   8 +
 .../components/ui/Radio/tests/Radio.test.jsx  |   2 +
 .../tests/__snapshots__/Radio.test.jsx.snap   |   2 +
 .../components/ui/SelectField/SelectField.jsx |  10 +-
 .../ui/SelectField/SelectField.scss           |   4 +
 .../ui/SelectField/tests/SelectField.test.jsx |   1 +
 .../__snapshots__/SelectField.test.jsx.snap   |   3 +
 src/lib/components/ui/TextArea/TextArea.jsx   |  10 +-
 src/lib/components/ui/TextArea/TextArea.scss  |   4 +
 .../ui/TextArea/tests/TextArea.test.jsx       |   1 +
 .../__snapshots__/TextArea.test.jsx.snap      |   3 +
 src/lib/components/ui/TextField/TextField.jsx |  10 +-
 .../components/ui/TextField/TextField.scss    |   4 +
 .../ui/TextField/__tests__/TextField.test.jsx |   1 +
 .../__snapshots__/TextField.test.jsx.snap     |   3 +
 src/lib/components/ui/Toggle/Toggle.jsx       |  20 +-
 src/lib/components/ui/Toggle/Toggle.scss      |   8 +
 .../ui/Toggle/tests/Toggle.test.jsx           |   2 +
 .../tests/__snapshots__/Toggle.test.jsx.snap  |   2 +
 src/lib/index.js                              |   1 +
 src/lib/styles/settings/_forms-theme.scss     |   3 +
 src/lib/styles/settings/_layouts.scss         |   3 +
 src/lib/styles/tools/_forms.deprecated.scss   |  20 ++
 src/lib/styles/tools/forms/_layouts.scss      |  42 ++++
 src/lib/theme.scss                            |   7 +
 webpack.config.lib.js                         |   2 +-
 47 files changed, 549 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/layout/FormLayout/FormLayout.jsx
 create mode 100644 src/lib/components/layout/FormLayout/FormLayout.scss
 create mode 100644 src/lib/components/layout/FormLayout/index.js
 create mode 100644 src/lib/styles/settings/_layouts.scss

diff --git a/src/demo/pages/DemoContainer.jsx b/src/demo/pages/DemoContainer.jsx
index d8a5a0a4..cda1c97e 100644
--- a/src/demo/pages/DemoContainer.jsx
+++ b/src/demo/pages/DemoContainer.jsx
@@ -21,6 +21,7 @@ import {
   CTAStart,
   CheckboxField,
   ForgotPassword,
+  FormLayout,
   LayoutCenter,
   List,
   ListItem,
@@ -344,6 +345,190 @@ class DemoContainer extends React.Component {
                 </CTA>
               )}
             />
+            <h3 id="layout-components-form-layout" className="typography-size-4 mb-6">Form Layout</h3>
+            <p>
+              Vertical Form Layout works similar to List except that List Items are not needed.
+              Vertical form field layout is forced.
+            </p>
+            <Documentation
+              name="Vertical Form Layout"
+              component={(
+                <FormLayout>
+                  <>
+                    <TextField
+                      id="formLayoutVerticalFirstName"
+                      changeHandler={logger}
+                      label="First Name"
+                    />
+                    <TextField
+                      id="formLayoutVerticalLastName"
+                      changeHandler={logger}
+                      label="Last Name"
+                    />
+                  </>
+                  <TextField
+                    id="formLayoutVerticalEmail"
+                    changeHandler={logger}
+                    label="Email address"
+                    type="email"
+                    helperText="Optional"
+                  />
+                  <>
+                    <TextField
+                      id="formLayoutVerticalAddress1"
+                      changeHandler={logger}
+                      label="Address"
+                      placeholder="Address line 1"
+                    />
+                    <TextField
+                      id="formLayoutVerticalAddress2"
+                      changeHandler={logger}
+                      isLabelVisible={false}
+                      label="Address 2"
+                      placeholder="Address line 2"
+                    />
+                    <TextField
+                      id="formLayoutVerticalZip"
+                      changeHandler={logger}
+                      helperText="ZIP should be 5 to 6 digits long code."
+                      label="ZIP"
+                      inputSize={6}
+                      validationState="invalid"
+                    />
+                    <TextField
+                      id="formLayoutVerticalCountry"
+                      changeHandler={logger}
+                      label="Country"
+                    />
+                    <CheckboxField
+                      id="formLayoutVerticalDelivery"
+                      changeHandler={logger}
+                      label="This is my delivery address"
+                    />
+                  </>
+                  <SelectField
+                    id="formLayoutVerticalFruit"
+                    changeHandler={logger}
+                    label="Your favourite fruit"
+                    options={this.exampleOptions}
+                  />
+                  <TextArea
+                    id="formLayoutVerticalMessage"
+                    changeHandler={logger}
+                    fullWidth
+                    label="Message"
+                    rows={3}
+                  />
+                  <Toggle
+                    id="formLayoutVerticalNewsletter"
+                    changeHandler={logger}
+                    checked
+                    description="Only once per week!"
+                    label="Receive weekly newsletter"
+                    required
+                  />
+                  <Radio
+                    id="formLayoutVerticalFruit2"
+                    changeHandler={logger}
+                    label="And fruit again!"
+                    options={this.exampleOptions}
+                    value="apples"
+                  />
+                </FormLayout>
+              )}
+            />
+            <p>
+              Horizontal Form Layout is designed for horizontal form fields.
+              It is applied starting from <code>md</code> viewport size onwards.
+              Horizontal form field layout is forced.
+            </p>
+            <Documentation
+              name="Horizontal Form Layout"
+              component={(
+                <FormLayout fieldLayout="horizontal">
+                  <>
+                    <TextField
+                      id="formLayoutHorizontalFirstName"
+                      changeHandler={logger}
+                      label="First Name"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalLastName"
+                      changeHandler={logger}
+                      label="Last Name"
+                    />
+                  </>
+                  <TextField
+                    id="formLayoutHorizontalEmail"
+                    changeHandler={logger}
+                    label="Email address"
+                    type="email"
+                    helperText="Optional"
+                  />
+                  <>
+                    <TextField
+                      id="formLayoutHorizontalAddress1"
+                      changeHandler={logger}
+                      label="Address"
+                      placeholder="Address line 1"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalAddress2"
+                      changeHandler={logger}
+                      isLabelVisible={false}
+                      label="Address 2"
+                      placeholder="Address line 2"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalZip"
+                      changeHandler={logger}
+                      helperText="ZIP should be 5 to 6 digits long code."
+                      label="ZIP"
+                      inputSize={6}
+                      validationState="invalid"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalCountry"
+                      changeHandler={logger}
+                      label="Country"
+                    />
+                    <CheckboxField
+                      id="formLayoutHorizontalDelivery"
+                      changeHandler={logger}
+                      label="This is my delivery address"
+                    />
+                  </>
+                  <SelectField
+                    id="formLayoutHorizontalFruit"
+                    changeHandler={logger}
+                    label="Your favourite fruit"
+                    options={this.exampleOptions}
+                  />
+                  <TextArea
+                    id="formLayoutHorizontalMessage"
+                    changeHandler={logger}
+                    fullWidth
+                    label="Message"
+                    rows={3}
+                  />
+                  <Toggle
+                    id="formLayoutHorizontalNewsletter"
+                    changeHandler={logger}
+                    checked
+                    label="Receive weekly newsletter"
+                    required
+                    description="Only once per week!"
+                  />
+                  <Radio
+                    id="formLayoutHorizontalFruit2"
+                    changeHandler={logger}
+                    label="And fruit again!"
+                    options={this.exampleOptions}
+                    value="apples"
+                  />
+                </FormLayout>
+              )}
+            />
             <h3 id="layout-components-list" className="typography-size-4 mb-6">List</h3>
             <Documentation
               name="Default list"
diff --git a/src/demo/pages/navigation.js b/src/demo/pages/navigation.js
index d499c038..f632eab2 100644
--- a/src/demo/pages/navigation.js
+++ b/src/demo/pages/navigation.js
@@ -35,6 +35,10 @@ export default [
         link: '#layout-components-cta',
         title: 'CTA',
       },
+      {
+        link: '#layout-components-form-layout',
+        title: 'Form Layout',
+      },
       {
         link: '#layout-components-list',
         title: 'List',
diff --git a/src/lib/components/layout/CardList/CardList.scss b/src/lib/components/layout/CardList/CardList.scss
index a6ddfe3a..995745b9 100644
--- a/src/lib/components/layout/CardList/CardList.scss
+++ b/src/lib/components/layout/CardList/CardList.scss
@@ -1,3 +1,4 @@
+@import '../../../styles/settings/layouts';
 @import '../../../styles/tools/breakpoints';
 @import '../../../styles/tools/offset';
 @import './theme';
@@ -8,7 +9,7 @@
   grid-template-columns: 1fr;
   grid-template-rows: auto;
   grid-gap: $card-list-grid-gap;
-  margin-bottom: offset(4);
+  margin-bottom: $layout-common-bottom-offset;
 
   @include breakpoint-up(sm) {
     grid-template-columns: repeat(auto-fit, minmax($card-list-card-min-width, $card-list-card-max-width));
diff --git a/src/lib/components/layout/FormLayout/FormLayout.jsx b/src/lib/components/layout/FormLayout/FormLayout.jsx
new file mode 100644
index 00000000..69ca7a63
--- /dev/null
+++ b/src/lib/components/layout/FormLayout/FormLayout.jsx
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './FormLayout.scss';
+
+const FormLayout = (props) => {
+  const {
+    children,
+    fieldLayout,
+    id,
+  } = props;
+
+  if (!children) {
+    return null;
+  }
+
+  const fieldLayoutClass = (layout) => {
+    if (layout === 'horizontal') {
+      return styles.rootFieldLayoutHorizontal;
+    }
+
+    return styles.rootFieldLayoutVertical;
+  };
+
+  return (
+    <div
+      id={id}
+      className={[
+        styles.root,
+        fieldLayoutClass(fieldLayout),
+      ].join(' ')}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        return React.cloneElement(child, {
+          inFormLayout: true,
+          layout: fieldLayout,
+        });
+      })}
+    </div>
+  );
+};
+
+FormLayout.defaultProps = {
+  children: null,
+  fieldLayout: 'vertical',
+  id: undefined,
+};
+
+FormLayout.propTypes = {
+  children: PropTypes.node,
+  fieldLayout: PropTypes.oneOf(['horizontal', 'vertical']),
+  id: PropTypes.string,
+};
+
+export default FormLayout;
diff --git a/src/lib/components/layout/FormLayout/FormLayout.scss b/src/lib/components/layout/FormLayout/FormLayout.scss
new file mode 100644
index 00000000..37862c34
--- /dev/null
+++ b/src/lib/components/layout/FormLayout/FormLayout.scss
@@ -0,0 +1,22 @@
+@import '../../../styles/settings/forms';
+@import '../../../styles/settings/forms-theme';
+@import '../../../styles/settings/layouts';
+@import '../../../styles/tools/breakpoints';
+@import '../../../styles/tools/offset';
+
+.root {
+  margin-bottom: $layout-common-bottom-offset;
+}
+
+.rootFieldLayoutVertical,
+.rootFieldLayoutHorizontal {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-row-gap: $form-field-vertical-outer-spacing;
+}
+
+.rootFieldLayoutHorizontal {
+  @include breakpoint-up($form-field-horizontal-breakpoint) {
+    grid-template-columns: $form-layout-horizontal-label-width 1fr;
+  }
+}
diff --git a/src/lib/components/layout/FormLayout/index.js b/src/lib/components/layout/FormLayout/index.js
new file mode 100644
index 00000000..b8c88835
--- /dev/null
+++ b/src/lib/components/layout/FormLayout/index.js
@@ -0,0 +1 @@
+export { default } from './FormLayout';
diff --git a/src/lib/components/layout/List/List.scss b/src/lib/components/layout/List/List.scss
index 1935c527..34a7f134 100644
--- a/src/lib/components/layout/List/List.scss
+++ b/src/lib/components/layout/List/List.scss
@@ -1,7 +1,8 @@
+@import '../../../styles/settings/layouts';
 @import '../../../styles/tools/offset';
 
 .root {
-  margin-bottom: offset(4);
+  margin-bottom: $layout-common-bottom-offset;
 }
 
 .list {
diff --git a/src/lib/components/layout/Media/Media.scss b/src/lib/components/layout/Media/Media.scss
index 91823396..5336df3c 100644
--- a/src/lib/components/layout/Media/Media.scss
+++ b/src/lib/components/layout/Media/Media.scss
@@ -1,9 +1,10 @@
+@import '../../../styles/settings/layouts';
 @import '../../../styles/tools/offset';
 
 .media {
   display: flex;
   align-items: flex-start;
-  margin-bottom: offset(3);
+  margin-bottom: $layout-common-bottom-offset;
 }
 
 .object {
diff --git a/src/lib/components/layout/Row/Row.scss b/src/lib/components/layout/Row/Row.scss
index 4c39f220..9f73ebf0 100644
--- a/src/lib/components/layout/Row/Row.scss
+++ b/src/lib/components/layout/Row/Row.scss
@@ -1,10 +1,11 @@
+@import '../../../styles/settings/layouts';
 @import '../../../styles/tools/offset';
 
 .row {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  margin-bottom: offset(3);
+  margin-bottom: $layout-common-bottom-offset;
 }
 
 .start,
diff --git a/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap b/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap
index 385e1757..5fb4f45a 100644
--- a/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap
+++ b/src/lib/components/screens/Login/__tests__/__snapshots__/ForgotPassword.test.jsx.snap
@@ -48,6 +48,7 @@ exports[`rendering renders correctly 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="resetEmailInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -62,6 +63,7 @@ exports[`rendering renders correctly 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -198,6 +200,7 @@ exports[`rendering renders correctly 2`] = `
                 fullWidth={true}
                 helperText={null}
                 id="resetEmailInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -212,6 +215,7 @@ exports[`rendering renders correctly 2`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -376,6 +380,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="custom-id__resetEmailInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -390,6 +395,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
diff --git a/src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap b/src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap
index c55c1b11..dd45c4bb 100644
--- a/src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap
+++ b/src/lib/components/screens/Login/__tests__/__snapshots__/Login.test.jsx.snap
@@ -50,6 +50,7 @@ exports[`rendering renders correctly 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="usernameInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -64,6 +65,7 @@ exports[`rendering renders correctly 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -114,6 +116,7 @@ exports[`rendering renders correctly 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="passwordInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Password"
@@ -128,6 +131,7 @@ exports[`rendering renders correctly 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -293,6 +297,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="custom-id__usernameInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -307,6 +312,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -357,6 +363,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="custom-id__passwordInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Password"
@@ -371,6 +378,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -525,6 +533,7 @@ exports[`rendering renders correctly with translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="usernameInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="E-mail"
@@ -539,6 +548,7 @@ exports[`rendering renders correctly with translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -589,6 +599,7 @@ exports[`rendering renders correctly with translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="passwordInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Heslo"
@@ -603,6 +614,7 @@ exports[`rendering renders correctly with translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -737,6 +749,7 @@ exports[`rendering renders correctly with username 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="usernameInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Username"
@@ -751,6 +764,7 @@ exports[`rendering renders correctly with username 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -801,6 +815,7 @@ exports[`rendering renders correctly with username 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="passwordInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Password"
@@ -815,6 +830,7 @@ exports[`rendering renders correctly with username 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
diff --git a/src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap b/src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap
index b93d90c5..8c30be3f 100644
--- a/src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap
+++ b/src/lib/components/screens/Login/__tests__/__snapshots__/NewPassword.test.jsx.snap
@@ -48,6 +48,7 @@ exports[`rendering renders correctly 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="newPasswordInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="New password"
@@ -62,6 +63,7 @@ exports[`rendering renders correctly 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -112,6 +114,7 @@ exports[`rendering renders correctly 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="newPasswordRepeatInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Repeat new password"
@@ -126,6 +129,7 @@ exports[`rendering renders correctly 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -289,6 +293,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="custom-id__newPasswordInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="New password"
@@ -303,6 +308,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -353,6 +359,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="custom-id__newPasswordRepeatInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Repeat new password"
@@ -367,6 +374,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -518,6 +526,7 @@ exports[`rendering renders correctly with translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="newPasswordInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Nové heslo"
@@ -532,6 +541,7 @@ exports[`rendering renders correctly with translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
@@ -582,6 +592,7 @@ exports[`rendering renders correctly with translations 1`] = `
                 fullWidth={true}
                 helperText={null}
                 id="newPasswordRepeatInput"
+                inFormLayout={false}
                 inputSize={null}
                 isLabelVisible={true}
                 label="Nové heslo znovu"
@@ -596,6 +607,7 @@ exports[`rendering renders correctly with translations 1`] = `
                 <label
                   className="root
         isRootFullWidth
+        
         rootLayoutVertical
         isRootRequired
         rootSizeMedium
diff --git a/src/lib/components/ui/CheckboxField/CheckboxField.jsx b/src/lib/components/ui/CheckboxField/CheckboxField.jsx
index 088b6841..5ebedb63 100644
--- a/src/lib/components/ui/CheckboxField/CheckboxField.jsx
+++ b/src/lib/components/ui/CheckboxField/CheckboxField.jsx
@@ -7,6 +7,8 @@ import styles from './CheckboxField.scss';
 export const CheckboxField = (props) => {
   let labelVisibilityClass = '';
   let labelPositionClass = '';
+  let rootInFormLayoutClass = '';
+  let rootLayoutClass = '';
   let rootValidationStateClass = '';
 
   if (!props.isLabelVisible) {
@@ -19,6 +21,14 @@ export const CheckboxField = (props) => {
     labelPositionClass = styles.labelPositionAfter;
   }
 
+  if (props.inFormLayout) {
+    rootInFormLayoutClass = styles.isRootInFormLayout;
+  }
+
+  if (props.layout === 'horizontal') {
+    rootLayoutClass = styles.isRootLayoutHorizontal;
+  }
+
   if (props.validationState === 'invalid') {
     rootValidationStateClass = styles.isRootStateInvalid;
   } else if (props.validationState === 'valid') {
@@ -29,14 +39,16 @@ export const CheckboxField = (props) => {
 
   const propsToTransfer = transferProps(
     props,
-    ['changeHandler', 'checked', 'description', 'disabled', 'error', 'id', 'isLabelVisible',
-      'label', 'labelPosition', 'required', 'validationState', 'value'],
+    ['changeHandler', 'checked', 'description', 'disabled', 'error', 'id', 'inFormLayout', 'isLabelVisible',
+      'label', 'labelPosition', 'layout', 'required', 'validationState', 'value'],
   );
 
   return (
     <div
       className={`
         ${styles.root}
+        ${rootInFormLayoutClass}
+        ${rootLayoutClass}
         ${rootValidationStateClass}
       `.trim()}
     >
@@ -99,8 +111,10 @@ CheckboxField.defaultProps = {
   disabled: false,
   error: null,
   forwardedRef: undefined,
+  inFormLayout: false,
   isLabelVisible: true,
   labelPosition: 'after',
+  layout: 'vertical',
   required: false,
   validationState: null,
   value: undefined,
@@ -114,9 +128,11 @@ CheckboxField.propTypes = {
   error: PropTypes.string,
   forwardedRef: PropTypes.func,
   id: PropTypes.string.isRequired,
+  inFormLayout: PropTypes.bool,
   isLabelVisible: PropTypes.bool,
   label: PropTypes.string.isRequired,
   labelPosition: PropTypes.oneOf(['before', 'after']),
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
   required: PropTypes.bool,
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   value: PropTypes.oneOfType([
diff --git a/src/lib/components/ui/CheckboxField/CheckboxField.scss b/src/lib/components/ui/CheckboxField/CheckboxField.scss
index 718da270..07da58cb 100644
--- a/src/lib/components/ui/CheckboxField/CheckboxField.scss
+++ b/src/lib/components/ui/CheckboxField/CheckboxField.scss
@@ -191,3 +191,11 @@
 .isRootStateWarning .input:checked + .label::before {
   background-color: $form-warning-color;
 }
+
+.isRootLayoutHorizontal {
+  position: relative; // Just set something until the component is refactored (#20).
+}
+
+.isRootInFormLayout {
+  @include form-field-in-form-layout();
+}
diff --git a/src/lib/components/ui/CheckboxField/tests/CheckboxField.test.jsx b/src/lib/components/ui/CheckboxField/tests/CheckboxField.test.jsx
index 482214e2..f9c16f22 100644
--- a/src/lib/components/ui/CheckboxField/tests/CheckboxField.test.jsx
+++ b/src/lib/components/ui/CheckboxField/tests/CheckboxField.test.jsx
@@ -19,6 +19,8 @@ describe('rendering', () => {
       label="label"
       disabled
       id="test"
+      inFormLayout
+      layout="horizontal"
       value="value"
       description="some help"
       error="some error"
diff --git a/src/lib/components/ui/CheckboxField/tests/__snapshots__/CheckboxField.test.jsx.snap b/src/lib/components/ui/CheckboxField/tests/__snapshots__/CheckboxField.test.jsx.snap
index 54415663..f0727c86 100644
--- a/src/lib/components/ui/CheckboxField/tests/__snapshots__/CheckboxField.test.jsx.snap
+++ b/src/lib/components/ui/CheckboxField/tests/__snapshots__/CheckboxField.test.jsx.snap
@@ -36,6 +36,8 @@ exports[`rendering renders correctly mandatory props only 1`] = `
 exports[`rendering renders correctly with all props 1`] = `
 <div
   className="root
+        isRootInFormLayout
+        isRootLayoutHorizontal
         isRootStateWarning"
 >
   <label
diff --git a/src/lib/components/ui/MultipleSelectField/MultipleSelectField.jsx b/src/lib/components/ui/MultipleSelectField/MultipleSelectField.jsx
index 59dfe697..3334311a 100644
--- a/src/lib/components/ui/MultipleSelectField/MultipleSelectField.jsx
+++ b/src/lib/components/ui/MultipleSelectField/MultipleSelectField.jsx
@@ -7,6 +7,7 @@ import styles from './MultipleSelectField.scss';
 export const MultipleSelectField = (props) => {
   let labelVisibilityClass = '';
   let rootFullWidthClass = '';
+  let rootInFormLayoutClass = '';
   let rootLayoutClass = '';
   let rootRequiredClass = '';
   let rootSizeClass = '';
@@ -21,6 +22,10 @@ export const MultipleSelectField = (props) => {
     rootFullWidthClass = styles.isRootFullWidth;
   }
 
+  if (props.inFormLayout) {
+    rootInFormLayoutClass = styles.isRootInFormLayout;
+  }
+
   if (props.layout === 'horizontal') {
     rootLayoutClass = styles.rootLayoutHorizontal;
   } else if (props.layout === 'vertical') {
@@ -55,7 +60,7 @@ export const MultipleSelectField = (props) => {
 
   const propsToTransfer = transferProps(
     props,
-    ['changeHandler', 'disabled', 'fullWidth', 'helperText', 'id', 'isLabelVisible',
+    ['changeHandler', 'disabled', 'fullWidth', 'helperText', 'id', 'inFormLayout', 'isLabelVisible',
       'label', 'layout', 'options', 'required', 'size', 'validationState', 'value', 'variant'],
   );
 
@@ -64,6 +69,7 @@ export const MultipleSelectField = (props) => {
       className={(`
         ${styles.root}
         ${rootFullWidthClass}
+        ${rootInFormLayoutClass}
         ${rootLayoutClass}
         ${rootRequiredClass}
         ${rootSizeClass}
@@ -129,6 +135,7 @@ MultipleSelectField.defaultProps = {
   forwardedRef: undefined,
   fullWidth: false,
   helperText: null,
+  inFormLayout: false,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
@@ -145,6 +152,7 @@ MultipleSelectField.propTypes = {
   fullWidth: PropTypes.bool,
   helperText: PropTypes.string,
   id: PropTypes.string.isRequired,
+  inFormLayout: PropTypes.bool,
   isLabelVisible: PropTypes.bool,
   label: PropTypes.string.isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
diff --git a/src/lib/components/ui/MultipleSelectField/MultipleSelectField.scss b/src/lib/components/ui/MultipleSelectField/MultipleSelectField.scss
index 82bb4178..a0e5eab6 100644
--- a/src/lib/components/ui/MultipleSelectField/MultipleSelectField.scss
+++ b/src/lib/components/ui/MultipleSelectField/MultipleSelectField.scss
@@ -73,6 +73,10 @@
   @include form-field-vertical-neighbor();
 }
 
+.isRootInFormLayout {
+  @include form-field-in-form-layout();
+}
+
 // Sizes
 .rootSizeSmall {
   @include form-field-size(small, $is-multiline: true);
diff --git a/src/lib/components/ui/MultipleSelectField/tests/MultipleSelectField.test.jsx b/src/lib/components/ui/MultipleSelectField/tests/MultipleSelectField.test.jsx
index 400900b1..262fdc2c 100644
--- a/src/lib/components/ui/MultipleSelectField/tests/MultipleSelectField.test.jsx
+++ b/src/lib/components/ui/MultipleSelectField/tests/MultipleSelectField.test.jsx
@@ -45,6 +45,7 @@ describe('rendering', () => {
   it('renders correctly with all props', () => {
     const tree = shallow(<MultipleSelectField
       id="test"
+      inFormLayout
       isLabelVisible={false}
       label="label"
       layout="horizontal"
diff --git a/src/lib/components/ui/MultipleSelectField/tests/__snapshots__/MultipleSelectField.test.jsx.snap b/src/lib/components/ui/MultipleSelectField/tests/__snapshots__/MultipleSelectField.test.jsx.snap
index a5a3eeb2..33c030cf 100644
--- a/src/lib/components/ui/MultipleSelectField/tests/__snapshots__/MultipleSelectField.test.jsx.snap
+++ b/src/lib/components/ui/MultipleSelectField/tests/__snapshots__/MultipleSelectField.test.jsx.snap
@@ -4,6 +4,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
@@ -53,6 +54,7 @@ exports[`rendering renders correctly only one option 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
@@ -95,6 +97,7 @@ exports[`rendering renders correctly with all props 1`] = `
 <label
   className="root
         isRootFullWidth
+        isRootInFormLayout
         rootLayoutHorizontal
         isRootRequired
         rootSizeLarge
@@ -159,6 +162,7 @@ exports[`rendering renders correctly with one selected option 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
@@ -212,6 +216,7 @@ exports[`rendering renders correctly with two selected options 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
diff --git a/src/lib/components/ui/Radio/Radio.jsx b/src/lib/components/ui/Radio/Radio.jsx
index 26504f46..4c752624 100644
--- a/src/lib/components/ui/Radio/Radio.jsx
+++ b/src/lib/components/ui/Radio/Radio.jsx
@@ -5,6 +5,8 @@ import styles from './Radio.scss';
 
 const Radio = (props) => {
   let labelClass = styles.label;
+  let rootInFormLayoutClass = '';
+  let rootLayoutClass = '';
   let rootValidationStateClass = '';
 
   if (props.isLabelVisible) {
@@ -15,6 +17,14 @@ const Radio = (props) => {
     labelClass = styles.isLabelHidden;
   }
 
+  if (props.inFormLayout) {
+    rootInFormLayoutClass = styles.isRootInFormLayout;
+  }
+
+  if (props.layout === 'horizontal') {
+    rootLayoutClass = styles.isRootLayoutHorizontal;
+  }
+
   if (props.validationState === 'invalid') {
     rootValidationStateClass = styles.isRootStateInvalid;
   } else if (props.validationState === 'valid') {
@@ -25,14 +35,16 @@ const Radio = (props) => {
 
   const propsToTransfer = transferProps(
     props,
-    ['changeHandler', 'description', 'disabled', 'error', 'id', 'isLabelVisible',
-      'label', 'options', 'required', 'validationState', 'value'],
+    ['changeHandler', 'description', 'disabled', 'error', 'id', 'inFormLayout', 'isLabelVisible',
+      'label', 'layout', 'options', 'required', 'validationState', 'value'],
   );
 
   return (
     <div
       className={`
         ${styles.root}
+        ${rootInFormLayoutClass}
+        ${rootLayoutClass}
         ${rootValidationStateClass}
       `.trim()}
     >
@@ -99,7 +111,9 @@ Radio.defaultProps = {
   description: null,
   disabled: false,
   error: null,
+  inFormLayout: false,
   isLabelVisible: true,
+  layout: 'vertical',
   required: false,
   validationState: null,
   value: undefined,
@@ -111,8 +125,10 @@ Radio.propTypes = {
   disabled: PropTypes.bool,
   error: PropTypes.string,
   id: PropTypes.string.isRequired,
+  inFormLayout: PropTypes.bool,
   isLabelVisible: PropTypes.bool,
   label: PropTypes.string.isRequired,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
   options: PropTypes.arrayOf(PropTypes.shape({
     disabled: PropTypes.bool,
     label: PropTypes.string.isRequired,
diff --git a/src/lib/components/ui/Radio/Radio.scss b/src/lib/components/ui/Radio/Radio.scss
index b8d330de..e94ca522 100644
--- a/src/lib/components/ui/Radio/Radio.scss
+++ b/src/lib/components/ui/Radio/Radio.scss
@@ -151,3 +151,11 @@
 .isRootStateWarning .input:checked + .radioLabel::before {
   box-shadow: inset 0 0 0 6px $form-warning-color;
 }
+
+.isRootLayoutHorizontal {
+  position: relative; // Just set something until the component is refactored (#20).
+}
+
+.isRootInFormLayout {
+  @include form-field-in-form-layout();
+}
diff --git a/src/lib/components/ui/Radio/tests/Radio.test.jsx b/src/lib/components/ui/Radio/tests/Radio.test.jsx
index 230553bc..dde81363 100644
--- a/src/lib/components/ui/Radio/tests/Radio.test.jsx
+++ b/src/lib/components/ui/Radio/tests/Radio.test.jsx
@@ -63,6 +63,8 @@ describe('rendering', () => {
       label="label"
       disabled
       id="test"
+      inFormLayout
+      layout="horizontal"
       value="ch1"
       description="some help"
       error="some error"
diff --git a/src/lib/components/ui/Radio/tests/__snapshots__/Radio.test.jsx.snap b/src/lib/components/ui/Radio/tests/__snapshots__/Radio.test.jsx.snap
index 2cdcfdc9..42494dc3 100644
--- a/src/lib/components/ui/Radio/tests/__snapshots__/Radio.test.jsx.snap
+++ b/src/lib/components/ui/Radio/tests/__snapshots__/Radio.test.jsx.snap
@@ -150,6 +150,8 @@ exports[`rendering renders correctly only one option and hidden label 1`] = `
 exports[`rendering renders correctly with all props 1`] = `
 <div
   className="root
+        isRootInFormLayout
+        isRootLayoutHorizontal
         isRootStateWarning"
 >
   <div
diff --git a/src/lib/components/ui/SelectField/SelectField.jsx b/src/lib/components/ui/SelectField/SelectField.jsx
index b03cbcb7..67fe3e06 100644
--- a/src/lib/components/ui/SelectField/SelectField.jsx
+++ b/src/lib/components/ui/SelectField/SelectField.jsx
@@ -7,6 +7,7 @@ import styles from './SelectField.scss';
 export const SelectField = (props) => {
   let labelVisibilityClass = '';
   let rootFullWidthClass = '';
+  let rootInFormLayoutClass = '';
   let rootLayoutClass = '';
   let rootRequiredClass = '';
   let rootSizeClass = '';
@@ -21,6 +22,10 @@ export const SelectField = (props) => {
     rootFullWidthClass = styles.isRootFullWidth;
   }
 
+  if (props.inFormLayout) {
+    rootInFormLayoutClass = styles.isRootInFormLayout;
+  }
+
   if (props.layout === 'horizontal') {
     rootLayoutClass = styles.rootLayoutHorizontal;
   } else if (props.layout === 'vertical') {
@@ -55,7 +60,7 @@ export const SelectField = (props) => {
 
   const propsToTransfer = transferProps(
     props,
-    ['changeHandler', 'disabled', 'fullWidth', 'helperText', 'id', 'isLabelVisible',
+    ['changeHandler', 'disabled', 'fullWidth', 'helperText', 'id', 'inFormLayout', 'isLabelVisible',
       'label', 'layout', 'options', 'required', 'size', 'validationState', 'value', 'variant'],
   );
 
@@ -64,6 +69,7 @@ export const SelectField = (props) => {
       className={(`
         ${styles.root}
         ${rootFullWidthClass}
+        ${rootInFormLayoutClass}
         ${rootLayoutClass}
         ${rootRequiredClass}
         ${rootSizeClass}
@@ -131,6 +137,7 @@ SelectField.defaultProps = {
   forwardedRef: undefined,
   fullWidth: false,
   helperText: null,
+  inFormLayout: false,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
@@ -147,6 +154,7 @@ SelectField.propTypes = {
   fullWidth: PropTypes.bool,
   helperText: PropTypes.string,
   id: PropTypes.string.isRequired,
+  inFormLayout: PropTypes.bool,
   isLabelVisible: PropTypes.bool,
   label: PropTypes.string.isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
diff --git a/src/lib/components/ui/SelectField/SelectField.scss b/src/lib/components/ui/SelectField/SelectField.scss
index a07b7739..b2dc3511 100644
--- a/src/lib/components/ui/SelectField/SelectField.scss
+++ b/src/lib/components/ui/SelectField/SelectField.scss
@@ -86,6 +86,10 @@
   @include form-field-vertical-neighbor();
 }
 
+.isRootInFormLayout {
+  @include form-field-in-form-layout();
+}
+
 // Sizes
 .rootSizeSmall {
   @include form-field-size(small);
diff --git a/src/lib/components/ui/SelectField/tests/SelectField.test.jsx b/src/lib/components/ui/SelectField/tests/SelectField.test.jsx
index ab321445..e7531d16 100644
--- a/src/lib/components/ui/SelectField/tests/SelectField.test.jsx
+++ b/src/lib/components/ui/SelectField/tests/SelectField.test.jsx
@@ -45,6 +45,7 @@ describe('rendering', () => {
   it('renders correctly with all props', () => {
     const tree = shallow(<SelectField
       id="test"
+      inFormLayout
       isLabelVisible={false}
       label="label"
       layout="horizontal"
diff --git a/src/lib/components/ui/SelectField/tests/__snapshots__/SelectField.test.jsx.snap b/src/lib/components/ui/SelectField/tests/__snapshots__/SelectField.test.jsx.snap
index 1344afd8..0673b2c5 100644
--- a/src/lib/components/ui/SelectField/tests/__snapshots__/SelectField.test.jsx.snap
+++ b/src/lib/components/ui/SelectField/tests/__snapshots__/SelectField.test.jsx.snap
@@ -4,6 +4,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
@@ -58,6 +59,7 @@ exports[`rendering renders correctly only one option 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
@@ -105,6 +107,7 @@ exports[`rendering renders correctly with all props 1`] = `
 <label
   className="root
         isRootFullWidth
+        isRootInFormLayout
         rootLayoutHorizontal
         isRootRequired
         rootSizeLarge
diff --git a/src/lib/components/ui/TextArea/TextArea.jsx b/src/lib/components/ui/TextArea/TextArea.jsx
index 1fe6807e..3a42ec52 100644
--- a/src/lib/components/ui/TextArea/TextArea.jsx
+++ b/src/lib/components/ui/TextArea/TextArea.jsx
@@ -7,6 +7,7 @@ import styles from './TextArea.scss';
 export const TextArea = (props) => {
   let labelVisibilityClass = '';
   let rootFullWidthClass = '';
+  let rootInFormLayoutClass = '';
   let rootLayoutClass = '';
   let rootRequiredClass = '';
   let rootSizeClass = '';
@@ -21,6 +22,10 @@ export const TextArea = (props) => {
     rootFullWidthClass = styles.isRootFullWidth;
   }
 
+  if (props.inFormLayout) {
+    rootInFormLayoutClass = styles.isRootInFormLayout;
+  }
+
   if (props.layout === 'horizontal') {
     rootLayoutClass = styles.rootLayoutHorizontal;
   } else if (props.layout === 'vertical') {
@@ -55,7 +60,7 @@ export const TextArea = (props) => {
 
   const propsToTransfer = transferProps(
     props,
-    ['changeHandler', 'cols', 'disabled', 'fullWidth', 'helperText', 'id', 'isLabelVisible',
+    ['changeHandler', 'cols', 'disabled', 'fullWidth', 'helperText', 'id', 'inFormLayout', 'isLabelVisible',
       'label', 'layout', 'placeholder', 'required', 'rows', 'size', 'validationState', 'value', 'variant'],
   );
 
@@ -64,6 +69,7 @@ export const TextArea = (props) => {
       className={(`
         ${styles.root}
         ${rootFullWidthClass}
+        ${rootInFormLayoutClass}
         ${rootLayoutClass}
         ${rootRequiredClass}
         ${rootSizeClass}
@@ -119,6 +125,7 @@ TextArea.defaultProps = {
   forwardedRef: undefined,
   fullWidth: false,
   helperText: null,
+  inFormLayout: false,
   isLabelVisible: true,
   layout: 'vertical',
   placeholder: null,
@@ -138,6 +145,7 @@ TextArea.propTypes = {
   fullWidth: PropTypes.bool,
   helperText: PropTypes.string,
   id: PropTypes.string.isRequired,
+  inFormLayout: PropTypes.bool,
   isLabelVisible: PropTypes.bool,
   label: PropTypes.string.isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
diff --git a/src/lib/components/ui/TextArea/TextArea.scss b/src/lib/components/ui/TextArea/TextArea.scss
index 1193f301..e16abe55 100644
--- a/src/lib/components/ui/TextArea/TextArea.scss
+++ b/src/lib/components/ui/TextArea/TextArea.scss
@@ -73,6 +73,10 @@
   @include form-field-vertical-neighbor();
 }
 
+.isRootInFormLayout {
+  @include form-field-in-form-layout();
+}
+
 // Sizes
 .rootSizeSmall {
   @include form-field-size(small, $is-multiline: true);
diff --git a/src/lib/components/ui/TextArea/tests/TextArea.test.jsx b/src/lib/components/ui/TextArea/tests/TextArea.test.jsx
index 459d3a46..56421fe5 100644
--- a/src/lib/components/ui/TextArea/tests/TextArea.test.jsx
+++ b/src/lib/components/ui/TextArea/tests/TextArea.test.jsx
@@ -29,6 +29,7 @@ describe('rendering', () => {
       cols={10}
       id="test"
       helperText="some help"
+      inFormLayout
       isLabelVisible={false}
       label="label"
       layout="horizontal"
diff --git a/src/lib/components/ui/TextArea/tests/__snapshots__/TextArea.test.jsx.snap b/src/lib/components/ui/TextArea/tests/__snapshots__/TextArea.test.jsx.snap
index 1911f519..d6a7d587 100644
--- a/src/lib/components/ui/TextArea/tests/__snapshots__/TextArea.test.jsx.snap
+++ b/src/lib/components/ui/TextArea/tests/__snapshots__/TextArea.test.jsx.snap
@@ -4,6 +4,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
@@ -39,6 +40,7 @@ exports[`rendering renders correctly with all props 1`] = `
 <label
   className="root
         isRootFullWidth
+        isRootInFormLayout
         rootLayoutHorizontal
         isRootRequired
         rootSizeLarge
@@ -85,6 +87,7 @@ exports[`rendering renders correctly with hidden label 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
diff --git a/src/lib/components/ui/TextField/TextField.jsx b/src/lib/components/ui/TextField/TextField.jsx
index 09fd0516..5863088a 100644
--- a/src/lib/components/ui/TextField/TextField.jsx
+++ b/src/lib/components/ui/TextField/TextField.jsx
@@ -9,6 +9,7 @@ export const TextField = (props) => {
 
   let labelVisibilityClass = '';
   let rootFullWidthClass = '';
+  let rootInFormLayoutClass = '';
   let rootLayoutClass = '';
   let rootRequiredClass = '';
   let rootSizeClass = '';
@@ -24,6 +25,10 @@ export const TextField = (props) => {
     rootFullWidthClass = styles.isRootFullWidth;
   }
 
+  if (props.inFormLayout) {
+    rootInFormLayoutClass = styles.isRootInFormLayout;
+  }
+
   if (props.inputSize && props.inputSize <= SMALL_INPUT_SIZE) {
     rootSmallInputClass = styles.hasRootSmallInput;
   }
@@ -62,7 +67,7 @@ export const TextField = (props) => {
 
   const propsToTransfer = transferProps(
     props,
-    ['changeHandler', 'disabled', 'fullWidth', 'helperText', 'id', 'inputSize', 'isLabelVisible',
+    ['changeHandler', 'disabled', 'fullWidth', 'helperText', 'id', 'inFormLayout', 'inputSize', 'isLabelVisible',
       'label', 'layout', 'placeholder', 'required', 'size', 'type', 'validationState', 'value', 'variant'],
   );
 
@@ -71,6 +76,7 @@ export const TextField = (props) => {
       className={(`
         ${styles.root}
         ${rootFullWidthClass}
+        ${rootInFormLayoutClass}
         ${rootLayoutClass}
         ${rootRequiredClass}
         ${rootSizeClass}
@@ -126,6 +132,7 @@ TextField.defaultProps = {
   forwardedRef: undefined,
   fullWidth: false,
   helperText: null,
+  inFormLayout: false,
   inputSize: null,
   isLabelVisible: true,
   layout: 'vertical',
@@ -145,6 +152,7 @@ TextField.propTypes = {
   fullWidth: PropTypes.bool,
   helperText: PropTypes.string,
   id: PropTypes.string.isRequired,
+  inFormLayout: PropTypes.bool,
   inputSize: PropTypes.number,
   isLabelVisible: PropTypes.bool,
   label: PropTypes.string.isRequired,
diff --git a/src/lib/components/ui/TextField/TextField.scss b/src/lib/components/ui/TextField/TextField.scss
index e1545609..328331cf 100644
--- a/src/lib/components/ui/TextField/TextField.scss
+++ b/src/lib/components/ui/TextField/TextField.scss
@@ -73,6 +73,10 @@
   @include form-field-vertical-neighbor();
 }
 
+.isRootInFormLayout {
+  @include form-field-in-form-layout();
+}
+
 .hasRootSmallInput {
   @include form-field-layout-with-small-input();
 }
diff --git a/src/lib/components/ui/TextField/__tests__/TextField.test.jsx b/src/lib/components/ui/TextField/__tests__/TextField.test.jsx
index 4202e7d9..c41d60c2 100644
--- a/src/lib/components/ui/TextField/__tests__/TextField.test.jsx
+++ b/src/lib/components/ui/TextField/__tests__/TextField.test.jsx
@@ -28,6 +28,7 @@ describe('rendering', () => {
     const tree = shallow(<TextField
       id="test"
       helperText="some help"
+      inFormLayout
       isLabelVisible={false}
       label="label"
       layout="horizontal"
diff --git a/src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap b/src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap
index 71832de0..3285d14d 100644
--- a/src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap
+++ b/src/lib/components/ui/TextField/__tests__/__snapshots__/TextField.test.jsx.snap
@@ -4,6 +4,7 @@ exports[`rendering renders correctly mandatory props only 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
@@ -40,6 +41,7 @@ exports[`rendering renders correctly with all props 1`] = `
 <label
   className="root
         isRootFullWidth
+        isRootInFormLayout
         rootLayoutHorizontal
         isRootRequired
         rootSizeLarge
@@ -87,6 +89,7 @@ exports[`rendering renders correctly with hidden label 1`] = `
 <label
   className="root
         
+        
         rootLayoutVertical
         
         rootSizeMedium
diff --git a/src/lib/components/ui/Toggle/Toggle.jsx b/src/lib/components/ui/Toggle/Toggle.jsx
index 82e33672..097e552a 100644
--- a/src/lib/components/ui/Toggle/Toggle.jsx
+++ b/src/lib/components/ui/Toggle/Toggle.jsx
@@ -7,6 +7,8 @@ import styles from './Toggle.scss';
 export const Toggle = (props) => {
   let labelVisibilityClass = '';
   let labelPositionClass = '';
+  let rootInFormLayoutClass = '';
+  let rootLayoutClass = '';
   let rootValidationStateClass = '';
 
   if (!props.isLabelVisible) {
@@ -19,6 +21,14 @@ export const Toggle = (props) => {
     labelPositionClass = styles.labelPositionAfter;
   }
 
+  if (props.inFormLayout) {
+    rootInFormLayoutClass = styles.isRootInFormLayout;
+  }
+
+  if (props.layout === 'horizontal') {
+    rootLayoutClass = styles.isRootLayoutHorizontal;
+  }
+
   if (props.validationState === 'invalid') {
     rootValidationStateClass = styles.isRootStateInvalid;
   } else if (props.validationState === 'valid') {
@@ -29,8 +39,8 @@ export const Toggle = (props) => {
 
   const propsToTransfer = transferProps(
     props,
-    ['changeHandler', 'checked', 'description', 'disabled', 'error', 'id', 'isLabelVisible',
-      'label', 'labelPosition', 'required', 'validationState', 'value'],
+    ['changeHandler', 'checked', 'description', 'disabled', 'error', 'id', 'inFormLayout', 'isLabelVisible',
+      'label', 'labelPosition', 'layout', 'required', 'validationState', 'value'],
   );
 
   return (
@@ -38,6 +48,8 @@ export const Toggle = (props) => {
       className={(`
         ${styles.root}
         ${labelPositionClass}
+        ${rootInFormLayoutClass}
+        ${rootLayoutClass}
         ${rootValidationStateClass}
       `).trim()}
     >
@@ -99,8 +111,10 @@ Toggle.defaultProps = {
   disabled: false,
   error: null,
   forwardedRef: undefined,
+  inFormLayout: false,
   isLabelVisible: true,
   labelPosition: 'after',
+  layout: 'vertical',
   required: false,
   validationState: null,
   value: undefined,
@@ -114,9 +128,11 @@ Toggle.propTypes = {
   error: PropTypes.string,
   forwardedRef: PropTypes.func,
   id: PropTypes.string.isRequired,
+  inFormLayout: PropTypes.bool,
   isLabelVisible: PropTypes.bool,
   label: PropTypes.string.isRequired,
   labelPosition: PropTypes.oneOf(['before', 'after']),
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
   required: PropTypes.bool,
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   value: PropTypes.oneOfType([
diff --git a/src/lib/components/ui/Toggle/Toggle.scss b/src/lib/components/ui/Toggle/Toggle.scss
index 9e1dca47..6e9b8ec0 100644
--- a/src/lib/components/ui/Toggle/Toggle.scss
+++ b/src/lib/components/ui/Toggle/Toggle.scss
@@ -260,3 +260,11 @@
 .isRootStateWarning .input:checked + .label::after {
   background-image: icon-generate-checkmark($white);
 }
+
+.isRootLayoutHorizontal {
+  position: relative; // Just set something until the component is refactored (#20).
+}
+
+.isRootInFormLayout {
+  @include form-field-in-form-layout();
+}
diff --git a/src/lib/components/ui/Toggle/tests/Toggle.test.jsx b/src/lib/components/ui/Toggle/tests/Toggle.test.jsx
index b5053c00..ea6cbb82 100644
--- a/src/lib/components/ui/Toggle/tests/Toggle.test.jsx
+++ b/src/lib/components/ui/Toggle/tests/Toggle.test.jsx
@@ -19,6 +19,8 @@ describe('rendering', () => {
       label="label"
       disabled
       id="test"
+      inFormLayout
+      layout="horizontal"
       value="value"
       description="some help"
       error="some error"
diff --git a/src/lib/components/ui/Toggle/tests/__snapshots__/Toggle.test.jsx.snap b/src/lib/components/ui/Toggle/tests/__snapshots__/Toggle.test.jsx.snap
index e135c94c..f6f04130 100644
--- a/src/lib/components/ui/Toggle/tests/__snapshots__/Toggle.test.jsx.snap
+++ b/src/lib/components/ui/Toggle/tests/__snapshots__/Toggle.test.jsx.snap
@@ -41,6 +41,8 @@ exports[`rendering renders correctly with all props 1`] = `
 <div
   className="root
         labelPositionAfter
+        isRootInFormLayout
+        isRootLayoutHorizontal
         isRootStateWarning"
 >
   <label
diff --git a/src/lib/index.js b/src/lib/index.js
index 0e88e352..af9feb6d 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -5,6 +5,7 @@ export { CTA } from './components/layout/CTA';
 export { CTACenter } from './components/layout/CTA';
 export { CTAEnd } from './components/layout/CTA';
 export { CTAStart } from './components/layout/CTA';
+export { default as FormLayout } from './components/layout/FormLayout';
 export { List } from './components/layout/List';
 export { ListItem } from './components/layout/List';
 export { Media } from './components/layout/Media';
diff --git a/src/lib/styles/settings/_forms-theme.scss b/src/lib/styles/settings/_forms-theme.scss
index a0c5f4e1..9c4ed47a 100644
--- a/src/lib/styles/settings/_forms-theme.scss
+++ b/src/lib/styles/settings/_forms-theme.scss
@@ -78,3 +78,6 @@ $form-field-sizes: (
     font-size: var(--rui-form-field-large-font-size),
   ),
 );
+
+$form-layout-horizontal-label-width: var(--rui-form-layout-horizontal-label-width);
+$form-layout-horizontal-fallback-label-width: var(--rui-form-layout-horizontal-fallback-label-width);
diff --git a/src/lib/styles/settings/_layouts.scss b/src/lib/styles/settings/_layouts.scss
new file mode 100644
index 00000000..26328eb1
--- /dev/null
+++ b/src/lib/styles/settings/_layouts.scss
@@ -0,0 +1,3 @@
+@import '../tools/offset';
+
+$layout-common-bottom-offset: offset(4);
diff --git a/src/lib/styles/tools/_forms.deprecated.scss b/src/lib/styles/tools/_forms.deprecated.scss
index 3848b92a..fad9a517 100644
--- a/src/lib/styles/tools/_forms.deprecated.scss
+++ b/src/lib/styles/tools/_forms.deprecated.scss
@@ -1,7 +1,9 @@
 // ⚠️ Deprecated for new components.
 
 @import '../settings/borders';
+@import '../settings/forms';
 @import '../settings/forms.deprecated';
+@import '../tools/breakpoints';
 
 @mixin form-disabled-state() {
   opacity: 0.5;
@@ -99,3 +101,21 @@
   width: $width;
   height: $height;
 }
+
+@mixin form-field-in-form-layout() {
+  @include breakpoint-up($form-field-horizontal-breakpoint) {
+    &.isRootLayoutHorizontal {
+      display: grid;
+      grid: inherit;
+      grid-template-columns: $form-layout-horizontal-fallback-label-width 1fr;
+      grid-template-columns: subgrid;
+      grid-column: span 2;
+    }
+
+    &.isRootLayoutHorizontal .inputWrap,
+    &.isRootLayoutHorizontal .description,
+    &.isRootLayoutHorizontal .error {
+      grid-column-start: 2;
+    }
+  }
+}
diff --git a/src/lib/styles/tools/forms/_layouts.scss b/src/lib/styles/tools/forms/_layouts.scss
index e3be9698..a10ee08b 100644
--- a/src/lib/styles/tools/forms/_layouts.scss
+++ b/src/lib/styles/tools/forms/_layouts.scss
@@ -11,6 +11,14 @@
 //    with disabled wrapping of label.
 // 5. Full-width horizontal form fields prefer not wrapping the label unless necessary
 //    (`max-content`).
+// 6. Justify inputs to `start` in horizontal layouts to fix positioning issues with Select Fields.
+//    Reverted for full-width fields.
+// 7. When form field exists inside Form Layout, automatic margins are removed as the Form Layout
+//    takes care of proper spacing.
+// 8. Horizontal form layout defines the grid settings which are inherited and applied using
+//    `subgrid`. Form Layout automatically adjusts the width of labels to the longest label
+//    (`max-content`, can be configured). This is currently supported only in Firefox so a fallback
+//    is necessary.
 
 @import '../../settings/forms';
 @import '../../settings/forms-theme';
@@ -49,6 +57,7 @@
 
     .inputContainer {
       grid-area: input;
+      justify-self: start; // 6.
     }
 
     .helperText {
@@ -86,5 +95,38 @@
       display: grid;
       grid-template-columns: max-content 1fr; // 5.
     }
+
+    &.rootLayoutHorizontal .inputContainer {
+      justify-self: stretch; // 6.
+    }
+  }
+}
+
+@mixin form-field-in-form-layout() {
+  &:not(:last-child),
+  &.rootLayoutHorizontal:not(:last-child) {
+    margin-right: 0; // 7.
+    margin-bottom: 0; // 7.
+  }
+
+  @include breakpoint-up($form-field-horizontal-breakpoint) {
+    &.rootLayoutHorizontal,
+    &.rootLayoutHorizontal.hasRootSmallInput {
+      grid: inherit; // 8.
+      grid-template-columns: $form-layout-horizontal-fallback-label-width 1fr; // 8.
+      grid-template-columns: subgrid; // 8.
+      grid-column: span 2; // 8.
+    }
+
+    &.rootLayoutHorizontal .label,
+    &.rootLayoutHorizontal .inputContainer,
+    &.rootLayoutHorizontal .helperText {
+      grid-area: unset; // 8.
+    }
+
+    &.rootLayoutHorizontal .inputContainer,
+    &.rootLayoutHorizontal .helperText {
+      grid-column-start: 2; // 8.
+    }
   }
 }
diff --git a/src/lib/theme.scss b/src/lib/theme.scss
index a1fde899..8d55dc8f 100644
--- a/src/lib/theme.scss
+++ b/src/lib/theme.scss
@@ -525,6 +525,13 @@
   --rui-form-field-large-padding: 0.5rem var(--rui-offset-4);
   --rui-form-field-large-font-size: var(--rui-typography-size-1);
 
+  //
+  // Form Layout
+  // ===========
+
+  --rui-form-layout-horizontal-label-width: max-content;
+  --rui-form-layout-horizontal-fallback-label-width: 10em;
+
   //
   // Modal
   // =====
diff --git a/webpack.config.lib.js b/webpack.config.lib.js
index 424655b3..d85886c2 100644
--- a/webpack.config.lib.js
+++ b/webpack.config.lib.js
@@ -3,7 +3,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
 const VisualizerPlugin = require('webpack-visualizer-plugin');
 
 const MAX_DEVELOPMENT_OUTPUT_SIZE = 1250000;
-const MAX_PRODUCTION_OUTPUT_SIZE = 175000;
+const MAX_PRODUCTION_OUTPUT_SIZE = 180000;
 
 module.exports = (env, argv) => ({
   devtool: argv.mode === 'production'