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 c6f6eff844..179360edc8 100644
--- a/packages/documentation/src/stories/components/forms/input/input.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/input/input.docs.mdx
@@ -13,7 +13,7 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 </div>
 
 <div className="lead">
-  Customize the native `<input>` with CSS that changes the element’s initial appearance.
+  Customize the native `input` with CSS that changes the element’s initial appearance.
 </div>
 
 Custom input elements need only the class `.form-control` to trigger the custom styles.
@@ -25,43 +25,18 @@ Custom input elements need only the class `.form-control` to trigger the custom
 
 <StylesPackageImport components={["forms"]} required={{ 'floating-label': true, 'form-feedback': true }} />
 
-## Concrete Examples of Application
+## Examples
 
-The following examples show the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
+### Standard Label Positioning
 
-### Floating Label
+If you prefer to use standard label positioning instead of floating labels, there is no need to wrap the `input` and `label` elements in a `.form-floating` container.
+This will keep the label in its standard position above the input field.
 
-Wrap a pair of `<input>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
-But note that the `<input>` element must come first, so we can ensure the correct styles.
-
-Ensure that `placeholder` attribute is set (even with an empty value) so the label can act as a placeholder when no value is set.
-
-    <Canvas of={InputStories.FloatingLabel} />
-
-### Sizing
-
-<div className="alert alert-warning">
-  <h4 className="alert-heading">We're deprecating the regular and medium sizes for text input, textarea and select.</h4>
-  <p className="mt-0">This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.<br />
-    `.form-control-rg` and `.form-control-md` are deprecated and will be removed in the next major version.</p>
-</div>
-
-The size can be changed by simply adding one of four classes:
-
-- Small: `.form-control-sm`
-- Regular: `.form-control-rg`
-- Medium: default or `.form-control-md`
-- Large: `.form-control-lg`
-
-<div className="alert alert-info">
-  Regular and medium size classes are not available on floating-label elements
-</div>
-
-<Canvas of={InputStories.Size} />
+<Canvas of={InputStories.StandardLabel} />
 
 ### Validation
 
-Simply add the classes `.is-valid` or `.is-invalid` to the `<input>` element to show it in the expected state.<br/>
+Simply add the classes `.is-valid` or `.is-invalid` to the `input` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p class="valid-feedback">...</p>` or `<p class="invalid-feedback">...</p>` element after the `input` element to explain what went wrong. This enables the user to correct the mistake.
 
 <Canvas of={InputStories.Validation} />
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 612b4a2352..dfe827522b 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -1,6 +1,7 @@
 import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing, TemplateResult } from 'lit';
 import { MetaComponent } from '@root/types';
+import { classMap } from 'lit-html/directives/class-map.js';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -22,13 +23,11 @@ const meta: MetaComponent = {
   },
   args: {
     label: 'Label',
-    floatingLabel: false,
+    floatingLabel: true,
     hiddenLabel: false,
     placeholder: 'Placeholder',
     type: 'text',
-    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',
   },
@@ -102,46 +101,6 @@ const meta: MetaComponent = {
         category: 'General',
       },
     },
