diff --git a/.changeset/grumpy-pianos-dress.md b/.changeset/grumpy-pianos-dress.md
new file mode 100644
index 0000000000..4b669f5bed
--- /dev/null
+++ b/.changeset/grumpy-pianos-dress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated `form-control` and `form-select` sizes and added support for floating label small size variant.
diff --git a/packages/documentation/src/stories/components/forms/input/input.docs.mdx b/packages/documentation/src/stories/components/forms/input/input.docs.mdx
index af9ad338ec..7d0d221de8 100644
--- a/packages/documentation/src/stories/components/forms/input/input.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/input/input.docs.mdx
@@ -48,11 +48,7 @@ The size can be changed by simply adding one of four classes:
 - Large: `.form-control-lg`
 
 <div className="alert alert-info">
-  <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
-  <div className="mt-0">
-    It is not intended to apply the size classes to `input` elements that are nested in a
-    `.form-floating` container.
-  </div>
+  Regular and medium size classes are not available on floating-label elements
 </div>
 
 <Canvas of={InputStories.Size} />
diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
index 74a94cc21c..d7d17ef37a 100644
--- a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
@@ -20,6 +20,10 @@ function renderInputSnapshot(_args: Args, context: StoryContext) {
       label: `Label - with Value`,
       value: 'Lorem Ipsum',
     },
