diff --git a/.changeset/wise-tomatoes-brake.md b/.changeset/wise-tomatoes-brake.md
new file mode 100644
index 0000000000..99014097fc
--- /dev/null
+++ b/.changeset/wise-tomatoes-brake.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated the styles  of the form validation messages to match the new Post design.
diff --git a/packages/documentation/cypress/e2e/components/validation.cy.ts b/packages/documentation/cypress/e2e/components/validation.cy.ts
new file mode 100644
index 0000000000..2130453f9c
--- /dev/null
+++ b/packages/documentation/cypress/e2e/components/validation.cy.ts
@@ -0,0 +1,13 @@
+describe('Validation', () => {
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=snapshots--validation');
+      cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+      cy.injectAxe();
+    });
+
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.checkA11y('#root-inner');
+    });
+  });
+});
diff --git a/packages/documentation/cypress/snapshots/components/validation.snapshot.ts b/packages/documentation/cypress/snapshots/components/validation.snapshot.ts
new file mode 100644
index 0000000000..c99cbb4f5d
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/validation.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Validation', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--validation');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Validation', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/src/shared/styles-package-import-individual.sample.ts b/packages/documentation/src/shared/styles-package-import-individual.sample.ts
index 036c1ed60a..4a6b33bc82 100644
--- a/packages/documentation/src/shared/styles-package-import-individual.sample.ts
+++ b/packages/documentation/src/shared/styles-package-import-individual.sample.ts
@@ -6,7 +6,7 @@ interface Props {
 const requiredLabels: { [key: string]: string } = {
   'icons': 'required if you use icons',
   'floating-label': 'required if you use floating-labels',
-  'form-feedback': 'required if you use validation feedbacks',
+  'validation': 'required if you use validation feedbacks',
 };
 
 export function getComponentStyleImports(props: Props) {
diff --git a/packages/documentation/src/shared/styles-package-import.mdx b/packages/documentation/src/shared/styles-package-import.mdx
index 02671c8a21..ff87878edf 100644
--- a/packages/documentation/src/shared/styles-package-import.mdx
+++ b/packages/documentation/src/shared/styles-package-import.mdx
@@ -4,20 +4,17 @@ import { getComponentStyleImports } from './styles-package-import-individual.sam
 ## Style Imports
 
 <p>
-  <small>*Make sure the `@swisspost/design-system-styles` package is already present in your project
-    or follow the [installation guidelines](http://localhost:9000/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs).*</small>
+  <small>
+    *Make sure the `@swisspost/design-system-styles` package is already present in your project or
+    follow the [installation
+    guidelines](http://localhost:9000/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs).*
+  </small>
 </p>
 
 To import all Design System styles:
 
-<Source
-  code={`@use '@swisspost/design-system-styles/index.scss';`}
-  language="scss"
-/>
+<Source code={`@use '@swisspost/design-system-styles/index.scss';`} language="scss" />
 
 To import only the styles required for this component:
 
-<Source
-  code={getComponentStyleImports(props)}
-  language="scss"
-/>
+<Source code={getComponentStyleImports(props)} language="scss" />
diff --git a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
index 62cc57640c..d46664d63c 100644
--- a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
@@ -95,7 +95,8 @@ const meta: MetaComponent = {
     },
     validation: {
       name: 'Validation',
-      description: "Controls the display of the component's validation state.",
+      description:
+        'Defines the validation state of the card control and controls the display of the corresponding return message.<span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs##card-control">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
index b41fd25faa..4c113c35d3 100644
--- a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
+++ b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
@@ -24,7 +24,7 @@ Our checkboxes use custom icons to indicate checked or indeterminate states.
   <Controls of={checkboxStories.Default} />
 </div>
 
-<StylesPackageImport components={['form-check']} required={{ 'form-feedback': true }} />
+<StylesPackageImport components={['form-check']} required={{ validation: true }} />
 
 ## Examples
 
@@ -57,7 +57,8 @@ To show a checkbox group, just wrap your checkboxes in a `fieldset`.
   Don't forget to add also a `<legend>` element.
   You can visually hide the legend using the `.visually-hidden` class if necessary.
 
-  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+
 </div>
 
 <Canvas of={checkboxStories.Grouped} />
@@ -75,13 +76,3 @@ Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83
 </div>
 
 <Canvas of={checkboxStories.Inline} />
-
-### Validation
-
-To provide feedback to your users about the validation state of a checkbox,
-simply add a `.is-valid` or a `.is-invalid` classes to it.
-
-These classes control the display of corresponding feedback messages that should be placed under the input:
-`<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>`.
-
-<Canvas of={checkboxStories.Validation} />
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/checkbox/checkbox.stories.ts
index 5c30547138..cd34f6c361 100644
--- a/packages/documentation/src/stories/components/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/checkbox/checkbox.stories.ts
@@ -107,8 +107,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the checkbox and controls the display of the corresponding return' +
-        ' message.',
+        'Defines the validation state of the checkbox and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#checkbox">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {
diff --git a/packages/documentation/src/stories/components/forms/validation/validation.docs.mdx b/packages/documentation/src/stories/components/forms/validation/validation.docs.mdx
new file mode 100644
index 0000000000..f6f5d4d265
--- /dev/null
+++ b/packages/documentation/src/stories/components/forms/validation/validation.docs.mdx
@@ -0,0 +1,75 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ValidationStories from './validation.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={ValidationStories} />
+
+<div className="docs-title">
+# Validation
+
+  <nav>
+    <link-design of={JSON.stringify(ValidationStories)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  The Validation component is a reusable component designed to provide consistent validation
+  feedback across all components that require input validation.
+</div>
+
+Validation employs the `:invalid` and `:valid` pseudo-classes to provide styling for `<input>`, `<select>`, and `<textarea>` elements. To control when these styles are displayed, the `.was-validated` class must be applied to a parent element (e.g. `<form>`).
+
+Alternatively, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for server-side validation, without the `.was-validated` parent class.
+
+These classes control the display of corresponding feedback messages that should be placed under the component: `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>`.
+
+## Examples
+
+### Checkbox
+
+<Canvas sourceState="shown" of={ValidationStories.Checkbox} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.Checkbox} />
+</div>
+
+### Input
+
+<Canvas sourceState="shown" of={ValidationStories.Input} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.Input} />
+</div>
+
+### Radio Button
+
+<Canvas sourceState="shown" of={ValidationStories.RadioButton} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.RadioButton} />
+</div>
+
+### Radio Button Inline Group
+
+<Canvas sourceState="shown" of={ValidationStories.RadioButtonGroup} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.RadioButtonGroup} />
+</div>
+
+### Select
+
+<Canvas sourceState="shown" of={ValidationStories.Select} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.Select} />
+</div>
+
+### Switch
+
+<Canvas sourceState="shown" of={ValidationStories.Switch} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.Switch} />
+</div>
+
+### Textarea
+
+<Canvas sourceState="shown" of={ValidationStories.TextArea} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.TextArea} />
+</div>
diff --git a/packages/documentation/src/stories/components/forms/validation/validation.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/validation/validation.snapshot.stories.ts
new file mode 100644
index 0000000000..03da6f612e
--- /dev/null
+++ b/packages/documentation/src/stories/components/forms/validation/validation.snapshot.stories.ts
@@ -0,0 +1,50 @@
+import type { StoryObj, Args, StoryContext } from '@storybook/web-components';
+import meta, {
+  Checkbox,
+  Input,
+  RadioButton,
+  RadioButtonGroup,
+  Select,
+  Switch,
+  TextArea,
+} from './validation.stories';
+import { html, nothing } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+const components = [Checkbox, Input, RadioButton, RadioButtonGroup, Select, Switch, TextArea];
+
+export const Validation: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return schemes(
+      scheme => html`
+        <div class="snapshot">
+          ${components.map(Component => {
+            return html`
+              <div>
+                ${['is-valid', 'is-invalid'].map(validation => {
+                  const render = Component.render || (() => nothing);
+                  const args = {
+                    ...context.args,
+                    validationValidation: validation,
+                    scheme: scheme,
+                    componentName: Object.keys(Component.args!)[0],
+                  };
+                  return html`${render(args, context)}`;
+                })}
+              </div>
+            `;
+          })}
+        </div>
+      `,
+    );
+  },
+};
diff --git a/packages/documentation/src/stories/components/forms/validation/validation.stories.ts b/packages/documentation/src/stories/components/forms/validation/validation.stories.ts
new file mode 100644
index 0000000000..19eaad8f00
--- /dev/null
+++ b/packages/documentation/src/stories/components/forms/validation/validation.stories.ts
@@ -0,0 +1,311 @@
+import { Args, StoryObj, StoryContext } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import { MetaComponent } from '@root/types';
+
+const validationObject: object = {
+  name: 'validation',
+  description: 'Controls the validation state appearance of the component.',
+  control: {
+    type: 'radio',
+    labels: {
+      'null': 'Default',
+      'is-valid': 'Valid',
+      'is-invalid': 'Invalid',
+    },
+  },
+  options: ['is-invalid', 'is-valid', 'null'],
+  table: {
+    category: 'States',
+  },
+};
+
+export function getValidationProps(component: string, args: Args) {
+  const key = `validation${component}`;
+  const validationState = args[key];
+  const isValidationSet = args[key] !== 'null';
+  const isValid = validationState === 'is-valid';
+
+  const scheme = args.scheme ? `-${args.scheme}` : '';
+  const name = args.componentName ? `${args.componentName}` : '';
+  const id = `-id-${name}${scheme}`;
+
+  return {
+    scheme,
+    validationState,
+    isValidationSet,
+    ariaInvalid: isValidationSet ? !isValid : nothing,
+    ariaDescribedBy: isValidationSet ? `${validationState}${id}` : nothing,
+    validFeedbackId:
+      isValidationSet && validationState !== 'is-invalid' ? `${validationState}${id}` : nothing,
+    invalidFeedbackId:
+      isValidationSet && validationState !== 'is-valid' ? `${validationState}${id}` : nothing,
+  };
+}
+
+function renderFeedback(validFeedbackId: string | symbol, invalidFeedbackId: string | symbol) {
+  return html`
+    ${validFeedbackId
+      ? html`<p id="${validFeedbackId}" class="valid-feedback">Valid message.</p>`
+      : nothing}
+    ${invalidFeedbackId
+      ? html`<p id="${invalidFeedbackId}" class="invalid-feedback">Invalid message.</p>`
+      : nothing}
+  `;
+}
+
+const meta: MetaComponent = {
+  id: '1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472',
+  title: 'Components/Form Validation',
+  tags: ['package:HTML'],
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=577-14513&t=uKEtTo9BEaPpKSV5-1',
+    },
+    args: validationObject,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Checkbox: Story = {
+  args: {
+    validationCheckbox: 'is-invalid',
+  },
+  argTypes: {
+    validationCheckbox: validationObject,
+  },
+  render: (args: Args, context: StoryContext) => {
+    const component = context.name.replace(/\s+/g, '');
+    const props = getValidationProps(component, args);
+
+    const feedbackTemplate = renderFeedback(props.validFeedbackId, props.invalidFeedbackId);
+    return html`<div class="form-check">
+      <input
+        type="checkbox"
+        id="Checkbox_1${props.validationState}${props.scheme}"
+        class="form-check-input ${props.isValidationSet ? props.validationState : ''}"
+        aria-invalid=${props.ariaInvalid}
+        aria-describedby="${props.ariaDescribedBy}"
+      />
+      <label class="form-check-label" for="Checkbox_1${props.validationState}${props.scheme}"
+        >Label</label
+      >
+      ${feedbackTemplate}
+    </div>`;
+  },
+};
+
+export const Input: Story = {
+  args: {
+    validationInput: 'is-invalid',
+  },
+  argTypes: {
+    validationInput: validationObject,
+  },
+  render: (args: Args, context: StoryContext) => {
+    const component = context.name.replace(/\s+/g, '');
+    const props = getValidationProps(component, args);
+    const feedbackTemplate = renderFeedback(props.validFeedbackId, props.invalidFeedbackId);
+    return html`<div class="form-floating">
+      <input
+        id="Input_1${props.validationState}${props.scheme}"
+        class="form-control form-control-lg ${props.isValidationSet ? props.validationState : ''}"
+        aria-invalid=${props.ariaInvalid}
+        aria-describedby="${props.ariaDescribedBy}"
+        type="text"
+        placeholder="Placeholder"
+      />
+      <label class="form-label" for="Input_1${props.validationState}${props.scheme}">Label</label>
+      <p class="form-hint">
+        Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel
+        illum dolore eu feugiat nulla facilisis.
+      </p>
+      ${feedbackTemplate}
+    </div> `;
+  },
+};
+
+export const RadioButton: Story = {
+  args: {
+    validationRadioButton: 'is-invalid',
+  },
+  argTypes: {
+    validationRadioButton: validationObject,
+  },
+  render: (args: Args, context: StoryContext) => {
+    const component = context.name.replace(/\s+/g, '');
+    const props = getValidationProps(component, args);
+    const feedbackTemplate = renderFeedback(props.validFeedbackId, props.invalidFeedbackId);
+    return html` <legend>Legend</legend>
+      <div class="form-check form-check-inline">
+        <input
+          type="radio"
+          id="Radio_1${props.validationState}${props.scheme}"
+          name="radio_group"
+          class="form-check-input ${props.isValidationSet ? props.validationState : ''}"
+          aria-invalid=${props.ariaInvalid}
+          aria-describedby="${props.ariaDescribedBy}"
+        />
+        <label class="form-check-label" for="Radio_1${props.validationState}${props.scheme}"
+          >Option 1</label
+        >
+        ${feedbackTemplate}
+      </div>`;
+  },
+};
+
+export const RadioButtonGroup: Story = {
+  args: {
+    validationRadioButtonGroup: 'is-invalid',
+  },
+  argTypes: {
+    validationRadioButtonGroup: validationObject,
+  },
+  render: (args: Args, context: StoryContext) => {
+    const component = context.name.replace(/\s+/g, '');
+    const props = getValidationProps(component, args);
+    const feedbackTemplate = renderFeedback(props.validFeedbackId, props.invalidFeedbackId);
+    return html`<fieldset>
+      <legend>Legend</legend>
+      <div class="form-check form-check-inline">
+        <input
+          type="radio"
+          id="Radio_10${props.validationState}${props.scheme}"
+          name="radio_group"
+          class="form-check-input ${props.isValidationSet ? props.validationState : ''}"
+          aria-invalid=${props.ariaInvalid}
+          aria-describedby="${props.ariaDescribedBy}"
+          required
+        />
+        <label class="form-check-label" for="Radio_10${props.validationState}${props.scheme}"
+          >Option 1</label
+        >
+      </div>
+      <div class="form-check form-check-inline">
+        <input
+          type="radio"
+          id="Radio_11${props.validationState}${props.scheme}"
+          name="radio_group"
+          class="form-check-input"
+        />
+        <label class="form-check-label" for="Radio_11${props.validationState}${props.scheme}"
+          >Option 2</label
+        >
+      </div>
+      <div class="form-check form-check-inline">
+        <input
+          type="radio"
+          id="Radio_12${props.validationState}${props.scheme}"
+          name="radio_group"
+          class="form-check-input"
+        />
+        <label class="form-check-label" for="Radio_12${props.validationState}${props.scheme}"
+          >Option 3</label
+        >
+      </div>
+      ${feedbackTemplate}
+    </fieldset>`;
+  },
+};
+
+export const Select: Story = {
+  args: {
+    validationSelect: 'is-invalid',
+  },
+  argTypes: {
+    validationSelect: validationObject,
+  },
+  render: (args: Args, context: StoryContext) => {
+    const component = context.name.replace(/\s+/g, '');
+    const props = getValidationProps(component, args);
+    const feedbackTemplate = renderFeedback(props.validFeedbackId, props.invalidFeedbackId);
+    return html`<div class="form-floating">
+      <select
+        id="Select_1${props.validationState}${props.scheme}"
+        class="form-select form-select-lg ${props.isValidationSet ? props.validationState : ''}"
+        aria-invalid=${props.ariaInvalid}
+        aria-describedby="${props.ariaDescribedBy}"
+      >
+        <option>Select option...</option>
+        <option value="value_1">Option 1</option>
+        <option value="value_2">Option 2</option>
+        <option value="value_3">Option 3</option>
+        <option value="value_4">Option 4</option>
+      </select>
+      <label class="form-label" for="Select_1${props.validationState}${props.scheme}">
+        <span>Label</span>
+      </label>
+      <p class="form-hint">
+        Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel
+        illum dolore eu feugiat nulla facilisis.
+      </p>
+      ${feedbackTemplate}
+    </div>`;
+  },
+};
+
+export const Switch: Story = {
+  args: {
+    validationSwitch: 'is-invalid',
+  },
+  argTypes: {
+    validationSwitch: validationObject,
+  },
+  render: (args: Args, context: StoryContext) => {
+    const component = context.name.replace(/\s+/g, '');
+    const props = getValidationProps(component, args);
+    const feedbackTemplate = renderFeedback(props.validFeedbackId, props.invalidFeedbackId);
+    return html`<div class="form-check form-switch">
+      <input
+        type="checkbox"
+        role="switch"
+        id="Switch_1${props.validationState}${props.scheme}"
+        class="form-check-input ${props.isValidationSet ? props.validationState : ''}"
+        aria-invalid=${props.ariaInvalid}
+        aria-describedby="${props.ariaDescribedBy}"
+      />
+      <label
+        class="form-check-label order-first"
+        for="Switch_1${props.validationState}${props.scheme}"
+        >Notifications</label
+      >
+      ${feedbackTemplate}
+    </div>`;
+  },
+};
+
+export const TextArea: Story = {
+  args: {
+    validationTextArea: 'is-invalid',
+  },
+  argTypes: {
+    validationTextArea: validationObject,
+  },
+  render: (args: Args, context: StoryContext) => {
+    const component = context.name.replace(/\s+/g, '');
+    const props = getValidationProps(component, args);
+    const feedbackTemplate = renderFeedback(props.validFeedbackId, props.invalidFeedbackId);
+    return html`<div class="form-floating">
+      <textarea
+        placeholder=""
+        rows=""
+        id="TextArea_1${props.validationState}${props.scheme}"
+        class="form-control form-control-lg ${props.isValidationSet ? props.validationState : ''}"
+        aria-invalid=${props.ariaInvalid}
+        aria-describedby="${props.ariaDescribedBy}"
+      ></textarea
+      ><label class="form-label" for="TextArea_1${props.validationState}${props.scheme}"
+        >Label</label
+      >
+      <p class="form-hint">
+        Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel
+        illum dolore eu feugiat nulla facilisis.
+      </p>
+      ${feedbackTemplate}
+    </div>`;
+  },
+};
diff --git a/packages/documentation/src/stories/components/input/input.docs.mdx b/packages/documentation/src/stories/components/input/input.docs.mdx
index 53b969055c..032abd32e3 100644
--- a/packages/documentation/src/stories/components/input/input.docs.mdx
+++ b/packages/documentation/src/stories/components/input/input.docs.mdx
@@ -25,7 +25,7 @@ Custom input elements need only the class `.form-control` to trigger the custom
 
 <StylesPackageImport
   components={['forms']}