-    size: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      if: {
-        arg: 'floatingLabel',
-        truthy: false,
-      },
-      control: {
-        type: 'select',
-        labels: {
-          'form-control-sm': 'Small',
-          'form-control-rg': 'Regular (deprecated)',
-          'null': 'Middle (deprecated)',
-          'form-control-lg': 'Large',
-        },
-      },
-      options: ['form-control-sm', 'form-control-rg', 'null', 'form-control-lg'],
-      table: {
-        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.',
@@ -186,87 +145,81 @@ export default meta;
 
 type Story = StoryObj;
 
-function render(args: Args, context: StoryContext) {
-  const id = context.id ?? `ExampleTextarea_${context.name}`;
-  const classes = [
-    'form-control',
-    args.size,
-    args.floatingLabel ? args.sizeFloatingLabel : '',
-    args.validation,
-  ]
-    .filter(c => c && c !== 'null')
-    .join(' ');
+// RENDERERS
+function getFormLabel(id: string, args: Args, versionSuffix: string) {
+  return html` <label for="${id}" class="form-label${versionSuffix}">${args.label}</label> `;
+}
 
-  const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
-  const label: TemplateResult | null = !useAriaLabel
-    ? html` <label for="${id}" class="form-label">${args.label}</label> `
-    : null;
+function getFormControl(id: string, args: Args, versionSuffix: string) {
+  const validationClass = args.validation !== 'null' ? ` ${args.validation}${versionSuffix}` : '';
 
   if (args.floatingLabel && !args.placeholder) {
     args.placeholder = ' '; // a placeholder must always be defined for the floating label to work properly
   }
 
-  const contextual: (TemplateResult | null)[] = [
-    args.validation === 'is-valid' ? html` <p class="valid-feedback">Ggranda sukceso!</p> ` : null,
-    args.validation === 'is-invalid' ? html` <p class="invalid-feedback">Eraro okazis!</p> ` : null,
-    args.hint !== '' ? html` <div class="form-text">${args.hint}</div> ` : null,
-  ];
-
-  const control: TemplateResult = html`
+  return html`
     <input
+      ?aria-invalid="${VALIDATION_STATE_MAP[args.validation]}"
+      aria-label="${args.hiddenLabel ? args.label : nothing}"
+      class="form-control${versionSuffix}${validationClass}"
+      ?disabled="${args.disabled}"
       id="${id}"
-      class="${classes}"
-      type="${args.type}"
       placeholder="${args.placeholder || nothing}"
-      ?disabled="${args.disabled}"
-      aria-label="${useAriaLabel ? args.label : nothing}"
-      ?aria-invalid="${VALIDATION_STATE_MAP[args.validation]}"
+      type="${args.type}"
       value="${args.value ? args.value : nothing}"
     />
   `;
+}
+
+function getFormFloating(id: string, args: Args, messages: TemplateResult, versionSuffix: string) {
+  return html`
+    <div class="form-floating${versionSuffix}">
+      ${getFormControl(id, args, versionSuffix)} ${getFormLabel(id, args, versionSuffix)}
+      ${messages}
+    </div>
+  `;
+}
+
+function render(args: Args, context: StoryContext) {
+  const id = context.id ?? `ExampleTextarea_${context.name}`;
+  const versionSuffix = args.floatingLabel ? '-v2' : '';
+
+  const messages = html`
+    ${args.validation === 'is-valid'
+      ? html` <p class="valid-feedback${versionSuffix}">Ggranda sukceso!</p> `
+      : nothing}
+    ${args.validation === 'is-invalid'
+      ? html` <p class="invalid-feedback${versionSuffix}">Eraro okazis!</p> `
+      : nothing}
+    ${args.hint !== ''
+      ? html` <div class="form-text${versionSuffix}">${args.hint}</div> `
+      : nothing}
+  `;
+
   if (args.floatingLabel) {
-    return html`
-      <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
-    `;
-  } else {
-    return html`${[label, control, ...contextual].filter(el => el !== null)}`;
+    return getFormFloating(id, args, messages, versionSuffix);
   }
-}
 
-export const Default: Story = {};
+  return html`
+    ${args.hiddenLabel ? nothing : getFormLabel(id, args, versionSuffix)}
+    ${getFormControl(id, args, versionSuffix)} ${messages}
+  `;
+}
 
-export const FloatingLabel: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Hidden Label', 'Size', 'Helper Text', 'Disabled', 'Validation'],
-    },
-  },
+export const Default: Story = {
   args: {
-    floatingLabel: true,
-    hint: '',
+    hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
   },
 };
 
-export const Size: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Label', 'Floating Label', 'Hidden Label', 'Helper Text', 'Disabled', 'Validation'],
-    },
-  },
+export const StandardLabel: Story = {
   args: {
-    size: 'form-control-sm',
-    hint: '',
+    floatingLabel: false,
   },
 };
 
 export const Validation: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Label', 'Floating Label', 'Hidden Label', 'Size', 'Helper Text', 'Disabled'],
-    },
-  },
   args: {
     validation: 'is-invalid',
-    hint: '',
   },
 };
diff --git a/packages/documentation/types/storybook.ts b/packages/documentation/types/storybook.ts
index aace6d8015..4fe954081d 100644
--- a/packages/documentation/types/storybook.ts
+++ b/packages/documentation/types/storybook.ts
@@ -10,9 +10,9 @@ export interface MetaExtended<T = Args> extends Meta<T> {
 export type TagPackagePrefix<K> = K extends string ? `package:${K}` : K;
 
 export interface MetaComponent<T = Args> extends MetaExtended<T> {
-  tags: [TagPackagePrefix<PackageType>, ...string[]];
-  parameters: {
+  // tags: [TagPackagePrefix<PackageType>, ...string[]];
+  /* parameters: {
     [key: string]: unknown;
     design: DesignParameter;
-  };
+  }; */
 }
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index b146f756fe..4b412abbab 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -23,6 +23,7 @@
 @use 'dialog';
 @use 'form-check';
 @use 'forms';
+@use 'forms/index';
 @use 'grid';
 @use 'icon-button';
 @use 'icons';
diff --git a/packages/styles/src/components/forms/_assisitve-text.scss b/packages/styles/src/components/forms/_assisitve-text.scss
new file mode 100644
index 0000000000..0253e3ed3b
--- /dev/null
+++ b/packages/styles/src/components/forms/_assisitve-text.scss
@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use './../../mixins/typo' as typo-mx;
+@use './../../functions/tokens';
+@use './../../tokens/components';
+
+tokens.$default-map: components.$post-text-input;
+
+.form-text-v2,
+.valid-feedback-v2,
+.invalid-feedback-v2 {
+  @include typo-mx.use(label-small);
+  margin: 0;
+  padding-block: tokens.get-no-split('post-input-spacing-padding-block-text-assist');
+  padding-inline: tokens.get-no-split('post-input-spacing-padding-inline-text-assist');
+}
+
+.valid-feedback-v2 {
+  color: tokens.get-no-split('post-input-color-signal-success');
+
+  &:not(.is-valid-v2 ~ &) {
+    display: none;
+  }
+}
+
+.invalid-feedback-v2 {
+  color: tokens.get-no-split('post-input-color-signal-error');
+
+  &:not(.is-invalid-v2 ~ &) {
+    display: none;
+  }
+}
diff --git a/packages/styles/src/components/forms/_floating-label.scss b/packages/styles/src/components/forms/_floating-label.scss
new file mode 100644
index 0000000000..9611607610
--- /dev/null
+++ b/packages/styles/src/components/forms/_floating-label.scss
@@ -0,0 +1,53 @@
+@use './../../functions/calc';
+@use './../../mixins/typo' as typo-mx;
+@use './../../mixins/components/forms/input' as input-mx;
+@use './../../variables/components/forms/input';
+
+@use './../../functions/tokens';
+@use './../../tokens/components';
+
+tokens.$default-map: components.$post-text-input;
+
+.form-floating-v2 {
+  position: relative;
+
+  .form-label-v2 {
+    @include typo-mx.use(label-default);
+
+    position: absolute;
+    inset-inline: input.$input-border-width;
+    inset-block-start: input.$input-border-width;
+    padding-inline-start: tokens.get-no-split('post-input-spacing-padding-inline-text-start');
+    padding-block-start: calc.add(
+      tokens.get-no-split('post-input-spacing-padding-block-text1'),
+      tokens.get-no-split('post-input-spacing-padding-block-text5')
+    );
+
+    color: tokens.get-no-split('post-input-color-enabled-fg');
+  }
+
+  .form-control-v2 {
+    + .form-label-v2 {
+      @include input-mx.padding-inline-end();
+    }
+
+    &:is(:not(:placeholder-shown), :placeholder-shown:focus) {
+      + .form-label-v2 {
+        @include typo-mx.use(label-smaller);
+        padding-block-start: tokens.get-no-split('post-input-spacing-padding-block-text2');
+      }
+    }
+
+    &:hover {
+      + .form-label-v2 {
+        color: tokens.get-no-split('post-input-color-hover-fg');
+      }
+    }
+
+    &:disabled {
+      + .form-label-v2 {
+        color: tokens.get-no-split('post-input-color-disabled-fg');
+      }
+    }
+  }
+}
diff --git a/packages/styles/src/components/forms/_input.scss b/packages/styles/src/components/forms/_input.scss
new file mode 100644
index 0000000000..f08e44b09e
--- /dev/null
+++ b/packages/styles/src/components/forms/_input.scss
@@ -0,0 +1,64 @@
+@use './../../functions/calc';
+@use './../../functions/tokens';
+@use '../../functions/typo';
+@use './../../mixins/components/forms/input' as input-mx;
+@use './../../mixins/utilities' as utility-mx;
+@use './../../mixins/typo' as typo-mx;
+@use './../../tokens/components';
+@use './../../variables/components/forms/input';
+
+tokens.$default-map: components.$post-text-input;
+
+.form-control-v2 {
+  @include typo-mx.use(label-default);
+  @include input-mx.padding-inline-end;
+
+  width: 100%;
+  padding-inline-start: tokens.get-no-split('post-input-spacing-padding-inline-text-start');
+  padding-block-start: calc.add(
+    tokens.get-no-split('post-input-spacing-padding-block-text2'),
+    typo.get-height(label-smaller)
+  );
+  padding-block-end: tokens.get-no-split('post-input-spacing-padding-block-text2');
+
+  color: tokens.get-no-split('post-input-color-enabled-fg');
+  border: input.$input-border-width solid tokens.get-no-split('post-input-color-enabled-stroke');
+  border-radius: tokens.get-no-split('post-input-border-radius-surface');
+  background-color: tokens.get-no-split('post-input-color-enabled-bg');
+
+  &:placeholder-shown:not(:focus) {
+    &::placeholder {
+      color: transparent;
+    }
+  }
+
+  &:hover {
+    border-color: tokens.get-no-split('post-input-color-hover-stroke');
+    background-color: tokens.get-no-split('post-input-color-hover-bg');
+  }
+
+  &:disabled {
+    color: tokens.get-no-split('post-input-color-disabled-fg');
+    border-style: dashed;
+    border-color: tokens.get-no-split('post-input-color-disabled-stroke');
+    background-color: tokens.get-no-split('post-input-color-disabled-bg');
+  }
+
+  @include utility-mx.focus-style;
+
+  &.is-valid-v2,
+  &.is-invalid-v2 {
+    background-size: tokens.get-no-split('post-input-sizing-icon');
+    background-position: center right
+      tokens.get-no-split('post-input-spacing-padding-inline-text-end');
+    background-repeat: no-repeat;
+  }
+
+  &.is-valid-v2 {
+    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  &.is-invalid-v2 {
+    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+}
diff --git a/packages/styles/src/components/forms/index.scss b/packages/styles/src/components/forms/index.scss
new file mode 100644
index 0000000000..cbdd3de07a
--- /dev/null
+++ b/packages/styles/src/components/forms/index.scss
@@ -0,0 +1,3 @@
+@use 'assisitve-text';
+@use 'floating-label';
+@use 'input';
diff --git a/packages/styles/src/functions/_calc.scss b/packages/styles/src/functions/_calc.scss
new file mode 100644
index 0000000000..2c18d27552
--- /dev/null
+++ b/packages/styles/src/functions/_calc.scss
@@ -0,0 +1,11 @@
+@use 'sass:list';
+
+@function add($list...) {
+  $calc: list.nth($list, 1);
+
+  @for $i from 2 through list.length($list) {
+    $calc: '#{$calc} + #{list.nth($list, $i)}';
+  }
+
+  @return calc(#{$calc});
+}
diff --git a/packages/styles/src/functions/_index.scss b/packages/styles/src/functions/_index.scss
index ca82fee6ec..7097252cd9 100644
--- a/packages/styles/src/functions/_index.scss
+++ b/packages/styles/src/functions/_index.scss
@@ -1,7 +1,9 @@
-@forward 'tokens';
-@forward 'contrast';
+@forward 'calc';
 @forward 'color';
+@forward 'contrast';
 @forward 'list';
 @forward 'sizing';
 @forward 'icons';
 @forward 'utilities';
+@forward 'tokens';
+@forward 'typo';
diff --git a/packages/styles/src/functions/_tokens.scss b/packages/styles/src/functions/_tokens.scss
index b66fa11ef7..c81a04aa6e 100644
--- a/packages/styles/src/functions/_tokens.scss
+++ b/packages/styles/src/functions/_tokens.scss
@@ -52,3 +52,15 @@ $default-map: null !default;
 
   @return $key;
 }
+
+@function get-no-split($key, $map: $default-map) {
+  @if not meta.type-of($map) == 'map' {
+    @error 'No map provided or provided $map is not valid. Got #{meta.type-of($map)} instead.';
+  }
+
+  @if not map.has-key($map, $key) {
+    @error 'No such key "#{$key}" in given map! Available keys are: #{meta.inspect(map.keys($map))}.';
+  }
+
+  @return map.get($map, $key);
+}
diff --git a/packages/styles/src/functions/_typo.scss b/packages/styles/src/functions/_typo.scss
new file mode 100644
index 0000000000..ae668a5230
--- /dev/null
+++ b/packages/styles/src/functions/_typo.scss
@@ -0,0 +1,8 @@
+@use 'sass:map';
+
+@function get-height($typo-name) {
+  $font-size: 1rem;
+  $line-height: 1rem;
+  //TODO
+  @return calc(#{$font-size} * #{$line-height});
+}
diff --git a/packages/styles/src/mixins/_index.scss b/packages/styles/src/mixins/_index.scss
index 88110fd344..4636bd47a0 100644
--- a/packages/styles/src/mixins/_index.scss
+++ b/packages/styles/src/mixins/_index.scss
@@ -5,6 +5,7 @@
 @forward 'focus';
 @forward 'form-checks';
 @forward 'forms';
+@forward 'components/forms';
 @forward 'icon-button';
 @forward 'icons';
 @forward 'notification';
diff --git a/packages/styles/src/mixins/_typo.scss b/packages/styles/src/mixins/_typo.scss
new file mode 100644
index 0000000000..2e2112d968
--- /dev/null
+++ b/packages/styles/src/mixins/_typo.scss
@@ -0,0 +1,20 @@
+//@use 'sass:map';
+//@use './../tokens/temp/figmaonly' as tokens;
+
+@mixin use($typo-name) {
+  font-family: 'Frutiger Neue For Post';
+  //font-family:
+  // map.get(tokens.$post-figmaonly, utility-typo-#{$typo-name}-fontFamily),
+  // 'Frutiger Neue For Post',
+  // -apple-system,
+  // BlinkMacSystemFont,
+  // 'Segoe UI',
+  // Roboto,
+  // 'Helvetica Neue',
+  // Arial,
+  // sans-serif;
+  //  font-weight: map.get(tokens.$post-figmaonly, utility-typo-#{$typo-name}-fontWeight);
+  //  font-size: map.get(tokens.$post-figmaonly, utility-typo-#{$typo-name}-fontSize);
+  //  line-height: map.get(tokens.$post-figmaonly, utility-typo-#{$typo-name}-lineHeight);
+  //  letter-spacing: map.get(tokens.$post-figmaonly, utility-typo-#{$typo-name}-letterSpacing);
+}
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 2996399842..2297918725 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -100,7 +100,7 @@
   outline: none;
 }
 
-@mixin focus-style($additional-selector: '') {
+@mixin focus-style($additional-selector: '', $outline-color: var(--post-focus-color)) {
   &#{$additional-selector} {
     outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus) !important;
     outline: tokens.get('focus-outline-color', helpers.$post-focus) none
diff --git a/packages/styles/src/mixins/components/forms/_input.scss b/packages/styles/src/mixins/components/forms/_input.scss
new file mode 100644
index 0000000000..8f61d8872e
--- /dev/null
+++ b/packages/styles/src/mixins/components/forms/_input.scss
@@ -0,0 +1,30 @@
+@use 'sass:selector';
+@use 'sass:string';
+
+@use './../../../functions/calc';
+@use './../../../functions/tokens';
+@use './../../../tokens/components';
+
+tokens.$default-map: components.$post-text-input;
+
+/**
+ * This mixin sets the inline padding at the end of an element to match the padding of a post-text-input.
+ * It dynamically updates the padding based on the form-control's validation state, ensuring there is enough space for the validation icon when the form is valid or invalid.
+ */
+@mixin padding-inline-end() {
+  padding-inline-end: calc.add(
+    var(--post-input-bg-size, 0px),
+    /* stylelint-disable-line */ // unit is necessary
+    tokens.get('input-spacing-padding-inline-text-end')
+  );
+
+  @if string.index(#{&}, '.form-control-v2') == null {
+    @warn 'The current "&" selector is missing a ".form-control" class, so the padding will not adjust for valid or invalid states.';
+  } @else {
+    @at-root #{selector.replace(&, '.form-control-v2', '.form-control-v2:where(.is-valid-v2, .is-invalid-v2)')} {
+      --post-input-bg-size: calc(
+        #{tokens.get('input-spacing-gap-inline-1')} + #{tokens.get('input-sizing-icon')}
+      );
+    }
+  }
+}
diff --git a/packages/styles/src/mixins/components/forms/index.scss b/packages/styles/src/mixins/components/forms/index.scss
new file mode 100644
index 0000000000..8169b57ad6
--- /dev/null
+++ b/packages/styles/src/mixins/components/forms/index.scss
@@ -0,0 +1 @@
+@use 'input';
diff --git a/packages/styles/src/variables/components/_index.scss b/packages/styles/src/variables/components/_index.scss
index 69d5d76351..4becbe3c9a 100644
--- a/packages/styles/src/variables/components/_index.scss
+++ b/packages/styles/src/variables/components/_index.scss
@@ -13,6 +13,7 @@
 @forward 'form-validation';
 @forward 'form-select';
 @forward 'forms';
+@forward 'forms/index';
 @forward 'list-group';
 @forward 'modal';
 @forward 'nav';
diff --git a/packages/styles/src/variables/components/forms/_input.scss b/packages/styles/src/variables/components/forms/_input.scss
new file mode 100644
index 0000000000..4bbab73cc5
--- /dev/null
+++ b/packages/styles/src/variables/components/forms/_input.scss
@@ -0,0 +1 @@
+$input-border-width: 2px;
diff --git a/packages/styles/src/variables/components/forms/index.scss b/packages/styles/src/variables/components/forms/index.scss
new file mode 100644
index 0000000000..8169b57ad6
--- /dev/null
+++ b/packages/styles/src/variables/components/forms/index.scss
@@ -0,0 +1 @@
+@use 'input';
diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json
index 51a6beb7a0..740a58e0d1 100644
--- a/packages/tokens/tokensstudio-generated/tokens.json
+++ b/packages/tokens/tokensstudio-generated/tokens.json
@@ -5420,6 +5420,18 @@
               "$type": "spacing",
               "$value": "{post.device.spacing.padding.block.18}"
             }
+          },
+          "width-inner": {
+            "$type": "sizing",
+            "$value": "{post.device.sizing.interactive.icon.width}"
+          },
+          "height-inner": {
+            "$type": "sizing",
+            "$value": "{post.device.sizing.interactive.icon.height}"
+          },
+          "border-width": {
+            "$type": "borderWidth",
+            "$value": "{post.device.border-width.default}"
           }
         },
         "padding": {
@@ -7017,8 +7029,60 @@
             }
           }
         },
-        "sizing": {
-          "icon": {
+        "unfilled": {
+          "padding": {
+            "block": {
+              "section": {
+                "$type": "spacing",
+                "$value": "{post.device.spacing.padding.block.1}"
+              },
+              "label": {
+                "$type": "spacing",
+                "$value": "{post.device.spacing.padding.block.2}"
+              }
+            }
+          },
+          "focus": {
+            "padding": {
+              "block": {
+                "section": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.block.4}"
+                }
+              }
+            }
+          }
+        },
+        "padding": {
+          "block": {
+            "text-assist": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.block.5}"
+            }
+          },
+          "inline": {
+            "section-start": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.inline.1}"
+            },
+            "section-end": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.3}"
+            },
+            "text-assist": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.2}"
+            }
+          }
+        },
+        "icon": {
+          "padding": {
+            "droppdow-inner": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.15}"
+            }
+          },
+          "signal": {
             "$type": "sizing",
             "$value": "{post.device.sizing.notification.icon.3}"
           }
@@ -10911,4 +10975,4 @@
       "Helpers/Focus"
     ]
   }
-}
\ No newline at end of file
+}