+    {
+      label: `Label - Floating label`,
+      floatingLabel: true,
+    },
   ];
   return html`
     <div class="d-flex flex-wrap align-items-start gap-regular">
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index 9968e53c22..b750710b8d 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -20,7 +20,8 @@ const meta: Meta = {
     hiddenLabel: false,
     placeholder: 'Placeholder',
     type: 'text',
-    size: 'null',
+    size: 'form-control-lg',
+    sizeFloatingLabel: 'form-control-lg',
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
     validation: 'null',
@@ -121,6 +122,25 @@ const meta: Meta = {
         category: 'General',
       },
     },
+    sizeFloatingLabel: {
+      name: 'Size',
+      description: "Sets the size of the component's appearance.",
+      if: {
+        arg: 'floatingLabel',
+        truthy: true,
+      },
+      control: {
+        type: 'select',
+        labels: {
+          'form-control-sm': 'Small',
+          'form-control-lg': 'Large',
+        },
+      },
+      options: ['form-control-sm', 'form-control-lg'],
+      table: {
+        category: 'General',
+      },
+    },
     hint: {
       name: 'Helper Text',
       description: 'Text to place in the help text area of the component.',
@@ -171,6 +191,7 @@ function render(args: Args, context: StoryContext) {
     'form-control',
     args.type === 'color' && 'form-control-color',
     args.size,
+    args.sizeFloatingLabel,
     args.validation,
   ]
     .filter(c => c && c !== 'null')
diff --git a/packages/documentation/src/stories/components/forms/select/select.docs.mdx b/packages/documentation/src/stories/components/forms/select/select.docs.mdx
index da4a05428f..0c2d063261 100644
--- a/packages/documentation/src/stories/components/forms/select/select.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/select/select.docs.mdx
@@ -53,7 +53,7 @@ The size can be adjusted, by simply adding one of the following four classes:
 - Large: `.form-select-lg`
 
 <div className="alert alert-info alert-md">
-  Do not use this classes on `select` elements wrapped within a `.form-floating` container.
+  Regular and medium size classes are not available on floating-label elements
 </div>
 
 <Canvas of={SelectStories.Size} />
diff --git a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
index c79332a0ee..ed877711f8 100644
--- a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
@@ -32,15 +32,14 @@ export const Select: Story = {
       }),
       ...bombArgs({
         size: context.argTypes.size.options,
-        success: [false, true],
-        validation: context.argTypes.validation.options.filter((option: string) => option !== 'is-invalid'),
+        validation: context.argTypes.validation.options.filter(
+          (option: string) => option !== 'is-invalid',
+        ),
       }),
     ]
       // remove disabled & validated examples
       .filter((args: Args) => !(args.disabled && args.validation !== 'null'));
 
-    console.log('bombArg', bombArgsGeneratedDefault);
-
     //Arguments for Multiple Version
     const bombArgsGeneratedMultiple = [
       ...bombArgs({
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index fa6249d803..16ee308f2d 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -21,6 +21,7 @@ const meta: Meta = {
     hiddenLabel: false,
     value: undefined,
     size: 'form-select-lg',
+    sizeFloatingLabel: 'form-select-lg',
     options: 5,
     multiple: false,
     multipleSize: 4,
@@ -77,6 +78,10 @@ const meta: Meta = {
     size: {
       name: 'Size',
       description: "Sets the size of the component's appearance.",
+      if: {
+        arg: 'floatingLabel',
+        truthy: false,
+      },
       control: {
         type: 'select',
         labels: {
@@ -91,6 +96,25 @@ const meta: Meta = {
         category: 'General',
       },
     },
+    sizeFloatingLabel: {
+      name: 'Size',
+      description: "Sets the size of the component's appearance.",
+      if: {
+        arg: 'floatingLabel',
+        truthy: true,
+      },
+      control: {
+        type: 'select',
+        labels: {
+          'form-select-sm': 'Small',
+          'form-select-lg': 'Large',
+        },
+      },
+      options: ['form-select-sm', 'form-select-lg'],
+      table: {
+        category: 'General',
+      },
+    },
     options: {
       name: 'Options',
       description: 'Amount of `option` elements to render in the component.',
@@ -185,6 +209,7 @@ const Template: Story = {
     const classes = [
       'form-select',
       args.size,
+      args.sizeFloatingLabel,
       args.validation,
       args.floatingLabelPlaceholder && !args.value ? 'form-select-empty' : null,
     ]
diff --git a/packages/documentation/src/utils/inputComponentsGetCombinations.ts b/packages/documentation/src/utils/inputComponentsGetCombinations.ts
index 0086a91b2e..c8d8a8b9e6 100644
--- a/packages/documentation/src/utils/inputComponentsGetCombinations.ts
+++ b/packages/documentation/src/utils/inputComponentsGetCombinations.ts
@@ -24,19 +24,10 @@ export const COMBINATIONS = [
     label: `${SHORT_LABEL} - Disabled`,
     disabled: true,
   },
-  {
-    label: `${SHORT_LABEL} - Success`,
-    success: true,
-  },
   {
     label: `${SHORT_LABEL} - Valid`,
     validation: 'is-valid',
   },
-  {
-    label: `${SHORT_LABEL} - Valid with success`,
-    validation: 'is-valid',
-    success: true,
-  },
   {
     label: `${SHORT_LABEL} - Invalid`,
     validation: 'is-invalid',
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index e9744ec806..c0ea34fc5b 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -4,6 +4,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
+@use './../themes/bootstrap/core' as b;
 @use './../themes/bootstrap/forms/floating-labels' as bffl;
 @use './../themes/bootstrap/forms/form-control' as bffc;
 @use './../mixins/forms' as forms-mx;
@@ -52,6 +53,7 @@
       padding-bottom: forms.$form-floating-input-padding-b;
 
       ~ label {
+        color: forms.$form-floating-label-color;
         padding-top: 0.7rem;
         max-width: calc(
           (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
@@ -68,6 +70,39 @@
         padding-top: forms.$form-floating-input-padding-t * 1.33;
       }
     }
+
+    &[type='week'],
+    &[type='month'],
+    &[type='date'],
+    &[type='time'] {
+      background-position: right b.$input-height-inner-quarter bottom 0.5rem;
+    }
+
+    &.form-control-sm {
+      &[type='date']::-webkit-calendar-picker-indicator {
+        margin-top: -(spacing.$size-small-regular);
+      }
+      font-size: forms.$form-floating-label-font-size-placeholder-sm;
+      height: forms.$form-floating-label-height-sm;
+      min-height: forms.$form-floating-label-height-sm;
+      padding-inline: forms.$form-floating-padding-x-sm;
+
+      ~ label {
+        font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        padding-top: forms.$form-floating-label-padding-t-sm;
+        padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
+      }
+
+      &:focus,
+      &:not(:placeholder-shown) {
+        padding-top: forms.$form-floating-padding-y-sm * 2;
+
+        ~ label {
+          padding-top: forms.$form-floating-padding-y-sm;
+          font-size: forms.$form-floating-label-font-size-sm;
+        }
+      }
+    }
   }
 
   > .form-select {
@@ -107,8 +142,31 @@
       }
     }
 
+    &.form-select-sm {
+      padding-inline: forms.$form-floating-padding-x-sm;
+      padding-top: forms.$form-floating-padding-y-sm * 2;
+      font-size: forms.$form-floating-label-font-size-placeholder-sm;
+      height: forms.$form-floating-label-height-sm;
+      min-height: forms.$form-floating-label-height-sm;
+
+      ~ label {
+        padding-top: forms.$form-floating-padding-y-sm;
+        font-size: forms.$form-floating-label-font-size-sm;
+        padding-inline: forms.$form-floating-padding-x-sm;
+      }
+
+      // TODO: replace with :has
+      &:empty,
+      &.form-select-empty {
+        ~ label {
+          padding-top: forms.$form-floating-label-padding-t-sm;
+          font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        }
+      }
+    }
+
     &[multiple] {
-      padding-top: forms.$form-floating-input-padding-t * 1.5;
+      padding-top: spacing.$size-big;
       padding-bottom: 0;
       height: auto;
 
@@ -121,7 +179,21 @@
             2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale}
         );
         height: auto;
-        background: forms.$input-bg;
+        left: forms.$input-border-width * 3;
+      }
+
+      &.form-select-sm {
+        padding-top: forms.$form-floating-input-padding-t;
+
+        ~ label {
+          left: forms.$input-border-width * 2;
+        }
+      }
+
+      &:not(:disabled) {
+        ~ label {
+          background: forms.$input-bg;
+        }
       }
 
       &:empty {
@@ -135,33 +207,10 @@
         }
       }
     }
-
-    &.form-select-sm {
-      padding-inline: forms.$form-floating-padding-x-sm;
-      padding-top: forms.$form-floating-padding-y-sm * 2;
-      font-size: forms.$form-floating-label-font-size-placeholder-sm;
-      height: forms.$form-floating-label-height-sm;
-      min-height: forms.$form-floating-label-height-sm;
-
-      ~ label {
-        padding-top: forms.$form-floating-padding-y-sm;
-        font-size: forms.$form-floating-label-font-size-sm;
-        padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
-      }
-
-      // TODO: replace with :has
-      &:empty,
-      &.form-select-empty {
-        ~ label {
-          padding-top: forms.$form-floating-label-padding-t-sm;
-          font-size: forms.$form-floating-label-font-size-placeholder-sm;
-        }
-      }
-    }
   }
 
   > textarea.form-control {
-    padding-top: forms.$input-padding-y-lg * 1.5;
+    padding-top: forms.$input-padding-y-lg * 2;
     padding-bottom: forms.$input-padding-y-lg;
     height: auto;
 
@@ -174,7 +223,7 @@
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: forms.$input-padding-y-lg * 1.5;
+      padding-top: forms.$input-padding-y-lg * 2;
       padding-bottom: forms.$input-padding-y-lg;
 
       ~ label {
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index b47e6a93aa..26235abfee 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -9,18 +9,6 @@
 @use './../variables/components/forms';
 @use './../variables/components/form-select' as form-select;
 
-.form-select-rg {
-  @include forms-mixins.form-control-rg;
-}
-
-.form-select-lg {
-  background-size: form-select.$form-select-bg-size;
-}
-
-.form-select-sm {
-  background-size: form-select.$form-select-bg-size-sm;
-}
-
 .form-select {
   &:not(:disabled) {
     &:hover {
@@ -28,32 +16,51 @@
     }
   }
 
-  &.is-valid,
-  &.is-invalid {
-    background-position:
-      right b.$form-select-padding-x * 2.5 center,
-      b.$form-select-bg-position;
+  &:not([multiple]) {
+    &:disabled {
+      background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
 
-    &.form-select-lg {
+    &.is-valid,
+    &.is-invalid {
       background-position:
-        right b.$form-select-padding-x * 3 center,
+        right b.$form-select-padding-x * 2.5 center,
         b.$form-select-bg-position;
+
+      &.form-select-lg {
+        background-position:
+          right b.$form-select-padding-x * 3 center,
+          b.$form-select-bg-position;
+      }
     }
-  }
 
-  &:disabled {
-    background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
-  }
+    &.is-valid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-success),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
 
-  &.is-valid {
-    background-image: b.escape-svg(form-select.$form-select-indicator-success),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    &.is-invalid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-error),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
   }
 
-  &.is-invalid {
-    background-image: b.escape-svg(form-select.$form-select-indicator-error),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+  &[multiple] {
+    &.is-valid,
+    &.is-invalid {
+      background-position: right b.$form-select-padding-x * 1.5 center;
+    }
+
+    &.is-valid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-success),
+        var(--bs-form-select-bg-icon, none);
+    }
+
+    &.is-invalid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-error),
+        var(--bs-form-select-bg-icon, none);
+    }
   }
 
   @include utilities.high-contrast-mode() {
@@ -72,3 +79,18 @@
     }
   }
 }
+
+.form-select-rg {
+  @include forms-mixins.form-rg;
+  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
+
+.form-select-sm {
+  @include forms-mixins.form-sm;
+  background-size: forms.$form-bg-size-sm; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
+
+.form-select-lg {
+  @include forms-mixins.form-lg;
+  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index 0ca285db48..010fb06350 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -61,6 +61,14 @@
       background-repeat: no-repeat;
       background-position: right b.$input-height-inner-quarter center;
       background-size: form-validation.$form-feedback-icon-size;
+
+      &.form-control-sm {
+        background-size: forms.$form-bg-size-sm;
+      }
+
+      &.form-control-lg {
+        background-size: forms.$form-bg-size;
+      }
     }
   }
 
@@ -93,30 +101,43 @@
 
 .form-control,
 .form-select {
-  @include form-validation-mx.form-validation-state-selector(invalid) {
+  &.is-invalid {
     border-color: form-validation.$form-feedback-invalid-color;
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
 
-    &.is-valid {
-      padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
-      border-color: var(--post-success-green);
-      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
-      background-repeat: no-repeat;
-      background-position: right b.$input-height-inner-quarter center;
+    &:focus {
+      border-color: form-validation.$form-feedback-invalid-color;
+      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+    }
+  }
 
-      &.form-control-sm {
-        padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
-        background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap)
-      }
+  &.is-valid {
+    border-color: var(--post-success-green);
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
 
-      &.form-control-lg {
-        padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
-        background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap)
-      }
+    &:focus {
+      border-color: form-validation.$form-feedback-valid-color;
+      box-shadow: form-validation.$form-feedback-valid-box-shadow;
     }
+  }
 
-    &:focus {
-      border-color: form-validation.$form-feedback-invalid-color;
-      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+  &.is-invalid,
+  &.is-valid {
+    padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
+    background-repeat: no-repeat;
+    background-size: forms.$form-bg-size; // Duplicated rule in form-select for arrow size.
+    background-position: right b.$input-height-inner-quarter center;
+
+    &.form-select-sm,
+    &.form-control-sm {
+      padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
+      background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
+    }
+
+    &.form-select-lg,
+    &.form-control-lg {
+      padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
+      background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
     }
   }
 }
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index 1e4528a07f..9e3feb498f 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -13,7 +13,15 @@
 @use './../themes/bootstrap/forms/input-group' as bfig;
 
 .form-control-rg {
-  @include form-mixins.form-control-rg;
+  @include form-mixins.form-rg;
+}
+
+.form-control-sm {
+  @include form-mixins.form-sm;
+}
+
+.form-control-lg {
+  @include form-mixins.form-lg;
 }
 
 select.form-control-rg:not([size]):not([multiple]) {
@@ -35,11 +43,6 @@ select.form-control-rg:not([size]):not([multiple]) {
   &[type='file'] {
     position: relative;
 
-    min-height: calc(
-      (1rem * forms.$input-line-height) + (forms.$input-padding-y * 2) +
-        (forms.$input-border-width * 2)
-    );
-
     &::file-selector-button {
       display: block;
       position: absolute;
@@ -108,11 +111,6 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &.form-control-sm {
-      min-height: calc(
-        (1rem * forms.$input-line-height-sm) + (forms.$input-padding-y-sm * 2) +
-          (forms.$input-border-width * 2)
-      );
-
       &::after {
         padding-inline: forms.$input-padding-y-sm;
       }
@@ -130,11 +128,6 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &.form-control-lg {
-      min-height: calc(
-        (1rem * forms.$input-line-height-lg) + (forms.$input-padding-y-lg * 2) +
-          (forms.$input-border-width * 2)
-      );
-
       &::after {
         padding-inline: forms.$input-padding-y-lg;
       }
diff --git a/packages/styles/src/components/timepicker.scss b/packages/styles/src/components/timepicker.scss
index 153e8a9fcd..7ab75098f3 100644
--- a/packages/styles/src/components/timepicker.scss
+++ b/packages/styles/src/components/timepicker.scss
@@ -76,7 +76,7 @@
   }
 
   .form-control {
-    @include form-mixins.form-control-rg;
+    @include form-mixins.form-rg;
   }
 }
 
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 5f03d973f6..48445dfba5 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -27,12 +27,26 @@
   background-position: calc(100% - #{form-validation.$form-feedback-icon-offset}) center;
 }
 
-@mixin form-control-rg {
+@mixin form-rg {
   padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
   font-size: type.$font-size-regular;
   line-height: forms.$input-line-height-rg;
 }
 
+@mixin form-sm {
+  font-size: type.$font-size-14;
+  line-height: forms.$input-line-height-sm;
+  min-height: forms.$input-height-sm;
+  padding-block: forms.$input-padding-y-sm;
+  padding-inline: forms.$input-padding-x-sm;
+}
+
+@mixin form-lg {
+  font-size: type.$font-size-16;
+  line-height: forms.$input-line-height-lg;
+  min-height: forms.$input-height-lg;
+}
+
 @mixin focus-outline {
   outline: none;
   outline-offset: forms.$input-focus-outline-thickness;
diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
index c7dd2c2015..81f3a265dd 100644
--- a/packages/styles/src/variables/_type.scss
+++ b/packages/styles/src/variables/_type.scss
@@ -41,6 +41,7 @@ $font-size-40: sizing.px-to-rem(40px);
 $font-size-48: sizing.px-to-rem(48px);
 $font-size-56: sizing.px-to-rem(56px);
 
+$line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 
diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
index 4770c034ef..85c8f7d824 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -19,7 +19,7 @@ $input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !d
 $input-btn-line-height: type.$line-height-copy !default;
 
 $input-btn-padding-y-sm: spacing.$size-mini - $input-btn-border-width-rem !default;
-$input-btn-padding-x-sm: spacing.$size-regular - $input-btn-border-width-rem !default;
+$input-btn-padding-x-sm: spacing.$size-small-regular !default;
 $input-btn-line-height-sm: type.$line-height-copy !default;
 
 $input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default;
diff --git a/packages/styles/src/variables/components/_form-select.scss b/packages/styles/src/variables/components/_form-select.scss
index c800e62c32..48fa0fd668 100644
--- a/packages/styles/src/variables/components/_form-select.scss
+++ b/packages/styles/src/variables/components/_form-select.scss
@@ -7,8 +7,6 @@ $form-select-disabled-color: forms.$input-disabled-color;
 $form-select-disabled-bg: forms.$input-disabled-bg;
 $form-select-disabled-border-color: forms.$input-disabled-border-color;
 $form-select-indicator-color: color.$black;
-$form-select-bg-size: 32px 32px !default;
-$form-select-bg-size-sm: 24px 24px !default;
 $_form-select-indicator-icon: icons.get-colored-svg-url('2113', $form-select-indicator-color);
 $form-select-indicator: url($_form-select-indicator-icon) !default;
 $form-select-indicator-disabled: url(icons.get-colored-svg-url(
diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
index 33084fb24a..2f66876809 100644
--- a/packages/styles/src/variables/components/_form-validation.scss
+++ b/packages/styles/src/variables/components/_form-validation.scss
@@ -25,5 +25,7 @@ $form-feedback-custom-color: color.$success !default;
 $form-feedback-custom-bg: color.$success !default;
 $form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
   rgba($form-feedback-invalid-color, 0.25) !default;
+$form-feedback-valid-box-shadow: 0 0 0 forms.$input-focus-width
+rgba($form-feedback-valid-color, 0.25) !default;
 $form-feedback-custom-text: color.$white !default;
 $form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !default;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 20e502a781..2610e272af 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -24,13 +24,13 @@ $input-line-height: type.$line-height-copy !default;
 
 $input-padding-y-sm: button.$input-btn-padding-y-sm !default;
 $input-padding-x-sm: button.$input-btn-padding-x-sm !default;
-$input-line-height-sm: type.$line-height-copy !default;
+$input-line-height-sm: type.$line-height-sm !default;
 
 $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: spacing.$size-small-large !default;
+$input-padding-y-lg: sizing.px-to-rem(11) !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
@@ -63,26 +63,25 @@ $input-height-border: $input-border-width * 2 !default;
 
 $input-height-content: type.$font-size-base * $input-line-height !default;
 $input-height-inner: $input-height-content + ($input-padding-y * 2) !default;
-$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+$input-height: $input-height-inner + sizing.px-to-rem($input-height-border) !default;
 
-$input-height-content-sm: type.$font-size-tiny * $input-line-height-sm !default;
-$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) !default;
-$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+$input-height-content-sm: type.$font-size-14 * 1 !default;
+$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) + sizing.px-to-rem(2) !default; // + 2px approximation from Figma mockup
+$input-height-sm: $input-height-inner-sm + sizing.px-to-rem($input-height-border) !default;
 
-$form-floating-input-height-content-sm: type.$font-size-12 * $input-line-height-sm * 2 !default;
+$form-floating-input-height-content-sm: type.$font-size-14 * 1 !default;
 $form-floating-input-height-inner-sm: $form-floating-input-height-content-sm +
-  ($input-padding-y-sm * 2) !default;
-$form-floating-input-height-sm: calc(
-  #{$form-floating-input-height-inner-sm} + #{$input-height-border}
-) !default;
+  (spacing.$size-regular * 2) - sizing.px-to-rem(2) !default; // - 2px approximation from Figma mockup
+$form-floating-input-height-sm: $form-floating-input-height-inner-sm +
+  sizing.px-to-rem($input-height-border) !default;
 
 $input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default;
 $input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default;
 $input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default;
 
-$input-height-content-lg: type.$font-size-medium * $input-line-height-lg !default;
-$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
-$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height-content-lg: (type.$font-size-16 * $input-line-height-lg) - sizing.px-to-rem(2) !default; // - 2px and remove approximation in Figma
+$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default;
+$input-height-lg: $input-height-inner-lg + sizing.px-to-rem($input-height-border) !default;
 
 $input-transition:
   border-color 0.15s ease-in-out,
@@ -119,14 +118,14 @@ $form-range-input-height-ie: 6rem !default;
 
 $form-file-button-hover-bg: $input-bg;
 
-$form-floating-height: $input-height-lg;
+$form-floating-height: $input-height-lg * $input-line-height-lg;
 $form-floating-padding-x: $input-padding-x-lg;
 $form-floating-padding-y: $input-padding-y-lg;
 $form-floating-line-height: type.$line-height-copy;
 $form-floating-input-padding-t: spacing.$size-large;
 $form-floating-input-padding-b: 0;
 $form-floating-label-opacity: 1;
-$form-floating-label-height: $input-height-inner-lg;
+$form-floating-label-height: $form-floating-height;
 $form-floating-label-color: $input-placeholder-color;
 $form-floating-label-font-size: type.$font-size-bigger-regular;
 $form-floating-label-font-size-small: type.$font-size-tiny;
@@ -135,10 +134,8 @@ $form-floating-label-scale: math.div(
   $form-floating-label-font-size
 );
 $form-floating-label-upscale: math.div(1, $form-floating-label-scale);
-$form-floating-label-padding-t: calc(
-  #{$input-border-width} + #{$form-floating-label-height * 0.5} - #{$form-floating-label-font-size *
-    type.$line-height-copy * 0.5}
-);
+$form-floating-label-padding-t: $form-floating-label-height * 0.5 - $form-floating-label-font-size *
+  type.$line-height-copy * 0.5;
 $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
 $form-floating-label-transform: scale($form-floating-label-scale);
 $form-floating-transition: animation.$transition-base;
@@ -151,10 +148,9 @@ $form-floating-transition-out:
 $form-floating-select-bg-size: 32px 32px;
 
 $form-floating-label-font-size-sm: type.$font-size-12;
-$form-floating-label-font-size-placeholder-sm: type.$font-size-14; // TODO: replace with input font-size after adjustment
-$form-floating-padding-x-sm: $input-padding-x-sm;
+$form-floating-label-font-size-placeholder-sm: type.$font-size-14;
+$form-floating-padding-x-sm: spacing.$size-regular;
 $form-floating-padding-y-sm: $input-padding-y-sm;
-$form-floating-label-height-sm: $form-floating-input-height-inner-sm;
-$form-floating-label-padding-t-sm: calc(
-  #{$input-border-width} + #{$form-floating-label-height-sm * 0.5} - #{$form-floating-label-font-size-sm}
-);
+$form-floating-label-height-sm: $form-floating-input-height-sm;
+$form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 -
+  $form-floating-label-font-size-sm;
diff --git a/packages/styles/tests/mixins/forms.test.scss b/packages/styles/tests/mixins/forms.test.scss
index 8084002667..90d53b5ae7 100644
--- a/packages/styles/tests/mixins/forms.test.scss
+++ b/packages/styles/tests/mixins/forms.test.scss
@@ -6,6 +6,6 @@ body {
   }
 
   @include forms.icon-placement();
-  @include forms.form-control-rg();
+  @include forms.form-rg();
   @include forms.focus-outline();
 }
diff --git a/packages/styles/tests/mixins/index.test.scss b/packages/styles/tests/mixins/index.test.scss
index 10dd6f6184..9a00dbb4a3 100644
--- a/packages/styles/tests/mixins/index.test.scss
+++ b/packages/styles/tests/mixins/index.test.scss
@@ -8,7 +8,7 @@ body {
     color: red;
   }
   @include mixins.icon-placement();
-  @include mixins.form-control-rg();
+  @include mixins.form-rg();
   @include mixins.focus-outline();
 
   @include mixins.bezel-small();