-  required={{ 'floating-label': true, 'form-feedback': true }}
+  required={{ 'floating-label': true, 'validation': true }}
 />
 
 ## Concrete Examples of Application
@@ -40,10 +40,3 @@ But note that the `<input>` element must come first, so we can ensure the correc
 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} />
-
-### Validation
-
-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/input/input.stories.ts b/packages/documentation/src/stories/components/input/input.stories.ts
index 793338534f..f68b161e3b 100644
--- a/packages/documentation/src/stories/components/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/input/input.stories.ts
@@ -123,7 +123,8 @@ const meta: MetaComponent = {
     },
     validation: {
       name: 'Validation',
-      description: 'Controls the validation state appearance of the component.',
+      description:
+        'Defines the validation state of the input and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#input">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {
diff --git a/packages/documentation/src/stories/components/radio/radio.docs.mdx b/packages/documentation/src/stories/components/radio/radio.docs.mdx
index 44744435bb..0bf509aae4 100644
--- a/packages/documentation/src/stories/components/radio/radio.docs.mdx
+++ b/packages/documentation/src/stories/components/radio/radio.docs.mdx
@@ -25,7 +25,7 @@ Our radios use custom icons to indicate checked states.
   <Controls of={RadioStories.Default} />
 </div>
 
-<StylesPackageImport components={['form-check']} required={{ 'form-feedback': true }} />
+<StylesPackageImport components={['form-check']} required={{ validation: true }} />
 
 ## Concrete Examples of Application
 
@@ -39,7 +39,8 @@ To show radio button group, just wrap your radios in a `fieldset`.
   Don't forget to add also a `<legend>` element.
   You can visually hide the legend using the `.visually-hidden` class if necessary.
 
-  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+
 </div>
 
 <Canvas of={RadioStories.Grouped} />
@@ -52,16 +53,13 @@ To render a radio inline, simply add the class `.form-check-inline` to the `.for
   Remember to wrap your radio groups in a <code>&lt;fieldset&gt;</code> including a{' '}
   <code>&lt;legend&gt;</code> tag. This provides a label for your radio group.
   <br />
-  For more information, read our{' '} <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#grouping">grouping accessibility guide</a>.
+  For more information, read our{' '}
+  <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#grouping">
+    grouping accessibility guide
+  </a>
+  .
 </div>
 
 To visually hide the `<legend>` element, use the `.visually-hidden` class.
 
 <Canvas of={RadioStories.Inline} />
-
-### Validation
-
-Simply add the classes `.is-valid` or `.is-invalid` to the `radio` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `radio` element to explain what went wrong. This enables the user to correct the mistake.
-
-<Canvas of={RadioStories.Validation} />
diff --git a/packages/documentation/src/stories/components/radio/radio.stories.ts b/packages/documentation/src/stories/components/radio/radio.stories.ts
index e0cc709c15..6114d90fc4 100644
--- a/packages/documentation/src/stories/components/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/radio/radio.stories.ts
@@ -87,7 +87,8 @@ const meta: MetaComponent = {
     },
     validation: {
       name: 'Validation',
-      description: "Controls the display of the component's validation state.",
+      description:
+        'Defines the validation state of the radio button and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#radio-button">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {
diff --git a/packages/documentation/src/stories/components/select/select.docs.mdx b/packages/documentation/src/stories/components/select/select.docs.mdx
index 8a354f06f3..30963bac7a 100644
--- a/packages/documentation/src/stories/components/select/select.docs.mdx
+++ b/packages/documentation/src/stories/components/select/select.docs.mdx
@@ -23,7 +23,7 @@ Custom `<select>` menus need only the class `.form-select` to trigger the custom
   <Controls of={SelectStories.Default} />
 </div>
 
-<StylesPackageImport components={['form-select']} required={{ 'form-feedback': true }} />
+<StylesPackageImport components={['form-select']} required={{ validation: true }} />
 
 ## Concrete Examples of Application
 
@@ -42,10 +42,3 @@ If you use an empty option in your select and you want that your label acts as p
 you can dynamically add the class `.form-select-empty` to the `<select>` when there are no value defined or no option selected.
 
 <Canvas of={SelectStories.FloatingLabelPlaceholder} />
-
-### Validation
-
-Simply add the classes `is-valid` or `is-invalid` to the `<select>` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `select` element to explain what went wrong. This enables the user to correct the mistake.
-
-<Canvas of={SelectStories.Validation} />
diff --git a/packages/documentation/src/stories/components/select/select.stories.ts b/packages/documentation/src/stories/components/select/select.stories.ts
index f0c5f5e8ff..9754787807 100644
--- a/packages/documentation/src/stories/components/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/select/select.stories.ts
@@ -141,7 +141,8 @@ const meta: MetaComponent = {
     },
     validation: {
       name: 'Validation',
-      description: 'Controls the validation state appearance of the component.',
+      description:
+        'Defines the validation state of the select box and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#select">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {
diff --git a/packages/documentation/src/stories/components/slider/slider.docs.mdx b/packages/documentation/src/stories/components/slider/slider.docs.mdx
index d8d460ed31..e55234aec1 100644
--- a/packages/documentation/src/stories/components/slider/slider.docs.mdx
+++ b/packages/documentation/src/stories/components/slider/slider.docs.mdx
@@ -24,7 +24,7 @@ Create custom `range` controls with `.form-range`. The track (the background) an
   <Controls of={SliderStories.Default} />
 </div>
 
-<StylesPackageImport components={["form-range"]} required={{ 'form-feedback': true }} />
+<StylesPackageImport components={['form-range']} required={{ validation: true }} />
 
 ## Concrete Examples of Application
 
diff --git a/packages/documentation/src/stories/components/slider/slider.stories.ts b/packages/documentation/src/stories/components/slider/slider.stories.ts
index 659a1ed44c..d28f662a62 100644
--- a/packages/documentation/src/stories/components/slider/slider.stories.ts
+++ b/packages/documentation/src/stories/components/slider/slider.stories.ts
@@ -145,7 +145,8 @@ const meta: MetaComponent = {
     },
     validation: {
       name: 'Validation',
-      description: "Controls the display of the component's validation state.",
+      description:
+        'Defines the validation state of the slider and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#select">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {
diff --git a/packages/documentation/src/stories/components/switch/switch.docs.mdx b/packages/documentation/src/stories/components/switch/switch.docs.mdx
index da33cbe716..74b19ef909 100644
--- a/packages/documentation/src/stories/components/switch/switch.docs.mdx
+++ b/packages/documentation/src/stories/components/switch/switch.docs.mdx
@@ -24,7 +24,7 @@ Consider using `role="switch"` to more accurately convey the nature of the contr
   <Controls of={switchStories.Default} />
 </div>
 
-<StylesPackageImport components={["form-check"]} required={{ 'form-feedback': true }} />
+<StylesPackageImport components={['form-check']} required={{ validation: true }} />
 
 ## Concrete Examples of Application
 
@@ -37,10 +37,3 @@ You can also include inline elements into the label, such as `<a>`, `<strong>`,
 However, make sure to always place multiline labels after the `checkbox`.
 
 <Canvas of={switchStories.MultilineLabels} />
-
-### Validation
-
-Simply add the classes `.is-valid` or `.is-invalid` to the `switch` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `switch` element to explain what went wrong. This enables the user to correct the mistake.
-
-<Canvas of={switchStories.Validation} />
diff --git a/packages/documentation/src/stories/components/switch/switch.stories.ts b/packages/documentation/src/stories/components/switch/switch.stories.ts
index 7a3c73893d..6709fdfab9 100644
--- a/packages/documentation/src/stories/components/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/switch/switch.stories.ts
@@ -85,7 +85,8 @@ const meta: MetaComponent = {
     },
     validation: {
       name: 'Validation',
-      description: "Controls the display of the component's validation state.",
+      description:
+        'Defines the validation state of the switch and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#switch">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {
@@ -173,14 +174,3 @@ export const MultilineLabels: Story = {
       'Longa etikedo kiu plej versajne ne taugas sur unu linio kaj tial devas esti envolvita. Kaj nur por esti sur la sekura flanko, ni simple aldonu unu plian tre sencelan frazon ci tie. Vi neniam scias...',
   },
 };
-
-export const Validation: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Label Position', 'Label', 'Hidden Label', 'Checked', 'Disabled'],
-    },
-  },
-  args: {
-    validation: 'is-invalid',
-  },
-};
diff --git a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
index 4d6e00434c..4a9050489f 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
+++ b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
@@ -25,7 +25,7 @@ Custom textarea elements need only the class `.form-control` to trigger the cust
 
 <StylesPackageImport
   components={['forms']}
-  required={{ 'floating-label': true, 'form-feedback': true }}
+  required={{ 'floating-label': true, 'validation': true }}
 />
 
 ## Concrete Examples of Application
@@ -48,7 +48,8 @@ But note that the `<textarea>` element must come first, so we can ensure the cor
   <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
+    <br />
+    `.form-control-rg` and `.form-control-md` are deprecated and will be removed in the next major
     version.
   </p>
 </div>
@@ -68,10 +69,3 @@ The size can be changed by simply adding one of four classes:
 <div className="hide-col-default">
   <Controls of={TextareaStories.Size} />
 </div>
-
-### Validation
-
-Simply add the classes `.is-valid` or `.is-invalid` to the `<textarea>` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `textarea` element to explain what went wrong. This enables the user to correct the mistake.
-
-<Canvas of={TextareaStories.Validation} />
diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
index 4af2c0247b..8d880d8a35 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
@@ -155,7 +155,8 @@ const meta: MetaComponent = {
     },
     validation: {
       name: 'Validation',
-      description: 'Controls the validation state appearance of the component.',
+      description:
+        'Defines the validation state of the textarea and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#textarea">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {
@@ -254,23 +255,3 @@ export const Size: Story = {
     hint: '',
   },
 };
-
-export const Validation: Story = {
-  parameters: {
-    controls: {
-      exclude: [
-        'Label',
-        'Floating Label',
-        'Hidden Label',
-        'Size',
-        'Rows',
-        'Helper Text',
-        'Disabled',
-      ],
-    },
-  },
-  args: {
-    validation: 'is-invalid',
-    hint: '',
-  },
-};
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index d94c7f8902..058804881c 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -49,9 +49,9 @@
 @use 'tooltip';
 @use 'transitions';
 @use 'tag';
+@use 'validation';
 
 // Imports depending on source order to override bootstrap styles
 @use 'datepicker';
 @use 'dropdown';
 @use 'floating-label';
-@use 'form-validation';
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 50ff467dd3..0a343bd64d 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -11,7 +11,6 @@
 @use './../variables/type';
 @use './../variables/spacing';
 @use './../variables/components/forms';
-@use './../variables/components/form-validation';
 @use './../variables/animation';
 @use './../functions/tokens';
 @use './../tokens/components';
@@ -162,8 +161,9 @@ tokens.$default-map: components.$post-text-input;
     &:is(.is-valid, .is-invalid) {
       ~ label {
         width: calc(
-          100% - (#{tokens.get('input-border-width')} * 2) - #{form-validation.$form-feedback-icon-offset} -
-            #{tokens.get('input-sizing-height')}
+          100% - (#{tokens.get('input-border-width')} * 2) - #{spacing.$size-mini} - #{tokens.get(
+              'input-sizing-height'
+            )}
         );
       }
 
diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
deleted file mode 100644
index e6e048cccd..0000000000
--- a/packages/styles/src/components/form-validation.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-@forward './../variables/options';
-
-@use 'sass:map';
-
-@use './../themes/bootstrap/core' as b;
-@use './../themes/bootstrap/forms/validation' as bfv;
-
-@use './../mixins/color' as color-mx;
-@use './../mixins/utilities' as utilities-mx;
-@use './../mixins/form-validation' as form-validation-mx;
-@use './../variables/color';
-@use './../variables/components/form-validation';
-@use './../variables/components/forms';
-@use './../variables/spacing';
-@use './../variables/type';
-@use './../mixins/icons';
-
-.invalid-feedback,
-.valid-feedback {
-  display: none;
-  align-items: center;
-  width: 100%;
-  margin-block: form-validation.$form-feedback-margin-top 0;
-  padding: form-validation.$form-feedback-padding-y form-validation.$form-feedback-padding-x;
-  font-size: form-validation.$form-feedback-font-size;
-
-  @include utilities-mx.high-contrast-mode() {
-    padding-inline: 0;
-  }
-
-  &::before {
-    content: '';
-    flex-shrink: 0;
-    mask-repeat: no-repeat;
-    align-self: flex-start;
-    height: form-validation.$form-feedback-font-size * type.$line-height-copy;
-    width: form-validation.$form-feedback-font-size * type.$line-height-copy;
-    margin-right: spacing.$size-mini;
-  }
-}
-
-.invalid-feedback {
-  background: form-validation.$form-feedback-invalid-bg;
-  color: form-validation.$form-feedback-invalid-text;
-
-  &::before {
-    @include icons.icon(2413);
-  }
-}
-
-.valid-feedback {
-  background: form-validation.$form-feedback-valid-bg;
-  color: form-validation.$form-feedback-valid-text;
-
-  &::before {
-    @include icons.icon(2105);
-  }
-}
-
-.valid-feedback.custom-feedback {
-  background: form-validation.$form-feedback-custom-bg;
-  color: form-validation.$form-feedback-custom-text;
-}
-
-@each $state, $data in b.$form-validation-states {
-  $icon: map.get($data, 'icon');
-
-  @include b.form-validation-state-selector($state) {
-    ~ .#{$state}-feedback,
-    ~ .#{$state}-tooltip {
-      display: inline-flex;
-    }
-  }
-
-  .input-group {
-    > .form-control:not(:focus),
-    > .form-select:not(:focus),
-    > .form-floating:not(:focus-within) {
-      @include b.form-validation-state-selector($state) {
-        @if $state == 'valid' {
-          z-index: 3;
-        } @else if $state == 'invalid' {
-          z-index: 4;
-        }
-      }
-    }
-  }
-}
-
-.is-invalid ~ .invalid-feedback,
-.is-valid ~ .valid-feedback,
-post-card-control ~ .invalid-feedback {
-  display: inline-flex;
-}
-
-.form-check-input {
-  @include form-validation-mx.form-validation-state-selector(invalid) {
-    border-color: form-validation.$form-feedback-invalid-color;
-
-    ~ .form-check-label {
-      color: form-validation.$form-feedback-invalid-color;
-    }
-
-    @include color-mx.on-dark-background {
-      border-color: inherit;
-
-      ~ .form-check-label {
-        color: color.$white;
-      }
-    }
-
-    @include utilities-mx.high-contrast-mode {
-      border-color: FieldText; // For blink-browser as otherwise the invalid color will be converted to Highlight
-    }
-  }
-}
diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss
new file mode 100644
index 0000000000..10ae689995
--- /dev/null
+++ b/packages/styles/src/components/validation.scss
@@ -0,0 +1,91 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../functions/icons';
+@use './../mixins/icons' as icon-mixin;
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-validation;
+
+/*
+Default feedback message classes
+ */
+.valid-feedback,
+.invalid-feedback {
+  display: none;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: tokens.get('post-validation-input-padding-block')
+    tokens.get('post-validation-input-padding-inline');
+  font-size: tokens.get('post-validation-font-size');
+}
+
+/*
+ Valid input feedback
+*/
+.valid-feedback {
+  color: tokens.get('post-validation-success');
+
+  .was-validated :valid ~ &,
+  .is-valid ~ & {
+    display: flex;
+  }
+}
+
+// Special for fieldset
+.was-validated:has(:valid) ~ .valid-feedback,
+:has(.is-valid) ~ .valid-feedback {
+  display: flex;
+}
+
+// Special for fieldset
+.was-validated:has(:invalid) ~ .invalid-feedback,
+:has(.is-invalid) ~ .invalid-feedback {
+  display: flex;
+}
+
+/*
+ Invalid input feedback
+*/
+.invalid-feedback {
+  color: tokens.get('post-validation-error');
+
+  .was-validated :invalid ~ &,
+  .is-invalid ~ & {
+    display: flex;
+  }
+}
+
+/*
+ Checkbox and Radio box specific classes
+*/
+input[type='checkbox'],
+input[type='radio'],
+input[type='range'],
+:has(input[type='checkbox']),
+:has(input[type='radio']) {
+  ~ .invalid-feedback,
+  ~ .valid-feedback {
+    padding: tokens.get('post-validation-group-padding-block-text');
+
+    &::before {
+      margin-top: calc(-1 * #{tokens.get('post-validation-group-padding-block-text')});
+      margin-bottom: calc(-1 * #{tokens.get('post-validation-group-padding-block-text')});
+      height: tokens.get('post-validation-group-icon-size');
+      width: tokens.get('post-validation-group-icon-size');
+      display: inline-block;
+      margin-inline-end: tokens.get('post-validation-group-gap-inline');
+      background-color: currentColor;
+      color: currentColor;
+      content: '';
+    }
+  }
+
+  ~ .invalid-feedback::before {
+    @include icon-mixin.icon('warning');
+  }
+
+  ~ .valid-feedback::before {
+    @include icon-mixin.icon('success');
+  }
+}
diff --git a/packages/styles/src/themes/bootstrap/_overrides-variables.scss b/packages/styles/src/themes/bootstrap/_overrides-variables.scss
index 06e50c9140..5a32121dcb 100644
--- a/packages/styles/src/themes/bootstrap/_overrides-variables.scss
+++ b/packages/styles/src/themes/bootstrap/_overrides-variables.scss
@@ -20,7 +20,6 @@
 @forward './../../variables/components/dropdowns';
 @forward './../../variables/components/figures';
 @forward './../../variables/components/form-check';
-@forward './../../variables/components/form-validation';
 @forward './../../variables/components/forms';
 @forward './../../variables/components/modal';
 @forward './../../variables/components/nav';
diff --git a/packages/styles/src/variables/_icons.scss b/packages/styles/src/variables/_icons.scss
index 8397170d67..40ec3d9438 100644
--- a/packages/styles/src/variables/_icons.scss
+++ b/packages/styles/src/variables/_icons.scss
@@ -7,7 +7,7 @@
 
 $icon-size-default: 1.5rem !default;
 
-$svg-pre-path: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Cpath d='";
+$svg-pre-path: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='";
 $svg-post-path: "'%3E%3C/path%3E%3C/svg%3E";
 
 $notification-icons: () !default;
diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
deleted file mode 100644
index 6df46f5530..0000000000
--- a/packages/styles/src/variables/components/_form-validation.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@use './../color';
-@use './../spacing';
-@use './../type';
-@use './../components/button';
-@use './../components/forms';
-@use './../../functions/icons';
-@use './../../functions/sizing';
-
-// Bootstrap variables
-$form-feedback-margin-top: 0 !default;
-$form-feedback-font-size: type.$font-size-12 !default;
-$form-feedback-valid-color: color.$gray-60 !default;
-$form-feedback-invalid-color: color.$error !default;
-$form-feedback-icon-valid: url('#{icons.get-colored-svg-url('2105', color.$success)}') !default;
-$form-feedback-icon-valid-hcm-dark: url('#{icons.get-colored-svg-url('2105', color.$white)}') !default;
-$form-feedback-icon-valid-hcm-light: url('#{icons.get-colored-svg-url('2105', color.$black)}') !default;
-$form-feedback-icon-invalid: url('#{icons.get-colored-svg-url('2104', color.$error)}') !default;
-$form-feedback-icon-invalid-hcm-dark: url('#{icons.get-colored-svg-url('2104', color.$white)}') !default;
-$form-feedback-icon-invalid-hcm-light: url('#{icons.get-colored-svg-url('2104', color.$black)}') !default;
-
-// Design System custom variables
-$form-feedback-padding-x: spacing.$size-regular !default;
-$form-feedback-padding-y: sizing.px-to-rem(6);
-$form-feedback-padding-y-sm: spacing.$size-micro;
-$form-feedback-icon-size: 2rem !default; // Equals 24pt [svg-size]
-$form-feedback-icon-offset: spacing.$size-mini !default;
-$form-feedback-valid-bg: color.$success !default;
-$form-feedback-valid-text: color.$white !default;
-$form-feedback-invalid-bg: color.$error !default;
-$form-feedback-invalid-text: color.$white !default;
-$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/_index.scss b/packages/styles/src/variables/components/_index.scss
index 091c188066..a0ffeae155 100644
--- a/packages/styles/src/variables/components/_index.scss
+++ b/packages/styles/src/variables/components/_index.scss
@@ -9,7 +9,6 @@
 @forward 'dropdowns';
 @forward 'figures';
 @forward 'form-check';
-@forward 'form-validation';
 @forward 'forms';
 @forward 'modal';
 @forward 'nav';