diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
index 34908ffa1f2..2afc815a317 100644
--- a/packages/angular/src/components.ts
+++ b/packages/angular/src/components.ts
@@ -629,7 +629,7 @@ The event payload contains information about the selected date range.
 
 @ProxyCmp({
   inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'focusInput', 'clear']
 })
 @Component({
   selector: 'ix-date-input',
@@ -1326,7 +1326,7 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto
 
 @ProxyCmp({
   inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'type', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'getValidityState', 'focusInput']
+  methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-input',
@@ -2003,7 +2003,7 @@ Can be prevented, in which case only the event is triggered, and the modal remai
 
 @ProxyCmp({
   inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-number-input',
@@ -2526,7 +2526,7 @@ export declare interface IxTabs extends Components.IxTabs {
 
 @ProxyCmp({
   inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-textarea',
@@ -2590,7 +2590,7 @@ export declare interface IxTile extends Components.IxTile {}
 
 @ProxyCmp({
   inputs: ['disabled', 'format', 'helperText', 'hideHeader', 'hourInterval', 'i18nErrorTimeUnparsable', 'i18nHourColumnHeader', 'i18nMillisecondColumnHeader', 'i18nMinuteColumnHeader', 'i18nSecondColumnHeader', 'i18nSelectTime', 'i18nTime', 'infoText', 'invalidText', 'label', 'millisecondInterval', 'minuteInterval', 'name', 'placeholder', 'readonly', 'required', 'secondInterval', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'focusInput', 'clear']
 })
 @Component({
   selector: 'ix-time-input',
diff --git a/packages/angular/standalone/src/components.ts b/packages/angular/standalone/src/components.ts
index b395b030597..a7b76861fcf 100644
--- a/packages/angular/standalone/src/components.ts
+++ b/packages/angular/standalone/src/components.ts
@@ -730,7 +730,7 @@ The event payload contains information about the selected date range.
 @ProxyCmp({
   defineCustomElementFn: defineIxDateInput,
   inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'focusInput', 'clear']
 })
 @Component({
   selector: 'ix-date-input',
@@ -1427,7 +1427,7 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto
 @ProxyCmp({
   defineCustomElementFn: defineIxInput,
   inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'type', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'getValidityState', 'focusInput']
+  methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-input',
@@ -2104,7 +2104,7 @@ Can be prevented, in which case only the event is triggered, and the modal remai
 @ProxyCmp({
   defineCustomElementFn: defineIxNumberInput,
   inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-number-input',
@@ -2627,7 +2627,7 @@ export declare interface IxTabs extends Components.IxTabs {
 @ProxyCmp({
   defineCustomElementFn: defineIxTextarea,
   inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-textarea',
@@ -2691,7 +2691,7 @@ export declare interface IxTile extends Components.IxTile {}
 @ProxyCmp({
   defineCustomElementFn: defineIxTimeInput,
   inputs: ['disabled', 'format', 'helperText', 'hideHeader', 'hourInterval', 'i18nErrorTimeUnparsable', 'i18nHourColumnHeader', 'i18nMillisecondColumnHeader', 'i18nMinuteColumnHeader', 'i18nSecondColumnHeader', 'i18nSelectTime', 'i18nTime', 'infoText', 'invalidText', 'label', 'millisecondInterval', 'minuteInterval', 'name', 'placeholder', 'readonly', 'required', 'secondInterval', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'focusInput', 'clear']
 })
 @Component({
   selector: 'ix-time-input',
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index c3ee619d03c..a34fd78973a 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -943,6 +943,10 @@ export namespace Components {
           * ARIA label for the previous month icon button Will be set as aria-label on the nested HTML button element
          */
         "ariaLabelPreviousMonthButton"?: string;
+        /**
+          * Clears the input field value and resets validation state. Sets the value to empty and removes touched state to suppress validation.
+         */
+        "clear": () => Promise<void>;
         /**
           * Disabled attribute
           * @default false
@@ -1969,6 +1973,10 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * Resets the input field validation state by removing the touched state and clearing validation states while preserving the current value.
+         */
+        "reset": () => Promise<void>;
         /**
           * Specifies whether to show the text as a tooltip.
          */
@@ -2580,6 +2588,10 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * Resets the input field validation state by removing the touched state and clearing validation states while preserving the current value.
+         */
+        "reset": () => Promise<void>;
         /**
           * Indicates if the stepper buttons should be shown
          */
@@ -3357,6 +3369,10 @@ export namespace Components {
           * Get the native textarea element.
          */
         "getNativeInputElement": () => Promise<HTMLTextAreaElement>;
+        /**
+          * Returns the validity state of the textarea field.
+         */
+        "getValidityState": () => Promise<ValidityState>;
         "hasValidValue": () => Promise<boolean>;
         /**
           * The helper text for the textarea field.
@@ -3404,6 +3420,10 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * Resets the input field validation state by removing the touched state and clearing validation states while preserving the current value.
+         */
+        "reset": () => Promise<void>;
         /**
           * Determines the resize behavior of the textarea field. Resizing can be enabled in one direction, both directions or completely disabled.
           * @default 'both'
@@ -3455,6 +3475,10 @@ export namespace Components {
      * @form-ready 
      */
     interface IxTimeInput {
+        /**
+          * Clears the input field value and resets validation state. Sets the value to empty and removes touched state to suppress validation.
+         */
+        "clear": () => Promise<void>;
         /**
           * Disabled attribute
           * @default false
diff --git a/packages/core/src/components/checkbox-group/checkbox-group.tsx b/packages/core/src/components/checkbox-group/checkbox-group.tsx
index 11d1199250d..3f67a81e80c 100644
--- a/packages/core/src/components/checkbox-group/checkbox-group.tsx
+++ b/packages/core/src/components/checkbox-group/checkbox-group.tsx
@@ -14,7 +14,13 @@ import {
   ValidationResults,
 } from '../utils/input';
 import { IxComponent } from '../utils/internal';
+import { useFieldGroupValidation } from '../utils/field-group-utils';
 import { makeRef } from '../utils/make-ref';
+import {
+  isFormNoValidate,
+  setupFormSubmitListener,
+  updateCheckboxValidationClasses,
+} from '../checkbox/checkbox-validation';
 
 /**
  * @form-ready
@@ -77,36 +83,39 @@ export class CheckboxGroup
   @State() isWarning = false;
 
   private touched = false;
+  private formSubmissionAttempt = false;
+  private cleanFormListener?: () => void;
   private readonly groupRef = makeRef<HTMLElement>();
 
-  get checkboxElements(): HTMLIxCheckboxElement[] {
-    return Array.from(this.hostElement.querySelectorAll('ix-checkbox'));
-  }
-
-  private readonly observer = new MutationObserver(() => {
-    this.checkForRequiredCheckbox();
-  });
+  private readonly validation = useFieldGroupValidation<HTMLIxCheckboxElement>(
+    this.hostElement,
+    {
+      selector: 'ix-checkbox',
+      isChecked: (el) => el.checked,
+      isRequired: (el) => el.required,
+      updateValidationClasses: updateCheckboxValidationClasses,
+      clearValidationState: this.clearValidationState.bind(this),
+    }
+  );
 
-  private checkForRequiredCheckbox() {
-    this.required = this.checkboxElements.some((checkbox) => checkbox.required);
+  get checkboxElements(): HTMLIxCheckboxElement[] {
+    return this.validation.getElements();
   }
 
-  connectedCallback(): void {
-    this.observer.observe(this.hostElement, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['checked', 'required'],
+  private setupFormListener() {
+    this.cleanFormListener = setupFormSubmitListener(this.hostElement, () => {
+      this.formSubmissionAttempt = true;
+      this.syncValidationClasses();
     });
   }
 
-  componentWillLoad(): void | Promise<void> {
-    this.checkForRequiredCheckbox();
+  connectedCallback(): void {
+    this.setupFormListener();
   }
 
   disconnectedCallback(): void {
-    if (this.observer) {
-      this.observer.disconnect();
+    if (this.cleanFormListener) {
+      this.cleanFormListener();
     }
   }
 
@@ -144,9 +153,132 @@ export class CheckboxGroup
     );
   }
 
+  private hasAnyChecked(): boolean {
+    return this.validation.hasAnyChecked();
+  }
+
+  private clearValidationState() {
+    this.hostElement.classList.remove('ix-invalid--required', 'ix-invalid');
+    if (this.invalidText) {
+      this.invalidText = '';
+    }
+    this.checkboxElements.forEach((el: any) => {
+      el.classList.remove('ix-invalid', 'ix-invalid--required');
+    });
+  }
+
+  private handleRequiredValidationShared(params: {
+    elements: HTMLElement[];
+    hasAnyChecked: boolean;
+    touched: boolean;
+    formSubmissionAttempt: boolean;
+    invalidText: string | undefined;
+    hostElement: HTMLElement;
+    clearValidationState: () => void;
+    updateValidationClasses: (
+      elements: HTMLElement[],
+      isChecked: boolean,
+      touched: boolean,
+      formSubmissionAttempt: boolean
+    ) => void;
+  }) {
+    const {
+      elements,
+      hasAnyChecked,
+      touched,
+      formSubmissionAttempt,
+      invalidText,
+      hostElement,
+      clearValidationState,
+      updateValidationClasses,
+    } = params;
+
+    if (isFormNoValidate(hostElement)) {
+      clearValidationState();
+      return;
+    }
+    const requiredElements = elements.filter(
+      (el) => (el as HTMLIxCheckboxElement).required
+    );
+    const isChecked = hasAnyChecked;
+    const anyTouched = requiredElements.some(
+      (el) =>
+        (
+          el as HTMLIxCheckboxElement & {
+            touched?: boolean;
+            formSubmissionAttempted?: boolean;
+          }
+        ).touched ||
+        (
+          el as HTMLIxCheckboxElement & {
+            touched?: boolean;
+            formSubmissionAttempted?: boolean;
+          }
+        ).formSubmissionAttempted
+    );
+    const isRequiredInvalid =
+      !isChecked && (touched || formSubmissionAttempt || anyTouched);
+    hostElement.classList.toggle('ix-invalid--required', isRequiredInvalid);
+    if (isRequiredInvalid) {
+      hostElement.classList.add('ix-invalid');
+      this.invalidText =
+        invalidText && invalidText.trim().length > 0
+          ? invalidText
+          : 'Please select the required field.';
+    } else {
+      hostElement.classList.remove('ix-invalid', 'ix-invalid--required');
+      if (invalidText === 'Please select the required field.') {
+        this.invalidText = '';
+      }
+    }
+    if (!isFormNoValidate(hostElement)) {
+      updateValidationClasses(
+        elements,
+        isChecked,
+        touched,
+        formSubmissionAttempt
+      );
+    }
+    if (isChecked) {
+      hostElement.classList.remove('ix-invalid', 'ix-invalid--required');
+    }
+  }
+
+  private handleRequiredValidation() {
+    this.handleRequiredValidationShared({
+      elements: this.checkboxElements,
+      hasAnyChecked: this.hasAnyChecked(),
+      touched: this.touched,
+      formSubmissionAttempt: this.formSubmissionAttempt,
+      invalidText: this.invalidText,
+      hostElement: this.hostElement,
+      clearValidationState: this.clearValidationState.bind(this),
+      updateValidationClasses: updateCheckboxValidationClasses,
+    });
+  }
+
+  async syncValidationClasses() {
+    if (isFormNoValidate(this.hostElement)) {
+      this.clearValidationState();
+      return;
+    }
+    if (this.required) {
+      this.handleRequiredValidation();
+    } else {
+      this.clearValidationState();
+    }
+  }
+
   render() {
     return (
-      <Host ref={this.groupRef} onIxBlur={() => (this.touched = true)}>
+      <Host
+        onIxBlur={() => {
+          if (!this.touched) {
+            this.touched = true;
+            this.syncValidationClasses();
+          }
+        }}
+      >
         <ix-field-wrapper
           label={this.label}
           helperText={this.helperText}
diff --git a/packages/core/src/components/checkbox-group/test/checkbox-group.ct.ts b/packages/core/src/components/checkbox-group/test/checkbox-group.ct.ts
index 2cab69d36bb..c2e2b2b2418 100644
--- a/packages/core/src/components/checkbox-group/test/checkbox-group.ct.ts
+++ b/packages/core/src/components/checkbox-group/test/checkbox-group.ct.ts
@@ -53,3 +53,138 @@ regressionTest('required', async ({ mount, page }) => {
   await expect(radioOption2).toHaveClass(/ix-invalid--required/);
   await expect(radioOption3).not.toHaveClass(/ix-invalid/);
 });
+
+regressionTest(
+  'validation works when noValidate is not set (default)',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-checkbox-group label="Required Options">
+          <ix-checkbox label="Option 1" value="option1" required></ix-checkbox>
+          <ix-checkbox label="Option 2" value="option2" required></ix-checkbox>
+          <ix-checkbox label="Option 3" value="option3" required></ix-checkbox>
+        </ix-checkbox-group>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const checkboxGroup = page.locator('ix-checkbox-group');
+    const checkbox1 = page.locator('ix-checkbox').nth(0);
+    const checkbox2 = page.locator('ix-checkbox').nth(1);
+    const checkbox3 = page.locator('ix-checkbox').nth(2);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await form.evaluate((form: HTMLFormElement) => {
+      form.addEventListener('submit', (e) => e.preventDefault());
+    });
+
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid/);
+    await submitButton.click();
+    await expect(checkboxGroup).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox1).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox2).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox3).toHaveClass(/ix-invalid--required/);
+    await checkbox1.click();
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox1).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox3).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'noValidate=true disables validation',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-checkbox-group label="Required Options">
+          <ix-checkbox label="Option 1" value="option1" required></ix-checkbox>
+          <ix-checkbox label="Option 2" value="option2" required></ix-checkbox>
+          <ix-checkbox label="Option 3" value="option3" required></ix-checkbox>
+        </ix-checkbox-group>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const checkboxGroup = page.locator('ix-checkbox-group');
+    const checkbox1 = page.locator('ix-checkbox').nth(0);
+    const checkbox2 = page.locator('ix-checkbox').nth(1);
+    const checkbox3 = page.locator('ix-checkbox').nth(2);
+    const submitButton = page.locator('button[type="submit"]');
+    await form.evaluate((form: HTMLFormElement) => {
+      form.addEventListener('submit', (e) => e.preventDefault());
+    });
+
+    await submitButton.click();
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox1).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox3).not.toHaveClass(/ix-invalid--required/);
+    await checkbox1.click();
+    await checkbox1.press('Tab');
+
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox1).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'validation behavior with blur when noValidate is not set',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-checkbox-group label="Required Options">
+          <ix-checkbox label="Option 1" value="option1" required></ix-checkbox>
+          <ix-checkbox label="Option 2" value="option2" required></ix-checkbox>
+        </ix-checkbox-group>
+      </form>
+    `
+    );
+
+    const checkboxGroup = page.locator('ix-checkbox-group');
+    const checkbox1 = page.locator('ix-checkbox').nth(0);
+    const checkbox2 = page.locator('ix-checkbox').nth(1);
+    await checkbox1.focus();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(checkboxGroup).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox1).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox2).toHaveClass(/ix-invalid--required/);
+  }
+);
+
+regressionTest(
+  'no validation on blur when noValidate=true',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-checkbox-group label="Required Options">
+          <ix-checkbox label="Option 1" value="option1" required></ix-checkbox>
+          <ix-checkbox label="Option 2" value="option2" required></ix-checkbox>
+        </ix-checkbox-group>
+      </form>
+    `
+    );
+
+    const checkboxGroup = page.locator('ix-checkbox-group');
+    const checkbox1 = page.locator('ix-checkbox').nth(0);
+    const checkbox2 = page.locator('ix-checkbox').nth(1);
+
+    await checkbox1.focus();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox1).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid/);
+  }
+);
diff --git a/packages/core/src/components/checkbox/checkbox-validation.ts b/packages/core/src/components/checkbox/checkbox-validation.ts
new file mode 100644
index 00000000000..b430d596482
--- /dev/null
+++ b/packages/core/src/components/checkbox/checkbox-validation.ts
@@ -0,0 +1,127 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export function isFormNoValidate(element: HTMLElement): boolean {
+  const form = element.closest('form');
+  if (!form) return false;
+  return (
+    form.hasAttribute('novalidate') ||
+    form.getAttribute('novalidate') === '' ||
+    form.dataset.novalidate !== undefined ||
+    form.hasAttribute('ngnovalidate')
+  );
+}
+
+export function getParentForm(element: HTMLElement): HTMLFormElement | null {
+  return element.closest('form');
+}
+
+export function hasAnyCheckboxChecked(
+  checkboxes: NodeListOf<HTMLElement> | HTMLElement[]
+): boolean {
+  return Array.from(checkboxes)
+    .filter((el: any) => el.required)
+    .some((el: any) => el.checked);
+}
+
+export function setupFormSubmitListener(
+  element: HTMLElement,
+  callback: () => void
+): (() => void) | undefined {
+  const form = getParentForm(element);
+  if (!form) return undefined;
+
+  const handler = () => callback();
+  form.addEventListener('submit', handler);
+
+  return () => {
+    form.removeEventListener('submit', handler);
+  };
+}
+
+function shouldSkipValidationAndClear(
+  checkboxes: NodeListOf<HTMLElement> | HTMLElement[]
+): boolean {
+  if (checkboxes.length > 0) {
+    const form = checkboxes[0].closest('form');
+    if (
+      form &&
+      (form.hasAttribute('novalidate') ||
+        form.getAttribute('novalidate') === '' ||
+        form.dataset.novalidate !== undefined ||
+        form.hasAttribute('ngnovalidate'))
+    ) {
+      Array.from(checkboxes).forEach((el: any) => {
+        el.classList.remove('ix-invalid--required', 'ix-invalid');
+      });
+      return true;
+    }
+  }
+  return false;
+}
+
+export function updateCheckboxValidationClasses(
+  checkboxes: NodeListOf<HTMLElement> | HTMLElement[],
+  isChecked: boolean,
+  touched: boolean,
+  formSubmissionAttempted: boolean
+) {
+  if (shouldSkipValidationAndClear(checkboxes)) {
+    return;
+  }
+
+  const requiredCheckboxes = Array.from(checkboxes).filter(
+    (el: any) => el.required
+  );
+
+  requiredCheckboxes.forEach((el: any) => {
+    if (el.checked) {
+      el.classList.remove('ix-invalid--required', 'ix-invalid');
+    }
+  });
+
+  if (isChecked) {
+    return;
+  }
+
+  const shouldShow = touched || formSubmissionAttempted;
+  requiredCheckboxes.forEach((el: any) => {
+    if (!el.checked && shouldShow) {
+      el.classList.add('ix-invalid--required', 'ix-invalid');
+    } else if (!el.checked) {
+      el.classList.remove('ix-invalid--required', 'ix-invalid');
+    }
+  });
+}
+
+export function updateGroupValidationClasses(
+  group: Element | null,
+  checkboxes: NodeListOf<HTMLElement> | HTMLElement[],
+  isChecked: boolean
+) {
+  if (!group) return;
+
+  if (shouldSkipValidationAndClear(checkboxes)) {
+    group.classList.remove('ix-invalid', 'ix-invalid--required');
+    return;
+  }
+
+  if (isChecked) {
+    group.classList.remove('ix-invalid', 'ix-invalid--required');
+    return;
+  }
+
+  const anyTouched = Array.from(checkboxes).some(
+    (el: any) => el.touched || el.formSubmissionAttempted
+  );
+  group.classList.toggle('ix-invalid--required', anyTouched);
+  if (anyTouched) {
+    group.classList.add('ix-invalid');
+  }
+}
diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index 241e6310353..bd5b1c1b926 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -23,6 +23,14 @@ import {
 import { a11yBoolean } from '../utils/a11y';
 import { HookValidationLifecycle, IxFormComponent } from '../utils/input';
 import { makeRef } from '../utils/make-ref';
+import {
+  getParentForm,
+  hasAnyCheckboxChecked,
+  isFormNoValidate,
+  setupFormSubmitListener,
+  updateCheckboxValidationClasses,
+  updateGroupValidationClasses,
+} from './checkbox-validation';
 
 /**
  * @form-ready
@@ -91,6 +99,111 @@ export class Checkbox implements IxFormComponent<string> {
   @Event() ixBlur!: EventEmitter<void>;
 
   private touched = false;
+  private formSubmissionAttempted = false;
+  private cleanupFormListener?: () => void;
+
+  connectedCallback(): void {
+    this.cleanupFormListener = setupFormSubmitListener(this.hostElement, () => {
+      this.formSubmissionAttempted = true;
+      this.syncValidationClasses();
+    });
+  }
+
+  disconnectedCallback(): void {
+    if (this.cleanupFormListener) {
+      this.cleanupFormListener();
+    }
+  }
+
+  private removeInvalidClassesFromCheckboxes(
+    checkboxes: NodeListOf<HTMLElement>
+  ) {
+    Array.from(checkboxes).forEach((el: any) => {
+      el.classList.remove('ix-invalid--required', 'ix-invalid');
+    });
+  }
+
+  private removeInvalidClassesFromGroup(checkboxes: NodeListOf<HTMLElement>) {
+    if (checkboxes.length > 0) {
+      const group = checkboxes[0].closest('ix-checkbox-group');
+      if (group) {
+        group.classList.remove('ix-invalid', 'ix-invalid--required');
+      }
+    }
+  }
+
+  private handleStandaloneCheckbox(isChecked: boolean) {
+    const isRequiredInvalid =
+      !isChecked && (this.touched || this.formSubmissionAttempted);
+    this.hostElement.classList.toggle(
+      'ix-invalid--required',
+      isRequiredInvalid
+    );
+    if (isChecked) {
+      this.hostElement.classList.remove('ix-invalid');
+    } else if (isRequiredInvalid) {
+      this.hostElement.classList.add('ix-invalid');
+    }
+  }
+
+  private syncValidationClasses() {
+    if (isFormNoValidate(this.hostElement) || !this.required) {
+      this.hostElement.classList.remove('ix-invalid--required', 'ix-invalid');
+      return;
+    }
+
+    let isChecked = this.checked;
+    const checkboxGroup = this.hostElement.closest('ix-checkbox-group');
+
+    if (!checkboxGroup && this.name) {
+      const form = getParentForm(this.hostElement);
+      const checkboxes: NodeListOf<HTMLElement> = form
+        ? form.querySelectorAll(`ix-checkbox[name="${this.name}"]`)
+        : document.querySelectorAll(`ix-checkbox[name="${this.name}"]`);
+
+      if (isFormNoValidate(this.hostElement)) {
+        this.removeInvalidClassesFromCheckboxes(checkboxes);
+        this.removeInvalidClassesFromGroup(checkboxes);
+        return;
+      }
+
+      isChecked = hasAnyCheckboxChecked(checkboxes);
+      updateCheckboxValidationClasses(
+        checkboxes,
+        isChecked,
+        this.touched,
+        this.formSubmissionAttempted
+      );
+      if (checkboxes.length > 0) {
+        const group = checkboxes[0].closest('ix-checkbox-group');
+        updateGroupValidationClasses(group, checkboxes, isChecked);
+      }
+      return;
+    }
+
+    if (checkboxGroup && this.name) {
+      const checkboxes: NodeListOf<HTMLElement> =
+        checkboxGroup.querySelectorAll(`ix-checkbox[name="${this.name}"]`);
+
+      if (isFormNoValidate(this.hostElement)) {
+        this.removeInvalidClassesFromCheckboxes(checkboxes);
+        updateGroupValidationClasses(checkboxGroup, checkboxes, true);
+        return;
+      }
+
+      isChecked = hasAnyCheckboxChecked(checkboxes);
+      updateCheckboxValidationClasses(
+        checkboxes,
+        isChecked,
+        this.touched,
+        this.formSubmissionAttempted
+      );
+      updateGroupValidationClasses(checkboxGroup, checkboxes, isChecked);
+      return;
+    }
+
+    this.handleStandaloneCheckbox(isChecked);
+  }
 
   private readonly inputRef = makeRef<HTMLInputElement>((checkboxRef) => {
     checkboxRef.checked = this.checked;
@@ -105,6 +218,7 @@ export class Checkbox implements IxFormComponent<string> {
   onCheckedChange() {
     this.touched = true;
     this.updateFormInternalValue();
+    this.syncValidationClasses();
   }
 
   @Watch('value')
@@ -114,6 +228,29 @@ export class Checkbox implements IxFormComponent<string> {
 
   componentWillLoad() {
     this.updateFormInternalValue();
+    this.syncValidationClasses();
+
+    if (this.required && this.name) {
+      const form = getParentForm(this.hostElement);
+      const checkboxes: NodeListOf<HTMLElement> = form
+        ? form.querySelectorAll(`ix-checkbox[name="${this.name}"]`)
+        : document.querySelectorAll(`ix-checkbox[name="${this.name}"]`);
+
+      const isChecked = hasAnyCheckboxChecked(checkboxes);
+
+      if (isChecked) {
+        Array.from(checkboxes).forEach((el: any) => {
+          el.classList.remove('ix-invalid--required', 'ix-invalid');
+        });
+
+        if (checkboxes.length > 0) {
+          const group = checkboxes[0].closest('ix-checkbox-group');
+          if (group) {
+            group.classList.remove('ix-invalid', 'ix-invalid--required');
+          }
+        }
+      }
+    }
   }
 
   updateFormInternalValue() {
@@ -191,8 +328,17 @@ export class Checkbox implements IxFormComponent<string> {
           checked: this.checked,
           indeterminate: this.indeterminate,
         }}
-        onFocus={() => (this.touched = true)}
-        onBlur={() => this.ixBlur.emit()}
+        onFocus={() => {
+          if (!this.touched) {
+            this.touched = true;
+            this.syncValidationClasses();
+          }
+        }}
+        onBlur={() => {
+          this.ixBlur.emit();
+          this.touched = true;
+          this.syncValidationClasses();
+        }}
       >
         <label>
           <input
diff --git a/packages/core/src/components/checkbox/tests/checkbox.ct.ts b/packages/core/src/components/checkbox/tests/checkbox.ct.ts
index 7db2aa0fd07..7420303886a 100644
--- a/packages/core/src/components/checkbox/tests/checkbox.ct.ts
+++ b/packages/core/src/components/checkbox/tests/checkbox.ct.ts
@@ -132,3 +132,229 @@ test.describe('accessibility', () => {
     await expect(checkbox).toHaveAttribute('aria-checked', 'true');
   });
 });
+
+regressionTest(
+  'validation works when noValidate is not set (default)',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-checkbox label="Accept Terms" value="terms" required></ix-checkbox>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const checkbox = page.locator('ix-checkbox');
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await expect(checkbox).not.toHaveClass(/ix-invalid/);
+    await submitButton.click();
+    await expect(checkbox).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox).toHaveClass(/ix-invalid/);
+    await checkbox.click();
+    await expect(checkbox).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'noValidate=true disables validation',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-checkbox label="Accept Terms" value="terms" required></ix-checkbox>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const checkbox = page.locator('ix-checkbox');
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await submitButton.click();
+    await expect(checkbox).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox).not.toHaveClass(/ix-invalid/);
+    await checkbox.focus();
+    await page.keyboard.press('Tab');
+
+    await expect(checkbox).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'validation behavior with blur when noValidate is not set',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-checkbox label="Accept Terms" value="terms" required></ix-checkbox>
+        <input type="text" placeholder="Next field" />
+      </form>
+    `
+    );
+
+    const checkbox = page.locator('ix-checkbox');
+    await checkbox.focus();
+    await page.keyboard.press('Tab');
+    await expect(checkbox).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox).toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'no validation on blur when noValidate=true',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-checkbox label="Accept Terms" value="terms" required></ix-checkbox>
+        <input type="text" placeholder="Next field" />
+      </form>
+    `
+    );
+
+    const checkbox = page.locator('ix-checkbox');
+    await checkbox.focus();
+    await page.keyboard.press('Tab');
+    await expect(checkbox).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'validation with named checkbox group when noValidate is not set',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-checkbox label="Option 1" name="options" value="option1" required></ix-checkbox>
+        <ix-checkbox label="Option 2" name="options" value="option2" required></ix-checkbox>
+        <ix-checkbox label="Option 3" name="options" value="option3" required></ix-checkbox>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const checkbox1 = page.locator('ix-checkbox').nth(0);
+    const checkbox2 = page.locator('ix-checkbox').nth(1);
+    const checkbox3 = page.locator('ix-checkbox').nth(2);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await submitButton.click();
+    await expect(checkbox1).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox2).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox3).toHaveClass(/ix-invalid--required/);
+    await checkbox1.click();
+    await expect(checkbox1).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox3).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'noValidate=true disables validation for named checkbox group',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-checkbox label="Option 1" name="options" value="option1" required></ix-checkbox>
+        <ix-checkbox label="Option 2" name="options" value="option2" required></ix-checkbox>
+        <ix-checkbox label="Option 3" name="options" value="option3" required></ix-checkbox>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const checkbox1 = page.locator('ix-checkbox').nth(0);
+    const checkbox2 = page.locator('ix-checkbox').nth(1);
+    const checkbox3 = page.locator('ix-checkbox').nth(2);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await submitButton.click();
+    await expect(checkbox1).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox1).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox3).not.toHaveClass(/ix-invalid--required/);
+    await checkbox1.focus();
+    await page.keyboard.press('Tab');
+
+    await expect(checkbox1).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'validation with checkbox inside checkbox-group when noValidate is not set',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-checkbox-group label="Options">
+          <ix-checkbox label="Option 1" name="grouped" value="option1" required></ix-checkbox>
+          <ix-checkbox label="Option 2" name="grouped" value="option2" required></ix-checkbox>
+        </ix-checkbox-group>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const checkboxGroup = page.locator('ix-checkbox-group');
+    const checkbox1 = page.locator('ix-checkbox').nth(0);
+    const checkbox2 = page.locator('ix-checkbox').nth(1);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await submitButton.click();
+    await expect(checkboxGroup).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox1).toHaveClass(/ix-invalid--required/);
+    await expect(checkbox2).toHaveClass(/ix-invalid--required/);
+    await checkbox1.click();
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox1).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'noValidate=true disables validation for checkbox inside checkbox-group',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-checkbox-group label="Options">
+          <ix-checkbox label="Option 1" name="grouped" value="option1" required></ix-checkbox>
+          <ix-checkbox label="Option 2" name="grouped" value="option2" required></ix-checkbox>
+        </ix-checkbox-group>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const checkboxGroup = page.locator('ix-checkbox-group');
+    const checkbox1 = page.locator('ix-checkbox').nth(0);
+    const checkbox2 = page.locator('ix-checkbox').nth(1);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await submitButton.click();
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkboxGroup).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox1).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox1).not.toHaveClass(/ix-invalid/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid--required/);
+    await expect(checkbox2).not.toHaveClass(/ix-invalid/);
+  }
+);
diff --git a/packages/core/src/components/date-input/date-input.tsx b/packages/core/src/components/date-input/date-input.tsx
index fc46c3d8ed5..63afeb19b3e 100644
--- a/packages/core/src/components/date-input/date-input.tsx
+++ b/packages/core/src/components/date-input/date-input.tsx
@@ -14,7 +14,6 @@ import {
   Element,
   Event,
   EventEmitter,
-  Host,
   Method,
   Prop,
   State,
@@ -27,7 +26,6 @@ import {
   DisposableChangesAndVisibilityObservers,
   addDisposableChangesAndVisibilityObservers,
   adjustPaddingForStartAndEnd,
-  handleSubmitOnEnterKeydown,
 } from '../input/input.util';
 import {
   ClassMutationObserver,
@@ -36,6 +34,21 @@ import {
   ValidationResults,
   createClassMutationObserver,
   getValidationText,
+  shouldSuppressInternalValidation,
+  syncState,
+  watchValue,
+  onInput,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  getNativeInput,
+  renderFieldWrapper,
+  createEventConfig,
+  createInputMethods,
+  createDropdownMethods,
+  createKeyDownHandler,
+  handleValidationLifecycle,
 } from '../utils/input';
 import { makeRef } from '../utils/make-ref';
 import type { DateInputValidityState } from './date-input.types';
@@ -78,7 +91,13 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
   @Prop({ reflect: true, mutable: true }) value?: string = '';
 
   @Watch('value') watchValuePropHandler(newValue: string) {
-    this.onInput(newValue);
+    watchValue({
+      newValue,
+      required: this.required,
+      onInput: (value: string) => void this.onInput(value),
+      setTouched: (touched: boolean) => (this.touched = touched),
+      isClearing: this._isClearing,
+    });
   }
 
   /**
@@ -113,6 +132,11 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
    */
   @Prop() required?: boolean;
 
+  @Watch('required')
+  onRequiredChange() {
+    this.syncValidationClasses();
+  }
+
   /**
    * Helper text below the input field
    */
@@ -232,6 +256,7 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
   @State() isInfo = false;
   @State() isWarning = false;
   @State() focus = false;
+  @State() suppressValidation = false;
 
   private readonly slotStartRef = makeRef<HTMLDivElement>();
   private readonly slotEndRef = makeRef<HTMLDivElement>();
@@ -243,6 +268,7 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
   private classObserver?: ClassMutationObserver;
   private invalidReason?: string;
   private touched = false;
+  private _isClearing = false;
 
   private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;
 
@@ -300,6 +326,10 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
   /** @internal */
   @Method()
   hasValidValue(): Promise<boolean> {
+    if (!this.required) {
+      return Promise.resolve(true);
+    }
+
     return Promise.resolve(!!this.value);
   }
 
@@ -311,8 +341,12 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
 
   async onInput(value: string | undefined) {
     this.value = value;
+    this.suppressValidation = await shouldSuppressInternalValidation(this);
+
     if (!value) {
-      this.valueChange.emit(value);
+      this.isInputInvalid = false;
+      this.invalidReason = undefined;
+      this.emitChangesAndSync(value);
       return;
     }
 
@@ -320,21 +354,53 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
       return;
     }
 
+    if (this.suppressValidation) {
+      this.isInputInvalid = false;
+      this.invalidReason = undefined;
+      this.handleValidInput(value);
+      return;
+    }
+
     const date = DateTime.fromFormat(value, this.format);
     const minDate = DateTime.fromFormat(this.minDate, this.format);
     const maxDate = DateTime.fromFormat(this.maxDate, this.format);
 
-    this.isInputInvalid = !date.isValid || date < minDate || date > maxDate;
+    const isDateInvalid = !date.isValid || date < minDate || date > maxDate;
+    this.isInputInvalid = isDateInvalid;
+    this.invalidReason = isDateInvalid
+      ? date.invalidReason || undefined
+      : undefined;
 
-    if (this.isInputInvalid) {
-      this.invalidReason = date.invalidReason || undefined;
-      this.from = undefined;
+    if (isDateInvalid) {
+      this.handleInvalidInput(value);
     } else {
-      this.updateFormInternalValue(value);
-      this.closeDropdown();
+      this.handleValidInput(value);
     }
+  }
+
+  private emitChangesAndSync(value: string | undefined): void {
+    syncState({
+      updateFormInternalValue: (val) => this.updateFormInternalValue(val),
+      valueChange: this.valueChange,
+      value: value,
+      hostElement: this.hostElement,
+      suppressValidation: this.suppressValidation,
+      required: this.required,
+      touched: this.touched,
+      isInputInvalid: this.isInputInvalid,
+    });
+  }
 
-    this.valueChange.emit(value);
+  private handleValidInput(value: string | undefined): void {
+    this.from = value;
+    this.closeDropdown();
+    this.emitChangesAndSync(value);
+  }
+
+  private handleInvalidInput(value: string | undefined): void {
+    this.touched = true;
+    this.from = undefined;
+    this.emitChangesAndSync(value);
   }
 
   onCalenderClick(event: Event) {
@@ -355,18 +421,34 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
   }
 
   private checkClassList() {
-    this.isInvalid = this.hostElement.classList.contains('ix-invalid');
+    this.isInvalid = this.dropdownMethods.checkClassList();
+  }
+
+  private getEventConfig() {
+    return createEventConfig({
+      show: this.show,
+      setTouched: (touched: boolean) => (this.touched = touched),
+      onInput: (value: string) => void this.onInput(value),
+      openDropdown: () => this.openDropdown(),
+      ixFocus: this.ixFocus,
+      ixBlur: this.ixBlur,
+      syncValidationClasses: () => this.syncValidationClasses(),
+      handleInputKeyDown: (event: KeyboardEvent) =>
+        this.handleInputKeyDown(event),
+      alwaysSetTouchedOnBlur: true,
+    });
   }
 
   private handleInputKeyDown(event: KeyboardEvent) {
-    handleSubmitOnEnterKeydown(
-      event,
+    return createKeyDownHandler(
       this.suppressSubmitOnEnter,
-      this.formInternals.form
-    );
+      this.formInternals
+    )(event);
   }
 
   private renderInput() {
+    const eventConfig = this.getEventConfig();
+
     return (
       <div class="input-wrapper">
         <SlotStart
@@ -387,25 +469,11 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
           value={this.value ?? ''}
           placeholder={this.placeholder}
           name={this.name}
-          onInput={(event) => {
-            const target = event.target as HTMLInputElement;
-            this.onInput(target.value);
-          }}
-          onClick={(event) => {
-            if (this.show) {
-              event.stopPropagation();
-              event.preventDefault();
-            }
-          }}
-          onFocus={async () => {
-            this.openDropdown();
-            this.ixFocus.emit();
-          }}
-          onBlur={() => {
-            this.ixBlur.emit();
-            this.touched = true;
-          }}
-          onKeyDown={(event) => this.handleInputKeyDown(event)}
+          onInput={onInput(eventConfig)}
+          onClick={onClick(eventConfig)}
+          onFocus={onFocus(eventConfig)}
+          onBlur={onBlur(eventConfig)}
+          onKeyDown={onKeyDown(eventConfig)}
           style={{
             textAlign: this.textAlignment,
           }}
@@ -428,17 +496,20 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
   }
 
   @HookValidationLifecycle()
-  hookValidationLifecycle({
-    isInfo,
-    isInvalid,
-    isInvalidByRequired,
-    isValid,
-    isWarning,
-  }: ValidationResults) {
-    this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
-    this.isInfo = isInfo;
-    this.isValid = isValid;
-    this.isWarning = isWarning;
+  hookValidationLifecycle(results: ValidationResults) {
+    const shouldShowInputInvalid = this.isInputInvalid && this.touched;
+
+    handleValidationLifecycle(
+      this.suppressValidation,
+      shouldShowInputInvalid,
+      results,
+      {
+        setIsInvalid: (value) => (this.isInvalid = value),
+        setIsInfo: (value) => (this.isInfo = value),
+        setIsValid: (value) => (this.isValid = value),
+        setIsWarning: (value) => (this.isWarning = value),
+      }
+    );
   }
 
   @Watch('isInputInvalid')
@@ -448,6 +519,16 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
       patternMismatch: state.patternMismatch,
       invalidReason: this.invalidReason,
     });
+
+    if (this.suppressValidation) {
+      return;
+    }
+
+    const shouldShowInputInvalid = this.isInputInvalid && this.touched;
+
+    if (shouldShowInputInvalid) {
+      this.isInvalid = true;
+    }
   }
 
   /** @internal */
@@ -463,7 +544,37 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
    */
   @Method()
   getNativeInputElement(): Promise<HTMLInputElement> {
-    return this.inputElementRef.waitForCurrent();
+    return getNativeInput(this.inputElementRef);
+  }
+
+  private get commonMethods() {
+    return createInputMethods({
+      inputElementRef: this.inputElementRef,
+      touched: this.touched,
+      hostElement: this.hostElement,
+      suppressValidation: this.suppressValidation,
+      required: this.required,
+      value: this.value,
+      isInputInvalid: this.isInputInvalid,
+    });
+  }
+
+  private get dropdownMethods() {
+    return createDropdownMethods({
+      dropdownElementRef: this.dropdownElementRef,
+      hostElement: this.hostElement,
+      show: this.show,
+      touched: this.touched,
+      openDropdown: async () => {
+        return openDropdownUtil(this.dropdownElementRef);
+      },
+      ixFocus: this.ixFocus,
+      ixBlur: this.ixBlur,
+      syncValidationClasses: () => this.syncValidationClasses(),
+      onInput: (value: string) => void this.onInput(value),
+      handleInputKeyDown: (event: KeyboardEvent) =>
+        this.handleInputKeyDown(event),
+    });
   }
 
   /**
@@ -471,7 +582,7 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
    */
   @Method()
   async focusInput(): Promise<void> {
-    return (await this.getNativeInputElement()).focus();
+    return this.commonMethods.focusInput();
   }
 
   /**
@@ -480,70 +591,86 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
    */
   @Method()
   isTouched(): Promise<boolean> {
-    return Promise.resolve(this.touched);
+    return this.commonMethods.isTouched();
+  }
+
+  /**
+   * @internal
+   */
+  syncValidationClasses(): void {
+    return this.commonMethods.syncValidationClasses();
+  }
+
+  /**
+   * Clears the input field value and resets validation state.
+   * Sets the value to empty and removes touched state to suppress validation.
+   */
+  @Method()
+  async clear(): Promise<void> {
+    this._isClearing = true;
+    this.touched = false;
+    this.isInputInvalid = false;
+    this.isInvalid = false;
+    this.invalidReason = undefined;
+    this.value = '';
+    this.from = undefined;
+    this.updateFormInternalValue('');
+    this.valueChange.emit('');
+    this.syncValidationClasses();
+    this._isClearing = false;
   }
 
   render() {
     const invalidText = getValidationText(
-      this.isInputInvalid,
+      this.isInputInvalid && !this.suppressValidation,
       this.invalidText,
       this.i18nErrorDateUnparsable
     );
 
-    return (
-      <Host
-        class={{
-          disabled: this.disabled,
-          readonly: this.readonly,
-        }}
-      >
-        <ix-field-wrapper
-          label={this.label}
-          helperText={this.helperText}
-          isInvalid={this.isInvalid}
-          invalidText={invalidText}
-          infoText={this.infoText}
-          isInfo={this.isInfo}
-          isWarning={this.isWarning}
-          warningText={this.warningText}
-          isValid={this.isValid}
-          validText={this.validText}
-          showTextAsTooltip={this.showTextAsTooltip}
-          required={this.required}
-          controlRef={this.inputElementRef}
-        >
-          {this.renderInput()}
-        </ix-field-wrapper>
-        <ix-dropdown
-          data-testid="date-dropdown"
-          trigger={this.inputElementRef.waitForCurrent()}
-          ref={this.dropdownElementRef}
-          closeBehavior="outside"
-          suppressOverflowBehavior={true}
-          show={this.show}
-          onShowChanged={(event) => {
-            this.show = event.detail;
+    return renderFieldWrapper({
+      host: this.hostElement,
+      disabled: this.disabled,
+      readonly: this.readonly,
+      label: this.label,
+      helper: this.helperText,
+      invalid: this.isInvalid,
+      invalidText,
+      info: this.infoText,
+      isInfo: this.isInfo,
+      warning: this.isWarning,
+      warningText: this.warningText,
+      valid: this.isValid,
+      validText: this.validText,
+      tooltip: this.showTextAsTooltip,
+      required: this.required,
+      inputRef: this.inputElementRef,
+      input: this.renderInput(),
+      dropdown: (
+        <ix-date-picker
+          ref={this.datepickerRef}
+          format={this.format}
+          locale={this.locale}
+          singleSelection
+          from={this.from ?? ''}
+          minDate={this.minDate}
+          maxDate={this.maxDate}
+          onDateChange={(event) => {
+            const { from } = event.detail;
+            this.onInput(from);
           }}
-        >
-          <ix-date-picker
-            ref={this.datepickerRef}
-            format={this.format}
-            locale={this.locale}
-            singleSelection
-            from={this.from ?? ''}
-            minDate={this.minDate}
-            maxDate={this.maxDate}
-            onDateChange={(event) => {
-              const { from } = event.detail;
-              this.onInput(from);
-            }}
-            showWeekNumbers={this.showWeekNumbers}
-            ariaLabelNextMonthButton={this.ariaLabelNextMonthButton}
-            ariaLabelPreviousMonthButton={this.ariaLabelPreviousMonthButton}
-            embedded
-          ></ix-date-picker>
-        </ix-dropdown>
-      </Host>
-    );
+          showWeekNumbers={this.showWeekNumbers}
+          ariaLabelNextMonthButton={this.ariaLabelNextMonthButton}
+          ariaLabelPreviousMonthButton={this.ariaLabelPreviousMonthButton}
+          embedded
+        ></ix-date-picker>
+      ),
+      testId: 'date-dropdown',
+      trigger: () => this.inputElementRef.waitForCurrent(),
+      dropdownRef: this.dropdownElementRef,
+      show: this.show,
+      onShow: (event) => {
+        this.show = event.detail;
+      },
+    });
   }
 }
diff --git a/packages/core/src/components/date-input/tests/date-input.ct.ts b/packages/core/src/components/date-input/tests/date-input.ct.ts
index 342a06a6324..2c0c316acef 100644
--- a/packages/core/src/components/date-input/tests/date-input.ct.ts
+++ b/packages/core/src/components/date-input/tests/date-input.ct.ts
@@ -222,3 +222,301 @@ regressionTest(
     ).toHaveText('Custom error message');
   }
 );
+
+regressionTest(
+  'Required input: Invalid input > Removing value with keyboard > Stays invalid',
+  async ({ page, mount }) => {
+    await mount(
+      `<ix-date-input required value="invalid-date"></ix-date-input>`
+    );
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.selectText();
+    await input.press('Delete');
+    await input.blur();
+
+    await expect(dateInput).toHaveClass(/ix-invalid--required/);
+  }
+);
+
+regressionTest(
+  'Required input: Invalid input > Remove touched state > Valid again',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input required value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.selectText();
+    await input.fill('invalid-date');
+    await input.blur();
+
+    await dateInput.evaluate((el: any) => el.clear());
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'Required input: Invalid input > Programmatically setting to empty > Stays invalid',
+  async ({ page, mount }) => {
+    await mount(
+      `<ix-date-input required value="invalid-date"></ix-date-input>`
+    );
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.blur();
+
+    await dateInput.evaluate((el: any) => {
+      el.value = '';
+    });
+
+    await expect(dateInput).toHaveClass(/ix-invalid--required/);
+  }
+);
+
+regressionTest(
+  'Required input: Valid input > Removing value with keyboard > It is invalid',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input required value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.selectText();
+    await input.press('Delete');
+    await input.blur();
+
+    await expect(dateInput).toHaveClass(/ix-invalid--required/);
+  }
+);
+
+regressionTest(
+  'Required input: Valid input > Remove touched state > Valid',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input required value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.blur();
+
+    await dateInput.evaluate((el: any) => el.clear());
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'Required input: Valid input > Programmatically setting to empty > It is invalid',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input required value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.blur();
+
+    await dateInput.evaluate((el: any) => {
+      el.value = '';
+    });
+
+    await expect(dateInput).toHaveClass(/ix-invalid--required/);
+  }
+);
+
+regressionTest(
+  'Not required input: Invalid input > Removing value with keyboard > Valid',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input value="invalid-date"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.selectText();
+    await input.press('Delete');
+    await input.blur();
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'Not required input: Invalid input > Remove touched state > Valid again',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.selectText();
+    await input.fill('invalid-date');
+    await input.blur();
+
+    await dateInput.evaluate((el: any) => el.clear());
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'Not required input: Invalid input > Programmatically setting to empty > Valid',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input value="invalid-date"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.blur();
+
+    await dateInput.evaluate((el: any) => {
+      el.value = '';
+    });
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'Not required input: Valid input > Removing value with keyboard > Valid',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.selectText();
+    await input.press('Delete');
+    await input.blur();
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'Not required input: Valid input > Remove touched state > Valid',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.blur();
+
+    await dateInput.evaluate((el: any) => el.clear());
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'Not required input: Valid input > Programmatically setting to empty > Valid',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.blur();
+
+    await dateInput.evaluate((el: any) => {
+      el.value = '';
+    });
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'novalidate form suppresses validation for required field',
+  async ({ page, mount }) => {
+    await mount(`
+      <form novalidate>
+        <ix-date-input required value="2024/05/05"></ix-date-input>
+      </form>
+    `);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.selectText();
+    await input.press('Delete');
+    await input.blur();
+
+    await expect(input).not.toHaveClass(/is-invalid/);
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+  }
+);
+
+regressionTest(
+  'novalidate form suppresses validation for non-required field',
+  async ({ page, mount }) => {
+    await mount(`
+      <form novalidate>
+        <ix-date-input value="2024/05/05"></ix-date-input>
+      </form>
+    `);
+
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.blur();
+
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);
+
+regressionTest(
+  'Validation works after switching between required and non-required',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await input.focus();
+    await input.selectText();
+    await input.press('Delete');
+    await input.blur();
+
+    await expect(input).not.toHaveClass(/is-invalid/);
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+
+    await dateInput.evaluate((el: any) => {
+      el.required = true;
+    });
+
+    await expect(dateInput).toHaveClass(/ix-invalid--required/);
+
+    await dateInput.evaluate((el: any) => {
+      el.required = false;
+    });
+
+    await expect(dateInput).not.toHaveClass(/ix-invalid--required/);
+  }
+);
diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx
index edb1fccf189..8da9240a45b 100644
--- a/packages/core/src/components/date-picker/date-picker.tsx
+++ b/packages/core/src/components/date-picker/date-picker.tsx
@@ -315,12 +315,8 @@ export class DatePicker implements IxDatePickerComponent {
   componentWillLoad() {
     this.setTranslations();
 
-    this.currFromDate = this.from
-      ? DateTime.fromFormat(this.from, this.format)
-      : undefined;
-    this.currToDate = this.to
-      ? DateTime.fromFormat(this.to, this.format)
-      : undefined;
+    this.currFromDate = this.from ? this.parseDateString(this.from) : undefined;
+    this.currToDate = this.to ? this.parseDateString(this.to) : undefined;
 
     const year = this.currFromDate?.year ?? this.getDateTimeNow().year;
     this.startYear = year - 5;
diff --git a/packages/core/src/components/field-label/field-label.tsx b/packages/core/src/components/field-label/field-label.tsx
index 9a4b657ea40..9bc89c5bb81 100644
--- a/packages/core/src/components/field-label/field-label.tsx
+++ b/packages/core/src/components/field-label/field-label.tsx
@@ -45,6 +45,13 @@ export class FormFieldLabel implements IxComponent {
   /** @internal */
   @Prop({ mutable: true }) isInvalid: boolean = false;
 
+  private explicitIsInvalid: boolean = false;
+
+  @Watch('isInvalid')
+  isInvalidChanged(newValue: boolean) {
+    this.explicitIsInvalid = newValue;
+  }
+
   private readonly htmlForObserver = new MutationObserver(() =>
     this.checkForInternalState()
   );
@@ -106,7 +113,7 @@ export class FormFieldLabel implements IxComponent {
       this.controlRefClassObserver.destroy();
     }
 
-    if (this.controlRef) {
+    if (this.controlRef && !this.htmlFor) {
       const input = await this.controlRef.waitForCurrent();
 
       this.controlRefClassObserver = createClassMutationObserver(input, () =>
@@ -128,6 +135,10 @@ export class FormFieldLabel implements IxComponent {
   }
 
   private checkForInvalidState(elementToCheck: HTMLElement) {
+    if (this.explicitIsInvalid) {
+      return;
+    }
+
     this.isInvalid =
       elementToCheck.classList.contains('is-invalid') ||
       elementToCheck.classList.contains('ix-invalid');
@@ -145,6 +156,8 @@ export class FormFieldLabel implements IxComponent {
 
         this.registerHtmlForClassObserver(forElement);
         this.checkForInvalidState(forElement);
+
+        return;
       }
     }
 
diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
index baa86b27e65..ecf00c9c89d 100644
--- a/packages/core/src/components/input/input.tsx
+++ b/packages/core/src/components/input/input.tsx
@@ -37,6 +37,7 @@ import {
   getAriaAttributesForInput,
   mapValidationResult,
   onInputBlur,
+  resetInputValidation,
 } from './input.util';
 
 let inputIds = 0;
@@ -274,6 +275,15 @@ export class Input implements IxInputFieldComponent<string> {
     return Promise.resolve(this.touched);
   }
 
+  /**
+   * Resets the input field validation state by removing the touched state
+   * and clearing validation states while preserving the current value.
+   */
+  @Method()
+  async reset(): Promise<void> {
+    return resetInputValidation(this);
+  }
+
   render() {
     const inputAria: A11yAttributes = getAriaAttributesForInput(this);
     return (
diff --git a/packages/core/src/components/input/input.util.ts b/packages/core/src/components/input/input.util.ts
index 3107d2697aa..9a0a28020bf 100644
--- a/packages/core/src/components/input/input.util.ts
+++ b/packages/core/src/components/input/input.util.ts
@@ -219,3 +219,25 @@ export function handleSubmitOnEnterKeydown(
     form.requestSubmit();
   }
 }
+
+export async function resetInputValidation<T>(
+  comp: IxInputFieldComponent<T>
+): Promise<void> {
+  (comp as any).touched = false;
+
+  const input = await comp.getNativeInputElement();
+  delete input.dataset.ixTouched;
+
+  comp.isInvalid = false;
+  comp.isValid = false;
+  comp.isInfo = false;
+  comp.isWarning = false;
+  (comp as any).isInvalidByRequired = false;
+
+  comp.hostElement.dispatchEvent(
+    new CustomEvent('valueChange', {
+      detail: comp.value,
+      bubbles: true,
+    })
+  );
+}
diff --git a/packages/core/src/components/input/number-input.tsx b/packages/core/src/components/input/number-input.tsx
index e0eda27824b..e52980930b7 100644
--- a/packages/core/src/components/input/number-input.tsx
+++ b/packages/core/src/components/input/number-input.tsx
@@ -36,6 +36,7 @@ import {
   DisposableChangesAndVisibilityObservers,
   mapValidationResult,
   onInputBlur,
+  resetInputValidation,
 } from './input.util';
 
 let numberInputIds = 0;
@@ -422,6 +423,15 @@ export class NumberInput implements IxInputFieldComponent<number> {
     return Promise.resolve(this.touched);
   }
 
+  /**
+   * Resets the input field validation state by removing the touched state
+   * and clearing validation states while preserving the current value.
+   */
+  @Method()
+  async reset(): Promise<void> {
+    return resetInputValidation(this);
+  }
+
   render() {
     const showStepperButtons =
       this.showStepperButtons && (this.disabled || this.readonly) === false;
diff --git a/packages/core/src/components/input/tests/validation.ct.ts b/packages/core/src/components/input/tests/validation.ct.ts
index 8247abb7b1e..3ace5f4f429 100644
--- a/packages/core/src/components/input/tests/validation.ct.ts
+++ b/packages/core/src/components/input/tests/validation.ct.ts
@@ -250,7 +250,7 @@ test.describe('prevent initial require validation', async () => {
 
       const inputComponent = page.locator(selector);
       const input = inputComponent.locator(
-        selector !== 'ix-textarea' ? 'input' : 'textarea'
+        selector === 'ix-textarea' ? 'textarea' : 'input'
       );
 
       await expect(inputComponent).toBeVisible();
@@ -263,3 +263,66 @@ test.describe('prevent initial require validation', async () => {
     });
   });
 });
+
+test.describe('reset method', () => {
+  ['ix-input', 'ix-number-input', 'ix-textarea'].forEach((selector) => {
+    test(`${selector} - should reset validation state when required field becomes invalid then reset`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(`<${selector} required></${selector}>`);
+
+      const inputComponent = page.locator(selector);
+      const input = inputComponent.locator(
+        selector === 'ix-textarea' ? 'textarea' : 'input'
+      );
+
+      await expect(inputComponent).not.toHaveClass(/ix-invalid/);
+
+      await input.click();
+      await input.fill('');
+      await input.blur();
+
+      await expect(inputComponent).toHaveClass(/ix-invalid--required/);
+
+      await inputComponent.evaluate((element: any) => element.reset());
+
+      await expect(inputComponent).not.toHaveClass(/ix-invalid--required/);
+      await expect(inputComponent).not.toHaveClass(/ix-invalid/);
+    });
+
+    test(`${selector} - should reset validation state with value then make invalid then reset`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(`<${selector} required></${selector}>`);
+
+      const inputComponent = page.locator(selector);
+      const input = inputComponent.locator(
+        selector === 'ix-textarea' ? 'textarea' : 'input'
+      );
+
+      await input.click();
+      // Use appropriate test values for different input types
+      if (selector === 'ix-number-input') {
+        await input.fill('123');
+      } else {
+        await input.fill('test value');
+      }
+      await input.blur();
+
+      await expect(inputComponent).not.toHaveClass(/ix-invalid/);
+
+      await input.click();
+      await input.fill('');
+      await input.blur();
+
+      await expect(inputComponent).toHaveClass(/ix-invalid--required/);
+
+      await inputComponent.evaluate((element: any) => element.reset());
+
+      await expect(inputComponent).not.toHaveClass(/ix-invalid--required/);
+      await expect(inputComponent).not.toHaveClass(/ix-invalid/);
+    });
+  });
+});
diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx
index 0a120966fc5..c768bd13bf3 100644
--- a/packages/core/src/components/input/textarea.tsx
+++ b/packages/core/src/components/input/textarea.tsx
@@ -27,7 +27,11 @@ import {
 } from '../utils/input';
 import { makeRef } from '../utils/make-ref';
 import { TextareaElement } from './input.fc';
-import { mapValidationResult, onInputBlur } from './input.util';
+import {
+  mapValidationResult,
+  onInputBlur,
+  resetInputValidation,
+} from './input.util';
 import type { TextareaResizeBehavior } from './textarea.types';
 
 /**
@@ -259,6 +263,15 @@ export class Textarea implements IxInputFieldComponent<string> {
     return this.textAreaRef.waitForCurrent();
   }
 
+  /**
+   * Returns the validity state of the textarea field.
+   */
+  @Method()
+  async getValidityState(): Promise<ValidityState> {
+    const textarea = await this.textAreaRef.waitForCurrent();
+    return textarea.validity;
+  }
+
   /**
    * Focuses the input field
    */
@@ -276,6 +289,15 @@ export class Textarea implements IxInputFieldComponent<string> {
     return Promise.resolve(this.touched);
   }
 
+  /**
+   * Resets the input field validation state by removing the touched state
+   * and clearing validation states while preserving the current value.
+   */
+  @Method()
+  async reset(): Promise<void> {
+    return resetInputValidation(this);
+  }
+
   render() {
     return (
       <Host
diff --git a/packages/core/src/components/radio-group/radio-group.tsx b/packages/core/src/components/radio-group/radio-group.tsx
index 289b6479b42..0768b4a0553 100644
--- a/packages/core/src/components/radio-group/radio-group.tsx
+++ b/packages/core/src/components/radio-group/radio-group.tsx
@@ -25,7 +25,14 @@ import {
   FieldWrapperInterface,
   IxFormValidationState,
 } from '../utils/input';
+import {
+  isFormNoValidate,
+  setupFormSubmitListener,
+  updateRadioValidationClasses,
+  clearRadioGroupValidationState,
+} from '../radio/radio-validation';
 import { makeRef } from '../utils/make-ref';
+import { useFieldGroupValidation } from '../utils/field-group-utils';
 
 /**
  * @form-ready
@@ -102,78 +109,38 @@ export class RadiobuttonGroup
   @State() isWarning = false;
 
   private touched = false;
+  private formSubmissionAttempted = false;
+  private cleanupFormListener?: () => void;
   private readonly groupRef = makeRef<HTMLElement>();
 
-  private readonly observer = new MutationObserver(() => {
-    this.ensureOnlyLastRadioChecked();
-    this.hasNestedRequiredRadio();
-  });
+  private readonly radioValidation =
+    useFieldGroupValidation<HTMLIxRadioElement>(this.hostElement, {
+      selector: 'ix-radio',
+      isChecked: (el) => el.checked,
+      isRequired: (el) => el.required,
+      updateValidationClasses: updateRadioValidationClasses,
+      clearValidationState: this.clearValidationState.bind(this),
+    });
 
   private get radiobuttonElements() {
-    return Array.from(this.hostElement.querySelectorAll('ix-radio'));
+    return this.radioValidation.getElements();
   }
 
-  connectedCallback(): void {
-    this.observer.observe(this.hostElement, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['checked', 'required'],
+  private setupFormListener() {
+    this.cleanupFormListener = setupFormSubmitListener(this.hostElement, () => {
+      this.formSubmissionAttempted = true;
+      this.syncValidationClasses();
     });
   }
 
-  componentWillLoad(): void | Promise<void> {
-    this.selectInitialValue();
-    this.ensureOnlyLastRadioChecked();
-    this.hasNestedRequiredRadio();
+  connectedCallback(): void {
+    this.setupFormListener();
   }
 
   disconnectedCallback(): void {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-
-  private selectInitialValue() {
-    if (!this.value) {
-      return;
+    if (this.cleanupFormListener) {
+      this.cleanupFormListener();
     }
-
-    this.radiobuttonElements.forEach((radiobutton) => {
-      radiobutton.checked = radiobutton.value === this.value;
-    });
-  }
-
-  private ensureOnlyLastRadioChecked() {
-    const checkedRadios = this.radiobuttonElements.filter(
-      (radio) => radio.checked
-    );
-    checkedRadios.forEach((radio, index) => {
-      if (index === checkedRadios.length - 1) {
-        return;
-      }
-      radio.checked = false;
-    });
-
-    const hasCheckedRadio = this.isSomeRadioChecked();
-
-    for (const radio of this.radiobuttonElements) {
-      radio.tabIndex = radio.checked ? 0 : -1;
-    }
-
-    if (!hasCheckedRadio && this.radiobuttonElements.length > 0) {
-      this.radiobuttonElements[0].tabIndex = 0;
-    }
-  }
-
-  private hasNestedRequiredRadio() {
-    this.required = this.radiobuttonElements.some(
-      (radiobutton) => radiobutton.required
-    );
-  }
-
-  private isSomeRadioChecked() {
-    return this.radiobuttonElements.some((radio) => radio.checked);
   }
 
   @Watch('value')
@@ -216,9 +183,7 @@ export class RadiobuttonGroup
   @Method()
   hasValidValue(): Promise<boolean> {
     return Promise.resolve(
-      !!Array.from(this.hostElement.querySelectorAll('ix-radio')).find(
-        (radio) => radio.checked
-      )
+      this.radiobuttonElements.some((radio) => radio.checked)
     );
   }
 
@@ -256,10 +221,136 @@ export class RadiobuttonGroup
     nextRadio.focus();
   }
 
+  // --- Validation helpers (shared with checkbox-group) ---
+  private hasAnyChecked(): boolean {
+    return this.radioValidation.hasAnyChecked();
+  }
+
+  private clearValidationState() {
+    clearRadioGroupValidationState(
+      this.hostElement,
+      this.radiobuttonElements as HTMLElement[],
+      this.invalidText
+    );
+  }
+
+  private handleRequiredValidationShared(params: {
+    elements: HTMLElement[];
+    hasAnyChecked: boolean;
+    touched: boolean;
+    formSubmissionAttempted: boolean;
+    invalidText: string | undefined;
+    hostElement: HTMLElement;
+    clearValidationState: () => void;
+    updateValidationClasses: (
+      elements: HTMLElement[],
+      isChecked: boolean,
+      touched: boolean,
+      formSubmissionAttempted: boolean
+    ) => void;
+  }) {
+    const {
+      elements,
+      hasAnyChecked,
+      touched,
+      formSubmissionAttempted,
+      invalidText,
+      hostElement,
+      clearValidationState,
+      updateValidationClasses,
+    } = params;
+
+    if (isFormNoValidate(hostElement)) {
+      clearValidationState();
+      return;
+    }
+
+    const requiredElements = elements.filter(
+      (el) => (el as HTMLIxRadioElement).required
+    );
+    const isChecked = hasAnyChecked;
+    const anyTouched = requiredElements.some(
+      (el) =>
+        (
+          el as HTMLIxRadioElement & {
+            touched?: boolean;
+            formSubmissionAttempted?: boolean;
+          }
+        ).touched ||
+        (
+          el as HTMLIxRadioElement & {
+            touched?: boolean;
+            formSubmissionAttempted?: boolean;
+          }
+        ).formSubmissionAttempted
+    );
+    const isRequiredInvalid =
+      !isChecked && (touched || formSubmissionAttempted || anyTouched);
+
+    hostElement.classList.toggle('ix-invalid--required', isRequiredInvalid);
+
+    if (isRequiredInvalid) {
+      hostElement.classList.add('ix-invalid');
+      this.invalidText =
+        invalidText && invalidText.trim().length > 0
+          ? invalidText
+          : 'Please select the required field.';
+    } else {
+      hostElement.classList.remove('ix-invalid', 'ix-invalid--required');
+      if (invalidText === 'Please select the required field.') {
+        this.invalidText = '';
+      }
+    }
+
+    if (!isFormNoValidate(hostElement)) {
+      updateValidationClasses(
+        elements,
+        isChecked,
+        touched,
+        formSubmissionAttempted
+      );
+    }
+
+    if (isChecked) {
+      hostElement.classList.remove('ix-invalid', 'ix-invalid--required');
+    }
+  }
+
+  private handleRequiredValidation() {
+    this.handleRequiredValidationShared({
+      elements: this.radiobuttonElements,
+      hasAnyChecked: this.hasAnyChecked(),
+      touched: this.touched,
+      formSubmissionAttempted: this.formSubmissionAttempted,
+      invalidText: this.invalidText,
+      hostElement: this.hostElement,
+      clearValidationState: this.clearValidationState.bind(this),
+      updateValidationClasses: updateRadioValidationClasses,
+    });
+  }
+
+  async syncValidationClasses() {
+    if (isFormNoValidate(this.hostElement)) {
+      this.clearValidationState();
+      return;
+    }
+
+    if (this.required) {
+      this.handleRequiredValidation();
+    } else {
+      this.clearValidationState();
+    }
+  }
+
   render() {
     return (
       <Host
-        onIxBlur={() => (this.touched = true)}
+        onIxBlur={() => {
+          if (!this.touched) {
+            this.touched = true;
+            this.syncValidationClasses();
+          }
+        }}
         ref={this.groupRef}
         role="radiogroup"
       >
diff --git a/packages/core/src/components/radio-group/test/radio-group.ct.ts b/packages/core/src/components/radio-group/test/radio-group.ct.ts
index ab07038faab..4bd8b4b921e 100644
--- a/packages/core/src/components/radio-group/test/radio-group.ct.ts
+++ b/packages/core/src/components/radio-group/test/radio-group.ct.ts
@@ -242,3 +242,130 @@ regressionTest.describe('keyboard navigation', () => {
     await expect(page.getByLabel('Option 2')).toBeChecked();
   });
 });
+
+regressionTest(
+  'required with novalidate=false (default)',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-radio-group label="Required Group" required>
+          <ix-radio label="Option 1" value="option1" required></ix-radio>
+          <ix-radio label="Option 2" value="option2" required></ix-radio>
+        </ix-radio-group>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+    const form = page.locator('form');
+    const group = page.locator('ix-radio-group');
+    const radio1 = page.locator('ix-radio').nth(0);
+    const radio2 = page.locator('ix-radio').nth(1);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await form.evaluate((form: HTMLFormElement) => {
+      form.addEventListener('submit', (e) => e.preventDefault());
+    });
+
+    await expect(group).not.toHaveClass(/ix-invalid/);
+    await submitButton.click();
+    await expect(group).toHaveClass(/ix-invalid--required/);
+    await expect(radio1).toHaveClass(/ix-invalid--required/);
+    await expect(radio2).toHaveClass(/ix-invalid--required/);
+
+    await radio2.click();
+    await expect(group).not.toHaveClass(/ix-invalid/);
+    await expect(radio1).not.toHaveClass(/ix-invalid/);
+    await expect(radio2).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'required with novalidate=true disables validation',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-radio-group label="Required Group" required>
+          <ix-radio label="Option 1" value="option1" required></ix-radio>
+          <ix-radio label="Option 2" value="option2" required></ix-radio>
+        </ix-radio-group>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+    const form = page.locator('form');
+    const group = page.locator('ix-radio-group');
+    const radio1 = page.locator('ix-radio').nth(0);
+    const radio2 = page.locator('ix-radio').nth(1);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await form.evaluate((form: HTMLFormElement) => {
+      form.addEventListener('submit', (e) => e.preventDefault());
+    });
+
+    await submitButton.click();
+    await expect(group).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio1).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio2).not.toHaveClass(/ix-invalid--required/);
+
+    await radio2.click();
+    await expect(group).not.toHaveClass(/ix-invalid/);
+    await expect(radio1).not.toHaveClass(/ix-invalid/);
+    await expect(radio2).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest(
+  'required group: blur triggers validation (novalidate=false)',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-radio-group label="Required Group" required>
+          <ix-radio label="Option 1" value="option1" required></ix-radio>
+          <ix-radio label="Option 2" value="option2" required></ix-radio>
+        </ix-radio-group>
+        <input type="text" placeholder="Next field" />
+      </form>
+    `
+    );
+    const group = page.locator('ix-radio-group');
+    const radio1 = page.locator('ix-radio').nth(0);
+    const radio2 = page.locator('ix-radio').nth(1);
+
+    await radio1.focus();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(group).toHaveClass(/ix-invalid--required/);
+    await expect(radio1).toHaveClass(/ix-invalid--required/);
+    await expect(radio2).toHaveClass(/ix-invalid--required/);
+  }
+);
+
+regressionTest(
+  'required group: blur does not trigger validation (novalidate=true)',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-radio-group label="Required Group" required>
+          <ix-radio label="Option 1" value="option1" required></ix-radio>
+          <ix-radio label="Option 2" value="option2" required></ix-radio>
+        </ix-radio-group>
+        <input type="text" placeholder="Next field" />
+      </form>
+    `
+    );
+    const group = page.locator('ix-radio-group');
+    const radio1 = page.locator('ix-radio').nth(0);
+    const radio2 = page.locator('ix-radio').nth(1);
+
+    await radio1.focus();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await expect(group).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio1).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio2).not.toHaveClass(/ix-invalid--required/);
+  }
+);
diff --git a/packages/core/src/components/radio/radio-validation.ts b/packages/core/src/components/radio/radio-validation.ts
new file mode 100644
index 00000000000..40a00eea041
--- /dev/null
+++ b/packages/core/src/components/radio/radio-validation.ts
@@ -0,0 +1,190 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export function isFormNoValidate(element: HTMLElement): boolean {
+  const form = element.closest('form');
+  if (!form) return false;
+  return (
+    form.hasAttribute('novalidate') ||
+    form.getAttribute('novalidate') === '' ||
+    form.dataset.novalidate !== undefined ||
+    form.hasAttribute('ngnovalidate')
+  );
+}
+
+export function getParentForm(element: HTMLElement): HTMLFormElement | null {
+  return element.closest('form');
+}
+
+export function hasAnyRadioChecked(
+  radios: NodeListOf<HTMLElement> | HTMLElement[]
+): boolean {
+  const requiredRadios = Array.from(radios).filter((el: any) => el.required);
+  if (requiredRadios.length === 0) {
+    return Array.from(radios).some((el: any) => el.checked);
+  }
+  return requiredRadios.some((el: any) => el.checked);
+}
+
+export function setupFormSubmitListener(
+  element: HTMLElement,
+  callback: () => void
+): (() => void) | undefined {
+  const form = getParentForm(element);
+  if (!form) return undefined;
+
+  const handler = () => callback();
+  form.addEventListener('submit', handler);
+
+  return () => {
+    form.removeEventListener('submit', handler);
+  };
+}
+
+function shouldSkipValidationAndClear(
+  radios: NodeListOf<HTMLElement> | HTMLElement[]
+): boolean {
+  if (radios.length > 0) {
+    const form = radios[0].closest('form');
+    if (
+      form &&
+      (form.hasAttribute('novalidate') ||
+        form.getAttribute('novalidate') === '' ||
+        form.dataset.novalidate !== undefined ||
+        form.hasAttribute('ngnovalidate'))
+    ) {
+      Array.from(radios).forEach((el: any) => {
+        el.classList.remove('ix-invalid--required', 'ix-invalid');
+      });
+      return true;
+    }
+  }
+  return false;
+}
+
+export function updateRadioValidationClasses(
+  radios: NodeListOf<HTMLElement> | HTMLElement[],
+  touched: boolean,
+  formSubmissionAttempted: boolean
+) {
+  if (shouldSkipValidationAndClear(radios)) {
+    return;
+  }
+
+  const requiredRadios = Array.from(radios).filter((el: any) => el.required);
+
+  if (requiredRadios.some((el: any) => el.checked)) {
+    requiredRadios.forEach((el: any) => {
+      el.classList.remove('ix-invalid--required', 'ix-invalid');
+    });
+    return;
+  }
+
+  const radiosToValidate =
+    requiredRadios.length > 0 ? requiredRadios : Array.from(radios);
+
+  const shouldShow = touched || formSubmissionAttempted;
+  radiosToValidate.forEach((el: any) => {
+    if (!el.checked && shouldShow) {
+      el.classList.add('ix-invalid--required', 'ix-invalid');
+    } else if (!el.checked) {
+      el.classList.remove('ix-invalid--required', 'ix-invalid');
+    }
+  });
+}
+
+export function updateRadioGroupValidationClasses(
+  group: Element | null,
+  radios: NodeListOf<HTMLElement> | HTMLElement[]
+) {
+  if (!group) return;
+
+  if (shouldSkipValidationAndClear(radios)) {
+    group.classList.remove('ix-invalid', 'ix-invalid--required');
+    return;
+  }
+
+  const requiredRadios = Array.from(radios).filter((el: any) => el.required);
+  if (requiredRadios.some((el: any) => el.checked)) {
+    group.classList.remove('ix-invalid', 'ix-invalid--required');
+    return;
+  }
+
+  const anyTouched =
+    requiredRadios.length > 0
+      ? requiredRadios.some(
+          (el: any) => el.touched || el.formSubmissionAttempted
+        )
+      : Array.from(radios).some(
+          (el: any) => el.touched || el.formSubmissionAttempted
+        );
+
+  group.classList.toggle('ix-invalid--required', anyTouched);
+  if (anyTouched) {
+    group.classList.add('ix-invalid');
+  } else {
+    group.classList.remove('ix-invalid');
+  }
+}
+
+export function hasAnyCheckedRadios(
+  radios: HTMLElement[] | NodeListOf<HTMLElement>
+): boolean {
+  const radiosArr = Array.from(radios);
+  const requiredRadios = radiosArr.filter((el: any) => el.required);
+  if (
+    requiredRadios.length > 0 &&
+    typeof (requiredRadios[0] as HTMLIxRadioElement).name === 'string'
+  ) {
+    const name = (requiredRadios[0] as HTMLIxRadioElement).name;
+    const form = radiosArr[0]?.closest?.('form');
+    const allWithSameName: NodeListOf<HTMLElement> = form
+      ? form.querySelectorAll(`ix-radio[name="${name}"]`)
+      : document.querySelectorAll(`ix-radio[name="${name}"]`);
+    return hasAnyRadioChecked(
+      Array.from(allWithSameName).filter((el: any) => el.required)
+    );
+  }
+
+  return requiredRadios.some(
+    (radio) => 'checked' in radio && (radio as any).checked
+  );
+}
+
+export function clearRadioGroupValidationState(
+  group: HTMLElement,
+  radios: HTMLElement[] | NodeListOf<HTMLElement>,
+  invalidText?: string
+) {
+  const radiosArr = Array.from(radios);
+  group.classList.remove('ix-invalid--required', 'ix-invalid');
+  if (invalidText) {
+    if (invalidText === 'Please select the required field.') {
+      (group as any).invalidText = '';
+    }
+  }
+  radiosArr.forEach((el: any) => {
+    el.classList.remove('ix-invalid', 'ix-invalid--required');
+  });
+}
+
+export function handleStandaloneRadioValidation(
+  hostElement: HTMLElement,
+  isChecked: boolean,
+  touched: boolean,
+  formSubmissionAttempted: boolean
+) {
+  const isRequiredInvalid = !isChecked && (touched || formSubmissionAttempted);
+  hostElement.classList.toggle('ix-invalid--required', isRequiredInvalid);
+  if (isChecked) {
+    hostElement.classList.remove('ix-invalid');
+  } else if (isRequiredInvalid) {
+    hostElement.classList.add('ix-invalid');
+  }
+}
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
index 3258504d117..36d14ae9bf6 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -25,6 +25,14 @@ import {
   createClassMutationObserver,
   IxFormComponent,
 } from '../utils/input';
+import {
+  getParentForm,
+  isFormNoValidate,
+  handleStandaloneRadioValidation,
+  updateRadioValidationClasses,
+  updateRadioGroupValidationClasses,
+  setupFormSubmitListener,
+} from './radio-validation';
 
 /**
  * @form-ready
@@ -87,6 +95,9 @@ export class Radio implements IxFormComponent<string> {
   @Event() ixBlur!: EventEmitter<void>;
 
   private classMutationObserver?: ClassMutationObserver;
+  private touched = false;
+  private formSubmissionAttempted = false;
+  private cleanupFormListener?: () => void;
 
   /** @internal */
   @Method()
@@ -102,14 +113,86 @@ export class Radio implements IxFormComponent<string> {
     this.checked = newChecked;
   }
 
+  private syncValidationClasses() {
+    if (isFormNoValidate(this.hostElement) || !this.required) {
+      this.hostElement.classList.remove('ix-invalid--required', 'ix-invalid');
+      return;
+    }
+
+    let isChecked = this.checked;
+    const radioGroup = this.hostElement.closest('ix-radio-group');
+    const clearRadiosAndGroup = (radios: NodeListOf<HTMLElement>) => {
+      Array.from(radios).forEach((el: any) => {
+        el.classList.remove('ix-invalid--required', 'ix-invalid');
+      });
+      if (radios.length > 0) {
+        const group = radios[0].closest('ix-radio-group');
+        if (group) {
+          group.classList.remove('ix-invalid', 'ix-invalid--required');
+        }
+      }
+    };
+
+    const handleNamedRadios = (
+      radios: NodeListOf<HTMLElement>,
+      group: Element | null
+    ) => {
+      if (isFormNoValidate(this.hostElement)) {
+        clearRadiosAndGroup(radios);
+        if (group) {
+          updateRadioGroupValidationClasses(group, radios);
+        }
+        return;
+      }
+
+      updateRadioValidationClasses(
+        radios,
+        this.touched,
+        this.formSubmissionAttempted
+      );
+
+      if (group) {
+        updateRadioGroupValidationClasses(group, radios);
+      }
+    };
+
+    if (this.name) {
+      if (radioGroup) {
+        const radios: NodeListOf<HTMLElement> = radioGroup.querySelectorAll(
+          `ix-radio[name="${this.name}"]`
+        );
+        handleNamedRadios(radios, radioGroup);
+      } else {
+        const form = getParentForm(this.hostElement);
+        const radios: NodeListOf<HTMLElement> = form
+          ? form.querySelectorAll(`ix-radio[name="${this.name}"]`)
+          : document.querySelectorAll(`ix-radio[name="${this.name}"]`);
+        handleNamedRadios(
+          radios,
+          radios.length > 0 ? radios[0].closest('ix-radio-group') : null
+        );
+      }
+    } else {
+      handleStandaloneRadioValidation(
+        this.hostElement,
+        isChecked,
+        this.touched,
+        this.formSubmissionAttempted
+      );
+    }
+  }
+
   @Watch('checked')
   async onCheckedChange() {
+    this.touched = true;
     this.updateFormInternalValue();
+    this.syncValidationClasses();
   }
 
   @Watch('value')
   onValueChange() {
     this.valueChange.emit(this.value);
+    this.syncValidationClasses();
   }
 
   connectedCallback(): void {
@@ -122,12 +205,19 @@ export class Radio implements IxFormComponent<string> {
         );
       });
     }
+    this.cleanupFormListener = setupFormSubmitListener(this.hostElement, () => {
+      this.formSubmissionAttempted = true;
+      this.syncValidationClasses();
+    });
   }
 
   disconnectedCallback(): void {
     if (this.classMutationObserver) {
       this.classMutationObserver.destroy();
     }
+    if (this.cleanupFormListener) {
+      this.cleanupFormListener();
+    }
   }
 
   componentWillLoad() {
@@ -209,7 +299,11 @@ export class Radio implements IxFormComponent<string> {
           this.setCheckedState(true);
         }}
         onKeyDown={(event: KeyboardEvent) => this.onKeyDown(event)}
-        onBlur={() => this.ixBlur.emit()}
+        onBlur={() => {
+          this.ixBlur.emit();
+          this.touched = true;
+          this.syncValidationClasses();
+        }}
       >
         <label>
           <div class="radio-button">
diff --git a/packages/core/src/components/radio/test/radio.ct.ts b/packages/core/src/components/radio/test/radio.ct.ts
index 798c55932bd..6f8375ab827 100644
--- a/packages/core/src/components/radio/test/radio.ct.ts
+++ b/packages/core/src/components/radio/test/radio.ct.ts
@@ -181,3 +181,158 @@ test.describe('accessibility & click handling', () => {
     await expect(radio).toHaveAttribute('aria-checked', 'true');
   });
 });
+
+regressionTest('validation works when noValidate is not set (default)',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-radio label="Accept Terms" value="terms" required></ix-radio>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const radio = page.locator('ix-radio');
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await expect(radio).not.toHaveClass(/ix-invalid/);
+    await submitButton.click();
+    await expect(radio).toHaveClass(/ix-invalid--required/);
+    await expect(radio).toHaveClass(/ix-invalid/);
+    await radio.click();
+    await expect(radio).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest('noValidate=true disables validation',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-radio label="Accept Terms" value="terms" required></ix-radio>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const radio = page.locator('ix-radio');
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await submitButton.click();
+    await expect(radio).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio).not.toHaveClass(/ix-invalid/);
+    await radio.focus();
+    await page.keyboard.press('Tab');
+
+    await expect(radio).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest('validation with named radio group when noValidate is not set',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-radio label="Option 1" name="options" value="option1" required></ix-radio>
+        <ix-radio label="Option 2" name="options" value="option2" required></ix-radio>
+        <ix-radio label="Option 3" name="options" value="option3" required></ix-radio>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const radio1 = page.locator('ix-radio').nth(0);
+    const radio2 = page.locator('ix-radio').nth(1);
+    const radio3 = page.locator('ix-radio').nth(2);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await submitButton.click();
+    await expect(radio1).toHaveClass(/ix-invalid--required/);
+    await expect(radio2).toHaveClass(/ix-invalid--required/);
+    await expect(radio3).toHaveClass(/ix-invalid--required/);
+    await radio1.click();
+    await expect(radio1).not.toHaveClass(/ix-invalid/);
+    await expect(radio2).not.toHaveClass(/ix-invalid/);
+    await expect(radio3).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest('noValidate=true disables validation for named radio group',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-radio label="Option 1" name="options" value="option1" required></ix-radio>
+        <ix-radio label="Option 2" name="options" value="option2" required></ix-radio>
+        <ix-radio label="Option 3" name="options" value="option3" required></ix-radio>
+        <button type="submit">Submit</button>
+      </form>
+    `
+    );
+
+    const form = page.locator('form');
+    const radio1 = page.locator('ix-radio').nth(0);
+    const radio2 = page.locator('ix-radio').nth(1);
+    const radio3 = page.locator('ix-radio').nth(2);
+    const submitButton = page.locator('button[type="submit"]');
+
+    await preventFormSubmission(form);
+    await submitButton.click();
+    await expect(radio1).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio1).not.toHaveClass(/ix-invalid/);
+    await expect(radio2).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio3).not.toHaveClass(/ix-invalid--required/);
+    await radio1.focus();
+    await page.keyboard.press('Tab');
+
+    await expect(radio1).not.toHaveClass(/ix-invalid/);
+    await expect(radio2).not.toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest('validation behavior with blur when noValidate is not set',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form>
+        <ix-radio label="Accept Terms" value="terms" required></ix-radio>
+        <input type="text" placeholder="Next field" />
+      </form>
+    `
+    );
+
+    const radio = page.locator('ix-radio');
+    await radio.focus();
+    await page.keyboard.press('Tab');
+    await expect(radio).toHaveClass(/ix-invalid--required/);
+    await expect(radio).toHaveClass(/ix-invalid/);
+  }
+);
+
+regressionTest('no validation on blur when noValidate=true',
+  async ({ mount, page }) => {
+    await mount(
+      `
+      <form novalidate>
+        <ix-radio label="Accept Terms" value="terms" required></ix-radio>
+        <input type="text" placeholder="Next field" />
+      </form>
+    `
+    );
+
+    const radio = page.locator('ix-radio');
+    await radio.focus();
+    await page.keyboard.press('Tab');
+    await expect(radio).not.toHaveClass(/ix-invalid--required/);
+    await expect(radio).not.toHaveClass(/ix-invalid/);
+  }
+);
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 67e85c509a4..246eb4f900a 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -226,6 +226,8 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   @State() isInfo = false;
   @State() isWarning = false;
 
+  private formSubmissionAttempted = false;
+  private formSubmitHandler?: (event: Event) => void;
   private readonly dropdownWrapperRef = makeRef<HTMLElement>();
   private readonly dropdownAnchorRef = makeRef<HTMLElement>();
   private readonly inputRef = makeRef<HTMLInputElement>();
@@ -245,6 +247,24 @@ export class Select implements IxInputFieldComponent<string | string[]> {
     this.arrowFocusController.items = this.visibleNonShadowItems;
   });
 
+  private get parentForm(): HTMLFormElement | null {
+    return this.hostElement.closest('form');
+  }
+
+  private isFormNoValidate(): boolean {
+    const form = this.parentForm;
+    if (!form) {
+      return false;
+    }
+    const noValidateAttributes = [
+      'novalidate',
+      'data-novalidate',
+      'ngnovalidate',
+    ];
+
+    return noValidateAttributes.some((attr) => form.hasAttribute(attr));
+  }
+
   private readonly focusControllerCallbackBind =
     this.focusDropdownItem.bind(this);
 
@@ -304,6 +324,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   watchValue(value: string | string[]) {
     this.value = value;
     this.updateSelection();
+    this.syncValidationClasses();
   }
 
   @Watch('dropdownShow')
@@ -475,6 +496,36 @@ export class Select implements IxInputFieldComponent<string | string[]> {
     return false;
   }
 
+  connectedCallback(): void {
+    const form = this.parentForm;
+    if (form) {
+      this.formSubmitHandler = (event: Event) => {
+        this.formSubmissionAttempted = true;
+        this.touched = true;
+        this.syncValidationClasses();
+        if (this.required && !this.hasValue()) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.hostElement.focus();
+          return false;
+        }
+      };
+      form.addEventListener('submit', this.formSubmitHandler, {
+        capture: true,
+      });
+    }
+
+    this.hostElement.addEventListener('invalid', (event: Event) => {
+      event.preventDefault();
+    });
+
+    this.hostElement.addEventListener('focus', () => {
+      if (this.inputElement) {
+        this.inputElement.focus();
+      }
+    });
+  }
+
   componentDidLoad() {
     this.inputElement?.addEventListener('input', () => {
       this.dropdownShow = true;
@@ -485,6 +536,9 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   componentWillLoad() {
     this.updateSelection();
     this.updateFormInternalValue(this.value);
+    if (this.required) {
+      this.syncValidationClasses();
+    }
   }
 
   componentDidRender(): void {
@@ -516,6 +570,45 @@ export class Select implements IxInputFieldComponent<string | string[]> {
 
   disconnectedCallback() {
     this.cleanupResources();
+    const form = this.parentForm;
+    if (form && this.formSubmitHandler) {
+      form.removeEventListener('submit', this.formSubmitHandler, {
+        capture: true,
+      });
+    }
+  }
+
+  async syncValidationClasses() {
+    if (this.isFormNoValidate()) {
+      this.hostElement.classList.remove('ix-invalid--required');
+      this.formInternals.setValidity({});
+      return;
+    }
+
+    if (this.required) {
+      const isRequiredInvalid =
+        !this.hasValue() && (this.touched || this.formSubmissionAttempted);
+
+      this.hostElement.classList.toggle(
+        'ix-invalid--required',
+        isRequiredInvalid
+      );
+      this.isInvalid = isRequiredInvalid;
+
+      if (isRequiredInvalid) {
+        const message =
+          this.invalidText && this.invalidText.trim().length > 0
+            ? this.invalidText
+            : ' ';
+
+        this.formInternals.setValidity({ valueMissing: true }, message);
+      } else {
+        this.formInternals.setValidity({});
+      }
+    } else {
+      this.hostElement.classList.remove('ix-invalid--required');
+      this.formInternals.setValidity({});
+    }
   }
 
   private itemExists(item: string | undefined) {
@@ -745,6 +838,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   private onInputBlur(event: Event) {
     this.ixBlur.emit();
     this.touched = true;
+    this.syncValidationClasses();
 
     if (this.editable) {
       return;
@@ -880,9 +974,18 @@ export class Select implements IxInputFieldComponent<string | string[]> {
     return (
       <Host
         aria-disabled={a11yBoolean(this.disabled)}
+        tabIndex={this.disabled ? -1 : 0}
         class={{
           disabled: this.disabled,
         }}
+        onFocus={() => {
+          if (
+            this.inputElement &&
+            document.activeElement === this.hostElement
+          ) {
+            this.inputElement.focus();
+          }
+        }}
       >
         <ix-field-wrapper
           required={this.required}
@@ -928,6 +1031,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
                     class={{
                       'allow-clear':
                         this.allowClear && !!this.selectedLabels?.length,
+                      'ix-invalid': this.isInvalid,
                     }}
                     placeholder={this.placeholderValue()}
                     value={this.inputValue ?? ''}
diff --git a/packages/core/src/components/select/test/select.ct.ts b/packages/core/src/components/select/test/select.ct.ts
index 41c247b55a7..ce467492aea 100644
--- a/packages/core/src/components/select/test/select.ct.ts
+++ b/packages/core/src/components/select/test/select.ct.ts
@@ -1048,3 +1048,187 @@ test('should not show "All" chip of de-selected a item', async ({
 
   await expect(allChip).not.toBeVisible();
 });
+
+test('required select prevents form submission when empty', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+      <form>
+        <ix-select name="department" required>
+          <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+        </ix-select>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+  const form = page.locator('form');
+  const select = page.locator('ix-select');
+  const submitButton = page.locator('button[type="submit"]');
+
+  await preventFormSubmission(form);
+
+  await expect(select).toHaveClass(/hydrated/);
+
+  await submitButton.click();
+
+  await expect(select).toHaveClass(/ix-invalid--required/);
+
+  const tabIndex = await select.getAttribute('tabindex');
+  expect(tabIndex).toBe('0');
+});
+
+test('multiple required selects prevent form submission when any is empty', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+      <form>
+        <ix-select name="department" required>
+          <ix-select-item value="1" label="Department 1">Test</ix-select-item>
+          <ix-select-item value="2" label="Department 2">Test</ix-select-item>
+        </ix-select>
+        <ix-select name="location" required>
+          <ix-select-item value="ny" label="New York">Test</ix-select-item>
+          <ix-select-item value="london" label="London">Test</ix-select-item>
+        </ix-select>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+  const form = page.locator('form');
+  const departmentSelect = page.locator('ix-select[name="department"]');
+  const locationSelect = page.locator('ix-select[name="location"]');
+  const submitButton = page.locator('button[type="submit"]');
+
+  await preventFormSubmission(form);
+
+  await departmentSelect.locator('[data-select-dropdown]').click();
+  await departmentSelect.locator('ix-select-item').first().click();
+
+  await submitButton.click();
+  await expect(locationSelect).toHaveClass(/ix-invalid--required/);
+
+  await locationSelect.locator('[data-select-dropdown]').click();
+  await locationSelect.locator('ix-select-item').first().click();
+
+  const isFormValidNow = await form.evaluate((form: HTMLFormElement) =>
+    form.checkValidity()
+  );
+  expect(isFormValidNow).toBe(true);
+});
+
+test('custom invalidText is used for validation feedback', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+      <form>
+        <ix-select name="department" required invalid-text="Please select your department">
+          <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+        </ix-select>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+  const form = page.locator('form');
+  const select = page.locator('ix-select');
+  const submitButton = page.locator('button[type="submit"]');
+
+  await preventFormSubmission(form);
+
+  await submitButton.click();
+  const fieldWrapper = select.locator('ix-field-wrapper');
+  await expect(fieldWrapper).toContainText('Please select your department');
+});
+
+test('novalidate form attribute disables validation', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+      <form novalidate>
+        <ix-select name="department" required>
+          <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+        </ix-select>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+  const form = page.locator('form');
+  const select = page.locator('ix-select');
+  const submitButton = page.locator('button[type="submit"]');
+
+  await preventFormSubmission(form);
+
+  const isFormValid = await form.evaluate((form: HTMLFormElement) =>
+    form.checkValidity()
+  );
+  expect(isFormValid).toBe(true);
+
+  await submitButton.click();
+  await expect(select).not.toHaveClass(/ix-invalid--required/);
+});
+
+test('multiple mode validation works correctly', async ({ mount, page }) => {
+  await mount(`
+      <form>
+        <ix-select name="departments" required mode="multiple">
+          <ix-select-item value="1" label="Sales">Test</ix-select-item>
+          <ix-select-item value="2" label="Marketing">Test</ix-select-item>
+          <ix-select-item value="3" label="Engineering">Test</ix-select-item>
+        </ix-select>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+  const form = page.locator('form');
+  const select = page.locator('ix-select');
+  const submitButton = page.locator('button[type="submit"]');
+
+  await preventFormSubmission(form);
+
+  await submitButton.click();
+  await expect(select).toHaveClass(/ix-invalid--required/);
+
+  await page.locator('[data-select-dropdown]').click();
+  await page.locator('ix-select-item').first().click();
+  await page.locator('ix-select-item').nth(1).click();
+
+  const isFormValid = await form.evaluate((form: HTMLFormElement) =>
+    form.checkValidity()
+  );
+  expect(isFormValid).toBe(true);
+  await expect(select).not.toHaveClass(/ix-invalid--required/);
+});
+
+test('programmatic value setting updates validation state', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+      <form>
+        <ix-select name="department" required>
+          <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+        </ix-select>
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+  const select = page.locator('ix-select');
+  const submitButton = page.locator('button[type="submit"]');
+
+  await submitButton.click();
+  await expect(select).toHaveClass(/ix-invalid--required/);
+
+  await select.evaluate((el: HTMLIxSelectElement) => {
+    el.value = '1';
+  });
+
+  await page.waitForTimeout(100);
+  await expect(select).not.toHaveClass(/ix-invalid--required/);
+});
diff --git a/packages/core/src/components/time-input/test/time-input.ct.ts b/packages/core/src/components/time-input/test/time-input.ct.ts
index 9a4444315b4..2b38bdbf589 100644
--- a/packages/core/src/components/time-input/test/time-input.ct.ts
+++ b/packages/core/src/components/time-input/test/time-input.ct.ts
@@ -184,4 +184,302 @@ regressionTest.describe('time input tests', () => {
       ).toHaveText('Custom time error');
     }
   );
+
+  regressionTest(
+    'Required input: Invalid input > Removing value with keyboard > Stays invalid',
+    async ({ page, mount }) => {
+      await mount(
+        `<ix-time-input required value="invalid-time"></ix-time-input>`
+      );
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.selectText();
+      await input.press('Delete');
+      await input.blur();
+
+      await expect(timeInput).toHaveClass(/ix-invalid--required/);
+    }
+  );
+
+  regressionTest(
+    'Required input: Invalid input > Remove touched state > Valid again',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input required value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.selectText();
+      await input.fill('invalid-time');
+      await input.blur();
+
+      await timeInput.evaluate((el: any) => el.clear());
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'Required input: Invalid input > Programmatically setting to empty > Stays invalid',
+    async ({ page, mount }) => {
+      await mount(
+        `<ix-time-input required value="invalid-time"></ix-time-input>`
+      );
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.blur();
+
+      await timeInput.evaluate((el: any) => {
+        el.value = '';
+      });
+
+      await expect(timeInput).toHaveClass(/ix-invalid--required/);
+    }
+  );
+
+  regressionTest(
+    'Required input: Valid input > Removing value with keyboard > It is invalid',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input required value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.selectText();
+      await input.press('Delete');
+      await input.blur();
+
+      await expect(timeInput).toHaveClass(/ix-invalid--required/);
+    }
+  );
+
+  regressionTest(
+    'Required input: Valid input > Remove touched state > Valid',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input required value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.blur();
+
+      await timeInput.evaluate((el: any) => el.clear());
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'Required input: Valid input > Programmatically setting to empty > It is invalid',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input required value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.blur();
+
+      await timeInput.evaluate((el: any) => {
+        el.value = '';
+      });
+
+      await expect(timeInput).toHaveClass(/ix-invalid--required/);
+    }
+  );
+
+  regressionTest(
+    'Not required input: Invalid input > Removing value with keyboard > Valid',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input value="invalid-time"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.selectText();
+      await input.press('Delete');
+      await input.blur();
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'Not required input: Invalid input > Remove touched state > Valid again',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.selectText();
+      await input.fill('invalid-time');
+      await input.blur();
+
+      await timeInput.evaluate((el: any) => el.clear());
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'Not required input: Invalid input > Programmatically setting to empty > Valid',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input value="invalid-time"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.blur();
+
+      await timeInput.evaluate((el: any) => {
+        el.value = '';
+      });
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'Not required input: Valid input > Removing value with keyboard > Valid',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.selectText();
+      await input.press('Delete');
+      await input.blur();
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'Not required input: Valid input > Remove touched state > Valid',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.blur();
+
+      await timeInput.evaluate((el: any) => el.clear());
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'Not required input: Valid input > Programmatically setting to empty > Valid',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.blur();
+
+      await timeInput.evaluate((el: any) => {
+        el.value = '';
+      });
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'novalidate form suppresses validation for required field',
+    async ({ page, mount }) => {
+      await mount(`
+        <form novalidate>
+          <ix-time-input required value="09:10:11"></ix-time-input>
+        </form>
+      `);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.selectText();
+      await input.press('Delete');
+      await input.blur();
+
+      await expect(input).not.toHaveClass(/is-invalid/);
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+    }
+  );
+
+  regressionTest(
+    'novalidate form suppresses validation for non-required field',
+    async ({ page, mount }) => {
+      await mount(`
+        <form novalidate>
+          <ix-time-input value="09:10:11"></ix-time-input>
+        </form>
+      `);
+
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.blur();
+
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
+
+  regressionTest(
+    'Validation works after switching between required and non-required',
+    async ({ page, mount }) => {
+      await mount(`<ix-time-input value="09:10:11"></ix-time-input>`);
+
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await input.focus();
+      await input.selectText();
+      await input.press('Delete');
+      await input.blur();
+
+      await expect(input).not.toHaveClass(/is-invalid/);
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+
+      await timeInput.evaluate((el: any) => {
+        el.required = true;
+      });
+
+      await expect(timeInput).toHaveClass(/ix-invalid--required/);
+
+      await timeInput.evaluate((el: any) => {
+        el.required = false;
+      });
+
+      await expect(timeInput).not.toHaveClass(/ix-invalid--required/);
+    }
+  );
 });
diff --git a/packages/core/src/components/time-input/time-input.tsx b/packages/core/src/components/time-input/time-input.tsx
index 84d2c598e16..b6dc7267544 100644
--- a/packages/core/src/components/time-input/time-input.tsx
+++ b/packages/core/src/components/time-input/time-input.tsx
@@ -14,7 +14,6 @@ import {
   Element,
   Event,
   EventEmitter,
-  Host,
   Method,
   Prop,
   State,
@@ -27,7 +26,6 @@ import {
   DisposableChangesAndVisibilityObservers,
   addDisposableChangesAndVisibilityObservers,
   adjustPaddingForStartAndEnd,
-  handleSubmitOnEnterKeydown,
 } from '../input/input.util';
 import {
   ClassMutationObserver,
@@ -36,6 +34,21 @@ import {
   ValidationResults,
   createClassMutationObserver,
   getValidationText,
+  shouldSuppressInternalValidation,
+  syncState,
+  watchValue,
+  onInput,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  getNativeInput,
+  renderFieldWrapper,
+  createEventConfig,
+  createInputMethods,
+  createDropdownMethods,
+  createKeyDownHandler,
+  handleValidationLifecycle,
 } from '../utils/input';
 import { makeRef } from '../utils/make-ref';
 import { IxTimePickerCustomEvent } from '../../components';
@@ -79,7 +92,13 @@ export class TimeInput implements IxInputFieldComponent<string> {
   @Prop({ reflect: true, mutable: true }) value: string = '';
 
   @Watch('value') watchValuePropHandler(newValue: string) {
-    this.onInput(newValue);
+    watchValue({
+      newValue,
+      required: this.required,
+      onInput: (value: string) => void this.onInput(value),
+      setTouched: (touched: boolean) => (this.touched = touched),
+      isClearing: this._isClearing,
+    });
   }
 
   /**
@@ -93,6 +112,11 @@ export class TimeInput implements IxInputFieldComponent<string> {
    */
   @Prop() required?: boolean;
 
+  @Watch('required')
+  onRequiredChange() {
+    this.syncValidationClasses();
+  }
+
   /**
    * Helper text below the input field
    */
@@ -238,6 +262,7 @@ export class TimeInput implements IxInputFieldComponent<string> {
   @State() show = false;
   @State() time: string | null = null;
   @State() isInputInvalid = false;
+  @State() suppressValidation = false;
   @State() isInvalid = false;
   @State() isValid = false;
   @State() isInfo = false;
@@ -254,15 +279,15 @@ export class TimeInput implements IxInputFieldComponent<string> {
   private classObserver?: ClassMutationObserver;
   private invalidReason?: string;
   private touched = false;
+  private _isClearing = false;
 
   private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;
 
   private handleInputKeyDown(event: KeyboardEvent) {
-    handleSubmitOnEnterKeydown(
-      event,
+    return createKeyDownHandler(
       this.suppressSubmitOnEnter,
-      this.formInternals.form
-    );
+      this.formInternals
+    )(event);
   }
 
   updateFormInternalValue(value: string): void {
@@ -301,6 +326,10 @@ export class TimeInput implements IxInputFieldComponent<string> {
     this.updateFormInternalValue(this.value);
   }
 
+  componentDidLoad(): void {
+    this.syncValidationClasses();
+  }
+
   private updatePaddings() {
     adjustPaddingForStartAndEnd(
       this.slotStartRef.current,
@@ -333,10 +362,13 @@ export class TimeInput implements IxInputFieldComponent<string> {
 
   async onInput(value: string) {
     this.value = value;
+
+    this.suppressValidation = await shouldSuppressInternalValidation(this);
+
     if (!value) {
       this.isInputInvalid = false;
-      this.updateFormInternalValue(value);
-      this.valueChange.emit(value);
+      this.invalidReason = undefined;
+      this.emitChangesAndSync(value);
       return;
     }
 
@@ -344,16 +376,31 @@ export class TimeInput implements IxInputFieldComponent<string> {
       return;
     }
 
-    const time = DateTime.fromFormat(value, this.format);
-    if (time.isValid) {
+    if (this.suppressValidation) {
       this.isInputInvalid = false;
-    } else {
-      this.isInputInvalid = true;
-      this.invalidReason = time.invalidReason;
+      this.invalidReason = undefined;
+      this.emitChangesAndSync(value);
+      return;
     }
 
-    this.updateFormInternalValue(value);
-    this.valueChange.emit(value);
+    const time = DateTime.fromFormat(value, this.format);
+    this.isInputInvalid = !time.isValid;
+    this.invalidReason = time.isValid ? undefined : time.invalidReason;
+
+    this.emitChangesAndSync(value);
+  }
+
+  private emitChangesAndSync(value: string): void {
+    syncState({
+      updateFormInternalValue: (val) => this.updateFormInternalValue(val),
+      valueChange: this.valueChange,
+      value: value,
+      hostElement: this.hostElement,
+      suppressValidation: this.suppressValidation,
+      required: this.required,
+      touched: this.touched,
+      isInputInvalid: this.isInputInvalid,
+    });
   }
 
   onTimeIconClick(event: Event) {
@@ -368,7 +415,6 @@ export class TimeInput implements IxInputFieldComponent<string> {
   async openDropdown() {
     // keep picker in sync with input
     this.time = this.value;
-
     return openDropdownUtil(this.dropdownElementRef);
   }
 
@@ -377,10 +423,27 @@ export class TimeInput implements IxInputFieldComponent<string> {
   }
 
   private checkClassList() {
-    this.isInvalid = this.hostElement.classList.contains('ix-invalid');
+    this.isInvalid = this.dropdownMethods.checkClassList();
+  }
+
+  private getEventConfig() {
+    return createEventConfig({
+      show: this.show,
+      setTouched: (touched: boolean) => (this.touched = touched),
+      onInput: (value: string) => void this.onInput(value),
+      openDropdown: () => this.openDropdown(),
+      ixFocus: this.ixFocus,
+      ixBlur: this.ixBlur,
+      syncValidationClasses: () => this.syncValidationClasses(),
+      handleInputKeyDown: (event: KeyboardEvent) =>
+        this.handleInputKeyDown(event),
+      alwaysSetTouchedOnBlur: true,
+    });
   }
 
   private renderInput() {
+    const eventConfig = this.getEventConfig();
+
     return (
       <div class="input-wrapper">
         <SlotStart
@@ -403,25 +466,11 @@ export class TimeInput implements IxInputFieldComponent<string> {
           value={this.value}
           placeholder={this.placeholder}
           name={this.name}
-          onInput={(event) => {
-            const target = event.target as HTMLInputElement;
-            this.onInput(target.value);
-          }}
-          onClick={(event) => {
-            if (this.show) {
-              event.stopPropagation();
-              event.preventDefault();
-            }
-          }}
-          onFocus={async () => {
-            this.openDropdown();
-            this.ixFocus.emit();
-          }}
-          onBlur={() => {
-            this.ixBlur.emit();
-            this.touched = true;
-          }}
-          onKeyDown={(event) => this.handleInputKeyDown(event)}
+          onInput={onInput(eventConfig)}
+          onClick={onClick(eventConfig)}
+          onFocus={onFocus(eventConfig)}
+          onBlur={onBlur(eventConfig)}
+          onKeyDown={onKeyDown(eventConfig)}
         ></input>
         <SlotEnd
           slotEndRef={this.slotEndRef}
@@ -442,17 +491,18 @@ export class TimeInput implements IxInputFieldComponent<string> {
   }
 
   @HookValidationLifecycle()
-  hookValidationLifecycle({
-    isInfo,
-    isInvalid,
-    isInvalidByRequired,
-    isValid,
-    isWarning,
-  }: ValidationResults) {
-    this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
-    this.isInfo = isInfo;
-    this.isValid = isValid;
-    this.isWarning = isWarning;
+  hookValidationLifecycle(results: ValidationResults) {
+    handleValidationLifecycle(
+      this.suppressValidation,
+      this.isInputInvalid,
+      results,
+      {
+        setIsInvalid: (value) => (this.isInvalid = value),
+        setIsInfo: (value) => (this.isInfo = value),
+        setIsValid: (value) => (this.isValid = value),
+        setIsWarning: (value) => (this.isWarning = value),
+      }
+    );
   }
 
   @Watch('isInputInvalid')
@@ -477,7 +527,38 @@ export class TimeInput implements IxInputFieldComponent<string> {
    */
   @Method()
   getNativeInputElement(): Promise<HTMLInputElement> {
-    return this.inputElementRef.waitForCurrent();
+    return getNativeInput(this.inputElementRef);
+  }
+
+  private get commonMethods() {
+    return createInputMethods({
+      inputElementRef: this.inputElementRef,
+      touched: this.touched,
+      hostElement: this.hostElement,
+      suppressValidation: this.suppressValidation,
+      required: this.required,
+      value: this.value,
+      isInputInvalid: this.isInputInvalid,
+    });
+  }
+
+  private get dropdownMethods() {
+    return createDropdownMethods({
+      dropdownElementRef: this.dropdownElementRef,
+      hostElement: this.hostElement,
+      show: this.show,
+      touched: this.touched,
+      openDropdown: async () => {
+        this.time = this.value;
+        return openDropdownUtil(this.dropdownElementRef);
+      },
+      ixFocus: this.ixFocus,
+      ixBlur: this.ixBlur,
+      syncValidationClasses: () => this.syncValidationClasses(),
+      onInput: (value: string) => void this.onInput(value),
+      handleInputKeyDown: (event: KeyboardEvent) =>
+        this.handleInputKeyDown(event),
+    });
   }
 
   /**
@@ -485,7 +566,7 @@ export class TimeInput implements IxInputFieldComponent<string> {
    */
   @Method()
   async focusInput(): Promise<void> {
-    return (await this.getNativeInputElement()).focus();
+    return this.commonMethods.focusInput();
   }
 
   /**
@@ -494,7 +575,33 @@ export class TimeInput implements IxInputFieldComponent<string> {
    */
   @Method()
   isTouched(): Promise<boolean> {
-    return Promise.resolve(this.touched);
+    return this.commonMethods.isTouched();
+  }
+
+  /**
+   * @internal
+   */
+  syncValidationClasses(): void {
+    return this.commonMethods.syncValidationClasses();
+  }
+
+  /**
+   * Clears the input field value and resets validation state.
+   * Sets the value to empty and removes touched state to suppress validation.
+   */
+  @Method()
+  async clear(): Promise<void> {
+    this._isClearing = true;
+    this.touched = false;
+    this.isInputInvalid = false;
+    this.isInvalid = false;
+    this.invalidReason = undefined;
+    this.value = '';
+    this.time = null;
+    this.updateFormInternalValue('');
+    this.valueChange.emit('');
+    this.syncValidationClasses();
+    this._isClearing = false;
   }
 
   render() {
@@ -504,65 +611,54 @@ export class TimeInput implements IxInputFieldComponent<string> {
       this.i18nErrorTimeUnparsable
     );
 
-    return (
-      <Host
-        class={{
-          disabled: this.disabled,
-          readonly: this.readonly,
-        }}
-      >
-        <ix-field-wrapper
-          label={this.label}
-          helperText={this.helperText}
-          isInvalid={this.isInvalid}
-          invalidText={invalidText}
-          infoText={this.infoText}
-          isInfo={this.isInfo}
-          isWarning={this.isWarning}
-          warningText={this.warningText}
-          isValid={this.isValid}
-          validText={this.validText}
-          showTextAsTooltip={this.showTextAsTooltip}
-          required={this.required}
-          controlRef={this.inputElementRef}
-        >
-          {this.renderInput()}
-        </ix-field-wrapper>
-        <ix-dropdown
-          data-testid="time-dropdown"
-          trigger={this.inputElementRef.waitForCurrent()}
-          ref={this.dropdownElementRef}
-          closeBehavior="outside"
-          suppressOverflowBehavior={true}
-          show={this.show}
-          onShowChanged={(event) => {
-            this.show = event.detail;
+    return renderFieldWrapper({
+      host: this.hostElement,
+      disabled: this.disabled,
+      readonly: this.readonly,
+      label: this.label,
+      helper: this.helperText,
+      invalid: this.isInvalid,
+      invalidText,
+      info: this.infoText,
+      isInfo: this.isInfo,
+      warning: this.isWarning,
+      warningText: this.warningText,
+      valid: this.isValid,
+      validText: this.validText,
+      tooltip: this.showTextAsTooltip,
+      required: this.required,
+      inputRef: this.inputElementRef,
+      input: this.renderInput(),
+      dropdown: (
+        <ix-time-picker
+          ref={this.timePickerRef}
+          format={this.format}
+          time={this.time ?? ''}
+          hourInterval={this.hourInterval}
+          minuteInterval={this.minuteInterval}
+          secondInterval={this.secondInterval}
+          millisecondInterval={this.millisecondInterval}
+          embedded
+          hideHeader={this.hideHeader}
+          i18nConfirmTime={this.i18nSelectTime}
+          i18nHeader={this.i18nTime}
+          i18nHourColumnHeader={this.i18nHourColumnHeader}
+          i18nSecondColumnHeader={this.i18nSecondColumnHeader}
+          i18nMinuteColumnHeader={this.i18nMinuteColumnHeader}
+          i18nMillisecondColumnHeader={this.i18nMillisecondColumnHeader}
+          onTimeSelect={(event: IxTimePickerCustomEvent<string>) => {
+            this.onInput(event.detail);
+            this.show = false;
           }}
-        >
-          <ix-time-picker
-            ref={this.timePickerRef}
-            format={this.format}
-            time={this.time ?? ''}
-            hourInterval={this.hourInterval}
-            minuteInterval={this.minuteInterval}
-            secondInterval={this.secondInterval}
-            millisecondInterval={this.millisecondInterval}
-            embedded
-            hideHeader={this.hideHeader}
-            i18nConfirmTime={this.i18nSelectTime}
-            i18nHeader={this.i18nTime}
-            i18nHourColumnHeader={this.i18nHourColumnHeader}
-            i18nSecondColumnHeader={this.i18nSecondColumnHeader}
-            i18nMinuteColumnHeader={this.i18nMinuteColumnHeader}
-            i18nMillisecondColumnHeader={this.i18nMillisecondColumnHeader}
-            onTimeSelect={(event: IxTimePickerCustomEvent<string>) => {
-              this.onInput(event.detail);
-
-              this.show = false;
-            }}
-          ></ix-time-picker>
-        </ix-dropdown>
-      </Host>
-    );
+        ></ix-time-picker>
+      ),
+      testId: 'time-dropdown',
+      trigger: () => this.inputElementRef.waitForCurrent(),
+      dropdownRef: this.dropdownElementRef,
+      show: this.show,
+      onShow: (event) => {
+        this.show = event.detail;
+      },
+    });
   }
 }
diff --git a/packages/core/src/components/utils/field-group-utils.ts b/packages/core/src/components/utils/field-group-utils.ts
new file mode 100644
index 00000000000..68971d40611
--- /dev/null
+++ b/packages/core/src/components/utils/field-group-utils.ts
@@ -0,0 +1,45 @@
+export interface FieldGroupValidationOptions<T extends HTMLElement> {
+  selector: string;
+  isChecked: (el: T) => boolean;
+  isRequired: (el: T) => boolean;
+  updateValidationClasses: (
+    elements: T[],
+    isChecked: boolean,
+    touched: boolean,
+    formSubmissionAttempted: boolean
+  ) => void;
+  clearValidationState: (
+    host: HTMLElement,
+    elements: T[],
+    invalidText?: string
+  ) => void;
+}
+
+export function useFieldGroupValidation<T extends HTMLElement>(
+  hostElement: HTMLElement,
+  options: FieldGroupValidationOptions<T>
+) {
+  function getElements(): T[] {
+    return Array.from(hostElement.querySelectorAll(options.selector));
+  }
+
+  function hasAnyChecked(): boolean {
+    const elements = getElements().filter(options.isRequired);
+    if (elements.length > 0 && (elements[0] as any).name) {
+      const name = (elements[0] as any).name;
+      const form = hostElement.closest('form');
+      const allWithSameName: NodeListOf<T> = form
+        ? form.querySelectorAll(`${options.selector}[name="${name}"]`)
+        : document.querySelectorAll(`${options.selector}[name="${name}"]`);
+      return Array.from(allWithSameName)
+        .filter(options.isRequired)
+        .some(options.isChecked);
+    }
+    return elements.some(options.isChecked);
+  }
+
+  return {
+    getElements,
+    hasAnyChecked,
+  };
+}
diff --git a/packages/core/src/components/utils/input/index.ts b/packages/core/src/components/utils/input/index.ts
index bced371b1a4..933d2a41ad4 100644
--- a/packages/core/src/components/utils/input/index.ts
+++ b/packages/core/src/components/utils/input/index.ts
@@ -10,6 +10,7 @@ import { EventEmitter } from '@stencil/core';
 import { IxComponent } from '../internal';
 
 export * from './validation';
+export * from './picker-input-common';
 
 export interface FieldWrapperInterface {
   /**
diff --git a/packages/core/src/components/utils/input/picker-input-common.tsx b/packages/core/src/components/utils/input/picker-input-common.tsx
new file mode 100644
index 00000000000..1c7a6ba1970
--- /dev/null
+++ b/packages/core/src/components/utils/input/picker-input-common.tsx
@@ -0,0 +1,356 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { EventEmitter, h, Host } from '@stencil/core';
+import { syncValidationClasses, ValidationResults } from './validation';
+import { handleSubmitOnEnterKeydown } from '../../input/input.util';
+import { closeDropdown as closeDropdownUtil } from './picker-input.util';
+
+export interface SyncOptions<T = string | undefined> {
+  updateFormInternalValue: (value: T) => void;
+  valueChange: EventEmitter<T>;
+  value: T;
+
+  hostElement: HTMLElement;
+  suppressValidation: boolean;
+  required?: boolean;
+  touched: boolean;
+  isInputInvalid: boolean;
+}
+
+export function syncState<T = string | undefined>(
+  options: SyncOptions<T>
+): void {
+  options.updateFormInternalValue(options.value);
+  options.valueChange.emit(options.value);
+
+  syncValidationClasses({
+    hostElement: options.hostElement,
+    suppressValidation: options.suppressValidation,
+    required: options.required,
+    value: options.value as string | undefined,
+    touched: options.touched,
+    isInputInvalid: options.isInputInvalid,
+  });
+}
+
+export interface WatchConfig<T = string> {
+  newValue: T;
+  required?: boolean;
+  onInput: (value: T) => void;
+  setTouched?: (touched: boolean) => void;
+  isClearing?: boolean;
+}
+
+export function watchValue<T = string>(config: WatchConfig<T>): void {
+  if (
+    !config.isClearing &&
+    !config.newValue &&
+    config.required &&
+    config.setTouched
+  ) {
+    config.setTouched(true);
+  }
+
+  config.onInput(config.newValue);
+}
+
+export interface EventConfig {
+  show: boolean;
+  setTouched: (touched: boolean) => void;
+  onInput: (value: string) => void;
+  openDropdown: () => void;
+  ixFocus: EventEmitter<void>;
+  ixBlur: EventEmitter<void>;
+  syncValidationClasses: () => void;
+  handleInputKeyDown?: (event: KeyboardEvent) => void;
+  alwaysSetTouchedOnBlur?: boolean;
+}
+
+export function onInput(config: EventConfig) {
+  return (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    config.setTouched(true);
+    config.onInput(target.value);
+  };
+}
+
+export function onClick(config: EventConfig) {
+  return (event: Event) => {
+    if (config.show) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+}
+
+export function onFocus(config: EventConfig) {
+  return async () => {
+    config.openDropdown();
+    config.ixFocus.emit();
+  };
+}
+
+export function onBlur(config: EventConfig) {
+  return () => {
+    config.ixBlur.emit();
+    if (config.alwaysSetTouchedOnBlur) {
+      config.setTouched(true);
+    }
+    config.syncValidationClasses();
+  };
+}
+
+export function onKeyDown(config: EventConfig) {
+  return (event: KeyboardEvent) => {
+    if (config.handleInputKeyDown) {
+      config.handleInputKeyDown(event);
+    }
+  };
+}
+
+export interface ValidationOptions {
+  hostElement: HTMLElement;
+  suppressValidation: boolean;
+  required?: boolean;
+  value: string | undefined;
+  touched: boolean;
+  isInputInvalid: boolean;
+}
+
+export function syncValidation(options: ValidationOptions): void {
+  syncValidationClasses({
+    hostElement: options.hostElement,
+    suppressValidation: options.suppressValidation,
+    required: options.required,
+    value: options.value,
+    touched: options.touched,
+    isInputInvalid: options.isInputInvalid,
+  });
+}
+
+export function getNativeInput(inputElementRef: {
+  waitForCurrent: () => Promise<HTMLInputElement>;
+}): Promise<HTMLInputElement> {
+  return inputElementRef.waitForCurrent();
+}
+
+export async function focusInput(inputElementRef: {
+  waitForCurrent: () => Promise<HTMLInputElement>;
+}): Promise<void> {
+  return (await getNativeInput(inputElementRef)).focus();
+}
+
+export function getTouchedState(touched: boolean): Promise<boolean> {
+  return Promise.resolve(touched);
+}
+
+export interface PickerFieldWrapperProps {
+  host: HTMLElement;
+  disabled?: boolean;
+  readonly?: boolean;
+  label?: string;
+  helper?: string;
+  invalid?: boolean;
+  invalidText?: string;
+  info?: string;
+  isInfo?: boolean;
+  warning?: boolean;
+  warningText?: string;
+  valid?: boolean;
+  validText?: string;
+  tooltip?: boolean;
+  required?: boolean;
+  inputRef: any;
+  input: any;
+  dropdown: any;
+  testId: string;
+  trigger: () => Promise<HTMLElement>;
+  dropdownRef?: any;
+  show?: boolean;
+  onShow?: (event: any) => void;
+}
+
+export function renderFieldWrapper(props: PickerFieldWrapperProps) {
+  return (
+    <Host
+      class={{
+        disabled: !!props.disabled,
+        readonly: !!props.readonly,
+      }}
+    >
+      <ix-field-wrapper
+        label={props.label}
+        helperText={props.helper}
+        isInvalid={props.invalid}
+        invalidText={props.invalidText}
+        infoText={props.info}
+        isInfo={props.isInfo}
+        isWarning={props.warning}
+        warningText={props.warningText}
+        isValid={props.valid}
+        validText={props.validText}
+        showTextAsTooltip={props.tooltip}
+        required={props.required}
+        controlRef={props.inputRef}
+        htmlForLabel={props.host.id}
+      >
+        {props.input}
+      </ix-field-wrapper>
+      <ix-dropdown
+        data-testid={props.testId}
+        trigger={props.trigger()}
+        ref={props.dropdownRef}
+        closeBehavior="outside"
+        suppressOverflowBehavior={true}
+        show={props.show}
+        onShowChanged={props.onShow}
+      >
+        {props.dropdown}
+      </ix-dropdown>
+    </Host>
+  );
+}
+
+export interface PickerEventConfigOptions {
+  show: boolean;
+  setTouched: (touched: boolean) => void;
+  onInput: (value: string) => void;
+  openDropdown: () => Promise<any>;
+  ixFocus: EventEmitter<void>;
+  ixBlur: EventEmitter<void>;
+  syncValidationClasses: () => void;
+  handleInputKeyDown?: (event: KeyboardEvent) => void;
+  alwaysSetTouchedOnBlur?: boolean;
+}
+
+export function createEventConfig(
+  options: PickerEventConfigOptions
+): EventConfig {
+  return {
+    show: options.show,
+    setTouched: options.setTouched,
+    onInput: options.onInput,
+    openDropdown: () => {
+      options.openDropdown();
+    },
+    ixFocus: options.ixFocus,
+    ixBlur: options.ixBlur,
+    syncValidationClasses: options.syncValidationClasses,
+    handleInputKeyDown: options.handleInputKeyDown,
+    alwaysSetTouchedOnBlur: options.alwaysSetTouchedOnBlur,
+  };
+}
+
+export interface InputMethodsContext {
+  inputElementRef: { waitForCurrent: () => Promise<HTMLInputElement> };
+  touched: boolean;
+  hostElement: HTMLElement;
+  suppressValidation: boolean;
+  required?: boolean;
+  value: string | undefined;
+  isInputInvalid: boolean;
+}
+
+export function createInputMethods(context: InputMethodsContext) {
+  return {
+    async focusInput(): Promise<void> {
+      return focusInput(context.inputElementRef);
+    },
+
+    isTouched(): Promise<boolean> {
+      return getTouchedState(context.touched);
+    },
+
+    syncValidationClasses(): void {
+      syncValidation({
+        hostElement: context.hostElement,
+        suppressValidation: context.suppressValidation,
+        required: context.required,
+        value: context.value,
+        touched: context.touched,
+        isInputInvalid: context.isInputInvalid,
+      });
+    },
+  };
+}
+
+export interface DropdownMethodsContext {
+  dropdownElementRef: { current: HTMLIxDropdownElement | null };
+  hostElement: HTMLElement;
+  show: boolean;
+  touched: boolean;
+  openDropdown: () => Promise<void>;
+  ixFocus: EventEmitter<void>;
+  ixBlur: EventEmitter<void>;
+  syncValidationClasses: () => void;
+  onInput: (value: string) => void;
+  handleInputKeyDown: (event: KeyboardEvent) => void;
+}
+
+export function createDropdownMethods(context: DropdownMethodsContext) {
+  return {
+    openDropdown: context.openDropdown,
+    closeDropdown: () => closeDropdownUtil(context.dropdownElementRef),
+    getEventConfig: () =>
+      createEventConfig({
+        show: context.show,
+        setTouched: (touched: boolean) => (context.touched = touched),
+        onInput: context.onInput,
+        openDropdown: context.openDropdown,
+        ixFocus: context.ixFocus,
+        ixBlur: context.ixBlur,
+        syncValidationClasses: context.syncValidationClasses,
+        handleInputKeyDown: context.handleInputKeyDown,
+      }),
+    checkClassList: () => {
+      return context.hostElement.classList.contains('ix-invalid');
+    },
+  };
+}
+
+export function createKeyDownHandler(
+  suppressSubmitOnEnter: boolean,
+  formInternals: ElementInternals
+) {
+  return (event: KeyboardEvent) => {
+    handleSubmitOnEnterKeydown(
+      event,
+      suppressSubmitOnEnter,
+      formInternals.form
+    );
+  };
+}
+
+export function handleValidationLifecycle(
+  suppressValidation: boolean,
+  isInputInvalid: boolean,
+  results: ValidationResults,
+  setters: {
+    setIsInvalid: (value: boolean) => void;
+    setIsInfo: (value: boolean) => void;
+    setIsValid: (value: boolean) => void;
+    setIsWarning: (value: boolean) => void;
+  }
+) {
+  const { isInfo, isInvalid, isInvalidByRequired, isValid, isWarning } =
+    results;
+
+  if (suppressValidation) {
+    setters.setIsInvalid(false);
+    setters.setIsInfo(false);
+    setters.setIsValid(false);
+    setters.setIsWarning(false);
+    return;
+  }
+
+  setters.setIsInvalid(isInvalid || isInvalidByRequired || isInputInvalid);
+  setters.setIsInfo(isInfo);
+  setters.setIsValid(isValid);
+  setters.setIsWarning(isWarning);
+}
diff --git a/packages/core/src/components/utils/input/validation.ts b/packages/core/src/components/utils/input/validation.ts
index 3c7d1dec6c8..8ba7b19809a 100644
--- a/packages/core/src/components/utils/input/validation.ts
+++ b/packages/core/src/components/utils/input/validation.ts
@@ -139,11 +139,17 @@ export function HookValidationLifecycle(options?: {
           typeof host.getValidityState === 'function'
         ) {
           const validityState = await host.getValidityState();
+          const touched = await isTouched(host);
 
           host.classList.toggle(
             `ix-invalid--validity-patternMismatch`,
             validityState.patternMismatch
           );
+
+          host.classList.toggle(
+            'ix-invalid--validity-invalid',
+            !validityState.valid && touched
+          );
         }
       };
 
@@ -201,3 +207,45 @@ export function getValidationText(
   }
   return customInvalidText;
 }
+
+export interface ValidationClassSyncOptions {
+  hostElement: HTMLElement;
+  suppressValidation: boolean;
+  required?: boolean;
+  value?: string;
+  touched: boolean;
+  isInputInvalid: boolean;
+}
+
+/**
+ * Synchronizes CSS validation classes with the component's validation state.
+ * This method ensures proper visual styling based on validation status, particularly for Vue.
+ * @param options - Configuration object containing validation state
+ * @internal
+ */
+export function syncValidationClasses(
+  options: ValidationClassSyncOptions
+): void {
+  if (options.suppressValidation) {
+    return;
+  }
+
+  const isValuePresent = options.required ? !!options.value : true;
+  const isRequiredInvalid =
+    options.required && !isValuePresent && options.touched;
+  const shouldShowPatternMismatch = options.isInputInvalid && options.touched;
+
+  if (options.required) {
+    options.hostElement.classList.toggle(
+      'ix-invalid--required',
+      isRequiredInvalid
+    );
+  } else {
+    options.hostElement.classList.remove('ix-invalid--required');
+  }
+
+  options.hostElement.classList.toggle(
+    'ix-invalid--validity-patternMismatch',
+    shouldShowPatternMismatch
+  );
+}