diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
index 27500eaf4c9..3413d854412 100644
--- a/packages/angular/src/components.ts
+++ b/packages/angular/src/components.ts
@@ -401,7 +401,8 @@ export declare interface IxCategoryFilter extends Components.IxCategoryFilter {
 
 
 @ProxyCmp({
-  inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value']
+  inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value'],
+  methods: ['clear']
 })
 @Component({
   selector: 'ix-checkbox',
@@ -441,7 +442,8 @@ export declare interface IxCheckbox extends Components.IxCheckbox {
 
 
 @ProxyCmp({
-  inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText']
+  inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText'],
+  methods: ['clear']
 })
 @Component({
   selector: 'ix-checkbox-group',
@@ -629,7 +631,7 @@ The event payload contains information about the selected date range.
 
 @ProxyCmp({
   inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', '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 +1328,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', 'clear']
 })
 @Component({
   selector: 'ix-input',
@@ -2003,7 +2005,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', 'clear']
 })
 @Component({
   selector: 'ix-number-input',
@@ -2214,7 +2216,8 @@ export declare interface IxPushCard extends Components.IxPushCard {}
 
 
 @ProxyCmp({
-  inputs: ['checked', 'disabled', 'label', 'name', 'required', 'value']
+  inputs: ['checked', 'disabled', 'label', 'name', 'required', 'value'],
+  methods: ['clear']
 })
 @Component({
   selector: 'ix-radio',
@@ -2254,7 +2257,8 @@ export declare interface IxRadio extends Components.IxRadio {
 
 
 @ProxyCmp({
-  inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText']
+  inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
+  methods: ['clear']
 })
 @Component({
   selector: 'ix-radio-group',
@@ -2528,7 +2532,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', 'clear']
 })
 @Component({
   selector: 'ix-textarea',
@@ -2592,7 +2596,7 @@ export declare interface IxTile extends Components.IxTile {}
 
 @ProxyCmp({
   inputs: ['disabled', 'enableTopLayer', '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 fabb174b735..dee74da82be 100644
--- a/packages/angular/standalone/src/components.ts
+++ b/packages/angular/standalone/src/components.ts
@@ -502,7 +502,8 @@ export declare interface IxCategoryFilter extends Components.IxCategoryFilter {
 
 @ProxyCmp({
   defineCustomElementFn: defineIxCheckbox,
-  inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value']
+  inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value'],
+  methods: ['clear']
 })
 @Component({
   selector: 'ix-checkbox',
@@ -542,7 +543,8 @@ export declare interface IxCheckbox extends Components.IxCheckbox {
 
 @ProxyCmp({
   defineCustomElementFn: defineIxCheckboxGroup,
-  inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText']
+  inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText'],
+  methods: ['clear']
 })
 @Component({
   selector: 'ix-checkbox-group',
@@ -730,7 +732,7 @@ The event payload contains information about the selected date range.
 @ProxyCmp({
   defineCustomElementFn: defineIxDateInput,
   inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', '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 +1429,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', 'clear']
 })
 @Component({
   selector: 'ix-input',
@@ -2104,7 +2106,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', 'clear']
 })
 @Component({
   selector: 'ix-number-input',
@@ -2315,7 +2317,8 @@ export declare interface IxPushCard extends Components.IxPushCard {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIxRadio,
-  inputs: ['checked', 'disabled', 'label', 'name', 'required', 'value']
+  inputs: ['checked', 'disabled', 'label', 'name', 'required', 'value'],
+  methods: ['clear']
 })
 @Component({
   selector: 'ix-radio',
@@ -2355,7 +2358,8 @@ export declare interface IxRadio extends Components.IxRadio {
 
 @ProxyCmp({
   defineCustomElementFn: defineIxRadioGroup,
-  inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText']
+  inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
+  methods: ['clear']
 })
 @Component({
   selector: 'ix-radio-group',
@@ -2629,7 +2633,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', 'clear']
 })
 @Component({
   selector: 'ix-textarea',
@@ -2693,7 +2697,7 @@ export declare interface IxTile extends Components.IxTile {}
 @ProxyCmp({
   defineCustomElementFn: defineIxTimeInput,
   inputs: ['disabled', 'enableTopLayer', '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 ee8dcbeb8b9..4b1126c23fb 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -629,6 +629,10 @@ export namespace Components {
           * @default false
          */
         "checked": boolean;
+        /**
+          * Clear the checked state and reset validation
+         */
+        "clear": () => Promise<void>;
         /**
           * Disabled state of the checkbox component
           * @default false
@@ -665,6 +669,10 @@ export namespace Components {
      * @form-ready 
      */
     interface IxCheckboxGroup {
+        /**
+          * Clear all checked checkboxes and reset validation state
+         */
+        "clear": () => Promise<void>;
         /**
           * Alignment of the checkboxes in the group
           * @default 'column'
@@ -978,6 +986,7 @@ 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;
+        "clear": () => Promise<void>;
         /**
           * Disabled attribute
           * @default false
@@ -989,9 +998,6 @@ export namespace Components {
           * @since 4.3.0
          */
         "enableTopLayer": boolean;
-        /**
-          * Focuses the input field
-         */
         "focusInput": () => Promise<void>;
         /**
           * Date format string. See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
@@ -999,9 +1005,6 @@ export namespace Components {
          */
         "format": string;
         "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
-        /**
-          * Get the native input element
-         */
         "getNativeInputElement": () => Promise<HTMLInputElement>;
         "getValidityState": () => Promise<ValidityState>;
         "hasValidValue": () => Promise<boolean>;
@@ -1022,9 +1025,6 @@ export namespace Components {
           * Error text below the input field
          */
         "invalidText"?: string;
-        /**
-          * Returns whether the text field has been touched.
-         */
         "isTouched": () => Promise<boolean>;
         /**
           * Label of the input field
@@ -1958,6 +1958,10 @@ export namespace Components {
           * The allowed characters pattern for the text field.
          */
         "allowedCharactersPattern"?: 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>;
         /**
           * Specifies whether the text field is disabled.
           * @default false
@@ -2601,6 +2605,10 @@ export namespace Components {
           * The allowed characters pattern for the input field
          */
         "allowedCharactersPattern"?: 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>;
         /**
           * Disables the input field
           * @default false
@@ -2992,6 +3000,10 @@ export namespace Components {
           * @default false
          */
         "checked": boolean;
+        /**
+          * Clear the checked state and reset validation
+         */
+        "clear": () => Promise<void>;
         /**
           * Disabled state of the radio component
           * @default false
@@ -3023,6 +3035,10 @@ export namespace Components {
      * @form-ready 
      */
     interface IxRadioGroup {
+        /**
+          * Clear the selected radio button and reset validation state
+         */
+        "clear": () => Promise<void>;
         /**
           * Alignment of the radio buttons in the group
           * @default 'column'
@@ -3488,6 +3504,10 @@ export namespace Components {
      * @form-ready 
      */
     interface IxTextarea {
+        /**
+          * Clears the input field value and resets validation state. Sets the value to empty and removes touched state to suppress validation.
+         */
+        "clear": () => Promise<void>;
         /**
           * Determines if the textarea field is disabled.
           * @default false
@@ -3502,6 +3522,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.
@@ -3600,6 +3624,7 @@ export namespace Components {
      * @form-ready 
      */
     interface IxTimeInput {
+        "clear": () => Promise<void>;
         /**
           * Disabled attribute
           * @default false
@@ -3611,9 +3636,6 @@ export namespace Components {
           * @since 4.3.0
          */
         "enableTopLayer": boolean;
-        /**
-          * Focuses the input field
-         */
         "focusInput": () => Promise<void>;
         /**
           * Format of time string See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
@@ -3621,9 +3643,6 @@ export namespace Components {
          */
         "format": string;
         "getAssociatedFormElement": () => Promise<HTMLFormElement | null>;
-        /**
-          * Get the native input element
-         */
         "getNativeInputElement": () => Promise<HTMLInputElement>;
         "getValidityState": () => Promise<ValidityState>;
         "hasValidValue": () => Promise<boolean>;
@@ -3685,9 +3704,6 @@ export namespace Components {
           * Error text below the input field
          */
         "invalidText"?: string;
-        /**
-          * Returns whether the text field has been touched.
-         */
         "isTouched": () => Promise<boolean>;
         /**
           * Label of the input field
diff --git a/packages/core/src/components/checkbox-group/checkbox-group.tsx b/packages/core/src/components/checkbox-group/checkbox-group.tsx
index 11d1199250d..559582afccc 100644
--- a/packages/core/src/components/checkbox-group/checkbox-group.tsx
+++ b/packages/core/src/components/checkbox-group/checkbox-group.tsx
@@ -14,7 +14,14 @@ 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';
+import { clearInputValue } from '../input/input.util';
 
 /**
  * @form-ready
@@ -77,36 +84,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 +154,140 @@ export class CheckboxGroup
     );
   }
 
+  /**
+   * Clear all checked checkboxes and reset validation state
+   */
+  @Method()
+  async clear(): Promise<void> {
+    await clearInputValue(this.hostElement);
+  }
+
+  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/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..2c7ac7952f2 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -23,6 +23,15 @@ import {
 import { a11yBoolean } from '../utils/a11y';
 import { HookValidationLifecycle, IxFormComponent } from '../utils/input';
 import { makeRef } from '../utils/make-ref';
+import { clearInputValue } from '../input/input.util';
+import {
+  getParentForm,
+  hasAnyCheckboxChecked,
+  isFormNoValidate,
+  setupFormSubmitListener,
+  updateCheckboxValidationClasses,
+  updateGroupValidationClasses,
+} from './checkbox-validation';
 
 /**
  * @form-ready
@@ -91,6 +100,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 +219,7 @@ export class Checkbox implements IxFormComponent<string> {
   onCheckedChange() {
     this.touched = true;
     this.updateFormInternalValue();
+    this.syncValidationClasses();
   }
 
   @Watch('value')
@@ -114,6 +229,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() {
@@ -142,6 +280,18 @@ export class Checkbox implements IxFormComponent<string> {
     return Promise.resolve(this.touched);
   }
 
+  /**
+   * Clear the checked state and reset validation
+   */
+  @Method()
+  async clear(): Promise<void> {
+    await clearInputValue(this.hostElement, {
+      additionalCleanup: () => {
+        this.checked = false;
+      },
+    });
+  }
+
   @HookValidationLifecycle()
   updateClassMappings() {
     /** This function is intentionally empty */
@@ -191,8 +341,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/date-input/date-input.tsx b/packages/core/src/components/date-input/date-input.tsx
index 606f6154c60..35adff9245d 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,13 +34,30 @@ import {
   ValidationResults,
   createClassMutationObserver,
   getValidationText,
+  shouldSuppressInternalValidation,
+  syncState,
+  watchValue,
+  onInput,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  renderFieldWrapper,
+  createEventConfig,
+  createInputMethods,
+  createDropdownMethods,
+  createKeyDownHandler,
+  handleValidationLifecycle,
 } from '../utils/input';
 import {
-  closeDropdown as closeDropdownUtil,
-  createValidityState,
   handleIconClick,
   openDropdown as openDropdownUtil,
+  createPickerMethods,
+  createInputRenderer,
+  createRenderConfig,
+  createInputConfig,
 } from '../utils/input/picker-input.util';
+import { BasePickerInput } from '../utils/input/base-picker-input';
 import { makeRef } from '../utils/make-ref';
 import type { DateInputValidityState } from './date-input.types';
 
@@ -58,10 +73,15 @@ import type { DateInputValidityState } from './date-input.types';
   shadow: true,
   formAssociated: true,
 })
-export class DateInput implements IxInputFieldComponent<string | undefined> {
+export class DateInput
+  extends BasePickerInput
+  implements IxInputFieldComponent<string | undefined>
+{
   @Element() hostElement!: HTMLIxDateInputElement;
   @AttachInternals() formInternals!: ElementInternals;
 
+  @State() isInputInvalid: boolean = false;
+
   /**
    * Name of the input element
    */
@@ -78,7 +98,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 +139,11 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
    */
   @Prop() required?: boolean;
 
+  @Watch('required')
+  onRequiredChange() {
+    this.syncValidationClasses();
+  }
+
   /**
    * Helper text below the input field
    */
@@ -226,32 +257,16 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
    */
   @Event() validityStateChange!: EventEmitter<DateInputValidityState>;
 
-  /** @internal */
+  /** @internal */
   @Event() ixFocus!: EventEmitter<void>;
 
-  /** @internal */
+  /** @internal */
   @Event() ixBlur!: EventEmitter<void>;
 
-  @State() show = false;
   @State() from?: string | null = null;
-  @State() isInputInvalid = false;
-  @State() isInvalid = false;
-  @State() isValid = false;
-  @State() isInfo = false;
-  @State() isWarning = false;
-  @State() focus = false;
-
-  private readonly slotStartRef = makeRef<HTMLDivElement>();
-  private readonly slotEndRef = makeRef<HTMLDivElement>();
 
   private readonly datepickerRef = makeRef<HTMLIxDatePickerElement>();
-
-  private readonly inputElementRef = makeRef<HTMLInputElement>();
-  private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();
   private classObserver?: ClassMutationObserver;
-  private invalidReason?: string;
-  private touched = false;
-
   private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;
 
   updateFormInternalValue(value: string | undefined): void {
@@ -263,10 +278,18 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
     this.value = value;
   }
 
-  connectedCallback(): void {
-    this.classObserver = createClassMutationObserver(this.hostElement, () =>
-      this.checkClassList()
+  private updatePaddings(): void {
+    adjustPaddingForStartAndEnd(
+      this.slotStartRef.current,
+      this.slotEndRef.current,
+      this.inputElementRef.current
     );
+  }
+
+  connectedCallback(): void {
+    this.classObserver = createClassMutationObserver(this.hostElement, () => {
+      this.isInvalid = this.dropdownMethods.checkClassList();
+    });
 
     this.disposableChangesAndVisibilityObservers =
       addDisposableChangesAndVisibilityObservers(
@@ -283,18 +306,9 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
       this.watchValue();
     }
 
-    this.checkClassList();
     this.updateFormInternalValue(this.value);
   }
 
-  private updatePaddings() {
-    adjustPaddingForStartAndEnd(
-      this.slotStartRef.current,
-      this.slotEndRef.current,
-      this.inputElementRef.current
-    );
-  }
-
   disconnectedCallback(): void {
     this.classObserver?.destroy();
     this.disposableChangesAndVisibilityObservers?.();
@@ -308,6 +322,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);
   }
 
@@ -319,8 +337,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;
     }
 
@@ -328,125 +350,142 @@ 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.dropdownMethods.closeDropdown();
+    this.emitChangesAndSync(value);
+  }
+
+  private handleInvalidInput(value: string | undefined): void {
+    this.touched = true;
+    this.from = undefined;
+    this.emitChangesAndSync(value);
   }
 
   onCalenderClick(event: Event) {
     handleIconClick(
       event,
       this.show,
-      () => this.openDropdown(),
+      () => this.dropdownMethods.openDropdown(),
       this.inputElementRef
     );
   }
 
-  async openDropdown() {
-    return openDropdownUtil(this.dropdownElementRef);
-  }
-
-  async closeDropdown() {
-    return closeDropdownUtil(this.dropdownElementRef);
-  }
-
-  private checkClassList() {
-    this.isInvalid = this.hostElement.classList.contains('ix-invalid');
+  protected get pickerMethods() {
+    return createPickerMethods({
+      component: this,
+      show: this.show,
+      touched: this.touched,
+      isInputInvalid: this.isInputInvalid,
+      suppressValidation: this.suppressValidation,
+      required: !!this.required,
+      value: this.value,
+      suppressSubmitOnEnter: this.suppressSubmitOnEnter,
+      formInternals: this.formInternals,
+      inputElementRef: this.inputElementRef,
+      dropdownElementRef: this.dropdownElementRef,
+      hostElement: this.hostElement,
+      openDropdown: () => openDropdownUtil(this.dropdownElementRef),
+      ixFocus: this.ixFocus,
+      ixBlur: this.ixBlur,
+      syncValidationClasses: () => this.syncValidationClasses(),
+      onInput: (value: string) => this.onInput(value),
+      setTouched: (touched: boolean) => (this.touched = touched),
+      setIsInvalid: (value: boolean) => (this.isInvalid = value),
+      setIsInfo: (value: boolean) => (this.isInfo = value),
+      setIsValid: (value: boolean) => (this.isValid = value),
+      setIsWarning: (value: boolean) => (this.isWarning = value),
+      validityStateChange: this.validityStateChange,
+      invalidReason: this.invalidReason,
+      createInputMethods,
+      createDropdownMethods,
+      createEventConfig,
+      createKeyDownHandler,
+      handleValidationLifecycle,
+    });
   }
 
-  private handleInputKeyDown(event: KeyboardEvent) {
-    handleSubmitOnEnterKeydown(
-      event,
-      this.suppressSubmitOnEnter,
-      this.formInternals.form
-    );
+  private getEventConfig() {
+    return this.pickerMethods.getEventConfig();
   }
 
   private renderInput() {
-    return (
-      <div class="input-wrapper">
-        <SlotStart
-          slotStartRef={this.slotStartRef}
-          onSlotChange={() => this.updatePaddings()}
-        ></SlotStart>
-        <input
-          autoComplete="off"
-          class={{
-            'is-invalid': this.isInputInvalid,
-          }}
-          disabled={this.disabled}
-          readOnly={this.readonly}
-          readonly={this.readonly}
-          required={this.required}
-          ref={this.inputElementRef}
-          type="text"
-          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)}
-          style={{
-            textAlign: this.textAlignment,
-          }}
-        ></input>
-        <SlotEnd
-          slotEndRef={this.slotEndRef}
-          onSlotChange={() => this.updatePaddings()}
-        >
-          <ix-icon-button
-            data-testid="open-calendar"
-            class={{ 'calendar-hidden': this.disabled || this.readonly }}
-            variant="subtle-tertiary"
-            icon={iconCalendar}
-            onClick={(event) => this.onCalenderClick(event)}
-            aria-label={this.ariaLabelCalendarButton}
-          ></ix-icon-button>
-        </SlotEnd>
-      </div>
-    );
+    const renderPickerInputFn = createInputRenderer(h, SlotStart, SlotEnd);
+    const config = createInputConfig({
+      component: this,
+      getEventConfig: () => this.getEventConfig(),
+      onInput,
+      onClick,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      iconButton: (
+        <ix-icon-button
+          data-testid="open-calendar"
+          class={{ 'calendar-hidden': this.disabled || this.readonly }}
+          variant="subtle-tertiary"
+          icon={iconCalendar}
+          onClick={(event) => this.onCalenderClick(event)}
+          aria-label={this.ariaLabelCalendarButton}
+        ></ix-icon-button>
+      ),
+      value: this.value ?? '',
+    });
+    return renderPickerInputFn(config);
   }
 
   @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')
@@ -456,103 +495,50 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
       patternMismatch: state.patternMismatch,
       invalidReason: this.invalidReason,
     });
-  }
 
-  /** @internal */
-  @Method()
-  getValidityState(): Promise<ValidityState> {
-    return Promise.resolve(
-      createValidityState(this.isInputInvalid, !!this.required, this.value)
-    );
-  }
+    if (this.suppressValidation) {
+      return;
+    }
 
-  /**
-   * Get the native input element
-   */
-  @Method()
-  getNativeInputElement(): Promise<HTMLInputElement> {
-    return this.inputElementRef.waitForCurrent();
-  }
+    const shouldShowInputInvalid = this.isInputInvalid && this.touched;
 
-  /**
-   * Focuses the input field
-   */
-  @Method()
-  async focusInput(): Promise<void> {
-    return (await this.getNativeInputElement()).focus();
-  }
-
-  /**
-   * Returns whether the text field has been touched.
-   * @internal
-   */
-  @Method()
-  isTouched(): Promise<boolean> {
-    return Promise.resolve(this.touched);
+    if (shouldShowInputInvalid) {
+      this.isInvalid = true;
+    }
   }
 
   render() {
     const invalidText = getValidationText(
-      this.isInputInvalid,
+      this.isInputInvalid && !this.suppressValidation,
       this.invalidText,
       this.i18nErrorDateUnparsable
     );
 
-    return (
-      <Host
-        class={{
-          disabled: this.disabled,
-          readonly: this.readonly,
+    const config = createRenderConfig(
+      this,
+      this.renderInput(),
+      <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-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"
-          enableTopLayer={this.enableTopLayer}
-          suppressOverflowBehavior
-          show={this.show}
-          onShowChanged={(event) => {
-            this.show = event.detail;
-          }}
-        >
-          <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>,
+      'date-dropdown'
     );
+
+    config.invalidText = invalidText;
+
+    return renderFieldWrapper(config);
   }
 }
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 afd4942d22f..c62a195a1f8 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: HTMLIxDateInputElement) => 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: HTMLIxDateInputElement) => {
+      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: HTMLIxDateInputElement) => 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: HTMLIxDateInputElement) => {
+      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: HTMLIxDateInputElement) => 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: HTMLIxDateInputElement) => {
+      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: HTMLIxDateInputElement) => 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: HTMLIxDateInputElement) => {
+      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: HTMLIxDateInputElement) => {
+      el.required = true;
+    });
+
+    await expect(dateInput).toHaveClass(/ix-invalid--required/);
+
+    await dateInput.evaluate((el: HTMLIxDateInputElement) => {
+      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 d346239b40d..8c6a7f4e6dc 100644
--- a/packages/core/src/components/date-picker/date-picker.tsx
+++ b/packages/core/src/components/date-picker/date-picker.tsx
@@ -323,12 +323,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/input/input.tsx b/packages/core/src/components/input/input.tsx
index baa86b27e65..17e5c205508 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,
+  clearInputValue,
 } from './input.util';
 
 let inputIds = 0;
@@ -274,6 +275,15 @@ export class Input implements IxInputFieldComponent<string> {
     return Promise.resolve(this.touched);
   }
 
+  /**
+   * 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> {
+    return clearInputValue(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..23decf75bc2 100644
--- a/packages/core/src/components/input/input.util.ts
+++ b/packages/core/src/components/input/input.util.ts
@@ -91,7 +91,7 @@ export function onInputBlur<T>(
     throw new Error('Input element is not available');
   }
 
-  input.setAttribute('data-ix-touched', 'true');
+  input.dataset.ixTouched = 'true';
   checkInternalValidity(comp, input);
 }
 
@@ -219,3 +219,137 @@ export function handleSubmitOnEnterKeydown(
     form.requestSubmit();
   }
 }
+
+function isGroupComponent(component: any): boolean {
+  return (
+    component.tagName === 'IX-CHECKBOX-GROUP' ||
+    component.tagName === 'IX-RADIO-GROUP'
+  );
+}
+
+function resetValidationStates(component: any): void {
+  component.isInputInvalid = false;
+  component.isInvalidByRequired = false;
+
+  const validationProps = {
+    isInvalid: false,
+    isValid: false,
+    isInfo: false,
+    isWarning: false,
+  };
+
+  Object.assign(component, validationProps);
+}
+
+function resetOptionalFields(component: any): void {
+  if ('invalidReason' in component) {
+    component.invalidReason = undefined;
+  }
+  if ('from' in component) {
+    component.from = undefined;
+  }
+  if ('time' in component) {
+    component.time = null;
+  }
+
+  if (component.invalidText) {
+    component.invalidText = '';
+  }
+}
+
+function clearGroupValue(
+  comp: HTMLElement,
+  component: any,
+  options?: { childSelector?: string }
+): void {
+  if ('value' in component) {
+    component.value = undefined;
+  }
+
+  comp.classList.remove(
+    'ix-invalid',
+    'ix-invalid--required',
+    'ix-invalid--validity-invalid'
+  );
+
+  const selector = options?.childSelector || 'ix-checkbox, ix-radio';
+  const childElements = Array.from(
+    comp.querySelectorAll<HTMLElement & { checked?: boolean }>(selector)
+  );
+
+  childElements.forEach((child) => {
+    if ('checked' in child) {
+      child.checked = false;
+    }
+    child.classList.remove(
+      'ix-invalid',
+      'ix-invalid--required',
+      'ix-invalid--validity-invalid'
+    );
+  });
+}
+
+async function clearSingleInputValue<T>(
+  comp: IxInputFieldComponent<T>,
+  component: any,
+  emptyValue: T
+): Promise<void> {
+  component.value = emptyValue;
+
+  if ('updateFormInternalValue' in component) {
+    await comp.updateFormInternalValue(emptyValue);
+  }
+  if ('valueChange' in component && component.valueChange?.emit) {
+    comp.valueChange.emit(emptyValue);
+  }
+}
+
+function initializeClearingState(component: any, isGroup: boolean): void {
+  component.isClearing = true;
+  component.touched = false;
+
+  if (isGroup) {
+    component.formSubmissionAttempt = false;
+    component.formSubmissionAttempted = false;
+  }
+}
+
+async function finalizeClearingState(component: any): Promise<void> {
+  if (
+    'syncValidationClasses' in component &&
+    typeof component.syncValidationClasses === 'function'
+  ) {
+    await component.syncValidationClasses();
+  }
+  component.isClearing = false;
+}
+
+export async function clearInputValue<T>(
+  comp: IxInputFieldComponent<T> | HTMLElement,
+  options?: {
+    defaultValue?: T;
+    additionalCleanup?: () => void;
+    childSelector?: string;
+  }
+): Promise<void> {
+  const component = comp as any;
+  const isGroup = isGroupComponent(component);
+
+  initializeClearingState(component, isGroup);
+  resetValidationStates(component);
+  resetOptionalFields(component);
+
+  if (isGroup) {
+    clearGroupValue(comp as HTMLElement, component, options);
+  } else {
+    const emptyValue = options?.defaultValue ?? ('' as T);
+    await clearSingleInputValue(
+      comp as IxInputFieldComponent<T>,
+      component,
+      emptyValue
+    );
+  }
+
+  options?.additionalCleanup?.();
+  await finalizeClearingState(component);
+}
diff --git a/packages/core/src/components/input/number-input.tsx b/packages/core/src/components/input/number-input.tsx
index e0eda27824b..92fb2775d4e 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,
+  clearInputValue,
 } from './input.util';
 
 let numberInputIds = 0;
@@ -422,6 +423,15 @@ export class NumberInput implements IxInputFieldComponent<number> {
     return Promise.resolve(this.touched);
   }
 
+  /**
+   * 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> {
+    return clearInputValue(this, { defaultValue: undefined });
+  }
+
   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..5b6a9ab64a7 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,69 @@ test.describe('prevent initial require validation', async () => {
     });
   });
 });
+
+test.describe('clear method', () => {
+  ['ix-input', 'ix-number-input', 'ix-textarea'].forEach((selector) => {
+    test(`${selector} - should clear value and reset validation state when required field becomes invalid then cleared`, 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.clear());
+
+      await expect(inputComponent).not.toHaveClass(/ix-invalid--required/);
+      await expect(inputComponent).not.toHaveClass(/ix-invalid/);
+
+      await expect(input).toHaveValue('');
+    });
+
+    test(`${selector} - should clear value and reset validation state with value then make invalid then cleared`, 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();
+      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.clear());
+
+      await expect(inputComponent).not.toHaveClass(/ix-invalid--required/);
+      await expect(inputComponent).not.toHaveClass(/ix-invalid/);
+
+      await expect(input).toHaveValue('');
+    });
+  });
+});
diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx
index 0a120966fc5..da5dfba944b 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,
+  clearInputValue,
+} 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);
   }
 
+  /**
+   * 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> {
+    return clearInputValue(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..0f4b4cc87d2 100644
--- a/packages/core/src/components/radio-group/radio-group.tsx
+++ b/packages/core/src/components/radio-group/radio-group.tsx
@@ -25,7 +25,15 @@ 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';
+import { clearInputValue } from '../input/input.util';
 
 /**
  * @form-ready
@@ -102,80 +110,40 @@ 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;
-    }
-
-    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;
+    if (this.cleanupFormListener) {
+      this.cleanupFormListener();
     }
   }
 
-  private hasNestedRequiredRadio() {
-    this.required = this.radiobuttonElements.some(
-      (radiobutton) => radiobutton.required
-    );
-  }
-
-  private isSomeRadioChecked() {
-    return this.radiobuttonElements.some((radio) => radio.checked);
-  }
-
   @Watch('value')
   onValueChangeHandler(newValue: string) {
     this.touched = true;
@@ -216,9 +184,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 +222,144 @@ export class RadiobuttonGroup
     nextRadio.focus();
   }
 
+  /**
+   * Clear the selected radio button and reset validation state
+   */
+  @Method()
+  async clear(): Promise<void> {
+    await clearInputValue(this.hostElement);
+  }
+
+  // --- 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/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..404ab60166a 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -25,6 +25,15 @@ import {
   createClassMutationObserver,
   IxFormComponent,
 } from '../utils/input';
+import { clearInputValue } from '../input/input.util';
+import {
+  getParentForm,
+  isFormNoValidate,
+  handleStandaloneRadioValidation,
+  updateRadioValidationClasses,
+  updateRadioGroupValidationClasses,
+  setupFormSubmitListener,
+} from './radio-validation';
 
 /**
  * @form-ready
@@ -87,6 +96,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 +114,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 +206,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() {
@@ -187,6 +278,18 @@ export class Radio implements IxFormComponent<string> {
     return Promise.resolve(this.formInternals.form);
   }
 
+  /**
+   * Clear the checked state and reset validation
+   */
+  @Method()
+  async clear(): Promise<void> {
+    await clearInputValue(this.hostElement, {
+      additionalCleanup: () => {
+        this.checked = false;
+      },
+    });
+  }
+
   render() {
     let tabIndex = 0;
 
@@ -209,7 +312,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/select/select.tsx b/packages/core/src/components/select/select.tsx
index b88414c88de..9dccb63103b 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -235,6 +235,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>();
@@ -254,6 +256,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);
 
@@ -313,6 +333,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   watchValue(value: string | string[]) {
     this.value = value;
     this.updateSelection();
+    this.syncValidationClasses();
   }
 
   @Watch('dropdownShow')
@@ -484,6 +505,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;
@@ -494,6 +545,9 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   componentWillLoad() {
     this.updateSelection();
     this.updateFormInternalValue(this.value);
+    if (this.required) {
+      this.syncValidationClasses();
+    }
   }
 
   componentDidRender(): void {
@@ -525,6 +579,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) {
@@ -755,6 +848,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   private onInputBlur(event: Event) {
     this.ixBlur.emit();
     this.touched = true;
+    this.syncValidationClasses();
 
     if (this.editable) {
       return;
@@ -890,9 +984,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}
@@ -938,6 +1041,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 8f949449854..6a916e85c57 100644
--- a/packages/core/src/components/select/test/select.ct.ts
+++ b/packages/core/src/components/select/test/select.ct.ts
@@ -1080,3 +1080,187 @@ test('clear button returns empty string in single mode', async ({
 
   expect(emittedValue).toBe('');
 });
+
+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 8d04f72d03b..d00374373db 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: HTMLIxTimeInputElement) => 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: HTMLIxTimeInputElement) => {
+        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: HTMLIxTimeInputElement) => 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: HTMLIxTimeInputElement) => {
+        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',
+    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: HTMLIxTimeInputElement) => 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: HTMLIxTimeInputElement) => {
+        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: HTMLIxTimeInputElement) => 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: HTMLIxTimeInputElement) => {
+        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: HTMLIxTimeInputElement) => {
+        el.required = true;
+      });
+
+      await expect(timeInput).toHaveClass(/ix-invalid--required/);
+
+      await timeInput.evaluate((el: HTMLIxTimeInputElement) => {
+        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 ae3f727b457..b86585ff145 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,
@@ -28,7 +27,6 @@ import {
   DisposableChangesAndVisibilityObservers,
   addDisposableChangesAndVisibilityObservers,
   adjustPaddingForStartAndEnd,
-  handleSubmitOnEnterKeydown,
 } from '../input/input.util';
 import {
   ClassMutationObserver,
@@ -37,13 +35,30 @@ import {
   ValidationResults,
   createClassMutationObserver,
   getValidationText,
+  shouldSuppressInternalValidation,
+  syncState,
+  watchValue,
+  onInput,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  renderFieldWrapper,
+  createEventConfig,
+  createInputMethods,
+  createDropdownMethods,
+  createKeyDownHandler,
+  handleValidationLifecycle,
 } from '../utils/input';
 import {
-  closeDropdown as closeDropdownUtil,
-  createValidityState,
   handleIconClick,
   openDropdown as openDropdownUtil,
+  createPickerMethods,
+  createInputRenderer,
+  createRenderConfig,
+  createInputConfig,
 } from '../utils/input/picker-input.util';
+import { BasePickerInput } from '../utils/input/base-picker-input';
 import { makeRef } from '../utils/make-ref';
 import type { TimeInputValidityState } from './time-input.types';
 
@@ -59,10 +74,15 @@ import type { TimeInputValidityState } from './time-input.types';
   shadow: true,
   formAssociated: true,
 })
-export class TimeInput implements IxInputFieldComponent<string> {
+export class TimeInput
+  extends BasePickerInput
+  implements IxInputFieldComponent<string>
+{
   @Element() hostElement!: HTMLIxTimeInputElement;
   @AttachInternals() formInternals!: ElementInternals;
 
+  @State() isInputInvalid: boolean = false;
+
   /**
    * Name of the input element
    */
@@ -79,7 +99,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 +119,11 @@ export class TimeInput implements IxInputFieldComponent<string> {
    */
   @Prop() required?: boolean;
 
+  @Watch('required')
+  onRequiredChange() {
+    this.syncValidationClasses();
+  }
+
   /**
    * Helper text below the input field
    */
@@ -243,45 +274,29 @@ export class TimeInput implements IxInputFieldComponent<string> {
   /** @internal */
   @Event() ixBlur!: EventEmitter<void>;
 
-  @State() show = false;
   @State() time: string | null = null;
-  @State() isInputInvalid = false;
-  @State() isInvalid = false;
-  @State() isValid = false;
-  @State() isInfo = false;
-  @State() isWarning = false;
-  @State() focus = false;
-
-  private readonly slotStartRef = makeRef<HTMLDivElement>();
-  private readonly slotEndRef = makeRef<HTMLDivElement>();
 
   private readonly timePickerRef = makeRef<HTMLIxTimePickerElement>();
-
-  private readonly inputElementRef = makeRef<HTMLInputElement>();
-  private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();
   private classObserver?: ClassMutationObserver;
-  private invalidReason?: string;
-  private touched = false;
-
   private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;
 
-  private handleInputKeyDown(event: KeyboardEvent) {
-    handleSubmitOnEnterKeydown(
-      event,
-      this.suppressSubmitOnEnter,
-      this.formInternals.form
-    );
-  }
-
   updateFormInternalValue(value: string): void {
     this.formInternals.setFormValue(value);
     this.value = value;
   }
 
-  connectedCallback(): void {
-    this.classObserver = createClassMutationObserver(this.hostElement, () =>
-      this.checkClassList()
+  private updatePaddings(): void {
+    adjustPaddingForStartAndEnd(
+      this.slotStartRef.current,
+      this.slotEndRef.current,
+      this.inputElementRef.current
     );
+  }
+
+  connectedCallback(): void {
+    this.classObserver = createClassMutationObserver(this.hostElement, () => {
+      this.isInvalid = this.dropdownMethods.checkClassList();
+    });
 
     this.disposableChangesAndVisibilityObservers =
       addDisposableChangesAndVisibilityObservers(
@@ -305,16 +320,11 @@ export class TimeInput implements IxInputFieldComponent<string> {
       this.watchValue();
     }
 
-    this.checkClassList();
     this.updateFormInternalValue(this.value);
   }
 
-  private updatePaddings() {
-    adjustPaddingForStartAndEnd(
-      this.slotStartRef.current,
-      this.slotEndRef.current,
-      this.inputElementRef.current
-    );
+  componentDidLoad(): void {
+    this.syncValidationClasses();
   }
 
   disconnectedCallback(): void {
@@ -341,10 +351,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;
     }
 
@@ -352,157 +365,123 @@ 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) {
     handleIconClick(
       event,
       this.show,
-      () => this.openDropdown(),
+      async () => {
+        this.time = this.value;
+        return this.dropdownMethods.openDropdown();
+      },
       this.inputElementRef
     );
   }
 
-  async openDropdown() {
-    // keep picker in sync with input
-    this.time = this.value;
-
-    return openDropdownUtil(this.dropdownElementRef);
-  }
-
-  async closeDropdown() {
-    return closeDropdownUtil(this.dropdownElementRef);
+  protected get pickerMethods() {
+    const context = {
+      show: this.show,
+      touched: this.touched,
+      isInputInvalid: this.isInputInvalid,
+      suppressValidation: this.suppressValidation,
+      required: !!this.required,
+      value: this.value,
+      suppressSubmitOnEnter: this.suppressSubmitOnEnter,
+      formInternals: this.formInternals,
+      inputElementRef: this.inputElementRef,
+      dropdownElementRef: this.dropdownElementRef,
+      hostElement: this.hostElement,
+      ixFocus: this.ixFocus,
+      ixBlur: this.ixBlur,
+      validityStateChange: this.validityStateChange,
+      invalidReason: this.invalidReason,
+      setTouched: (touched: boolean) => (this.touched = touched),
+      setIsInvalid: (value: boolean) => (this.isInvalid = value),
+      setIsInfo: (value: boolean) => (this.isInfo = value),
+      setIsValid: (value: boolean) => (this.isValid = value),
+      setIsWarning: (value: boolean) => (this.isWarning = value),
+      syncValidationClasses: () => this.syncValidationClasses(),
+      onInput: (value: string) => this.onInput(value),
+      openDropdown: async () => {
+        this.time = this.value;
+        return openDropdownUtil(this.dropdownElementRef);
+      },
+    };
+
+    return createPickerMethods({
+      component: this,
+      ...context,
+      createInputMethods,
+      createDropdownMethods,
+      createEventConfig,
+      createKeyDownHandler,
+      handleValidationLifecycle,
+    });
   }
 
-  private checkClassList() {
-    this.isInvalid = this.hostElement.classList.contains('ix-invalid');
+  private getEventConfig() {
+    return this.pickerMethods.getEventConfig();
   }
 
   private renderInput() {
-    return (
-      <div class="input-wrapper">
-        <SlotStart
-          slotStartRef={this.slotStartRef}
-          onSlotChange={() => this.updatePaddings()}
-        ></SlotStart>
-        <input
-          autoComplete="off"
-          class={{
-            'is-invalid': this.isInputInvalid,
-          }}
-          style={{
-            textAlign: this.textAlignment,
-          }}
-          disabled={this.disabled}
-          readOnly={this.readonly}
-          required={this.required}
-          ref={this.inputElementRef}
-          type="text"
-          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)}
-        ></input>
-        <SlotEnd
-          slotEndRef={this.slotEndRef}
-          onSlotChange={() => this.updatePaddings()}
-        >
-          <ix-icon-button
-            data-testid="open-time-picker"
-            class={{ 'time-icon-hidden': this.disabled || this.readonly }}
-            variant="subtle-tertiary"
-            icon={iconClock}
-            onClick={(event) => this.onTimeIconClick(event)}
-            aria-label="Toggle time picker"
-            aria-expanded={this.show}
-          ></ix-icon-button>
-        </SlotEnd>
-      </div>
-    );
+    const renderPickerInputFn = createInputRenderer(h, SlotStart, SlotEnd);
+    const config = createInputConfig({
+      component: this,
+      getEventConfig: () => this.getEventConfig(),
+      onInput,
+      onClick,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      iconButton: (
+        <ix-icon-button
+          data-testid="open-time-picker"
+          class={{ 'time-icon-hidden': this.disabled || this.readonly }}
+          variant="subtle-tertiary"
+          icon={iconClock}
+          onClick={(event) => this.onTimeIconClick(event)}
+          aria-label="Toggle time picker"
+          aria-expanded={this.show}
+        ></ix-icon-button>
+      ),
+    });
+    return renderPickerInputFn(config);
   }
 
   @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) {
+    this.pickerMethods.hookValidationLifecycle(results);
   }
 
   @Watch('isInputInvalid')
   async onInputValidationChange() {
-    const state = await this.getValidityState();
-    this.validityStateChange.emit({
-      patternMismatch: state.patternMismatch,
-      invalidReason: this.invalidReason,
-    });
-  }
-
-  /** @internal */
-  @Method()
-  getValidityState(): Promise<ValidityState> {
-    return Promise.resolve(
-      createValidityState(this.isInputInvalid, !!this.required, this.value)
-    );
-  }
-
-  /**
-   * Get the native input element
-   */
-  @Method()
-  getNativeInputElement(): Promise<HTMLInputElement> {
-    return this.inputElementRef.waitForCurrent();
-  }
-
-  /**
-   * Focuses the input field
-   */
-  @Method()
-  async focusInput(): Promise<void> {
-    return (await this.getNativeInputElement()).focus();
-  }
-
-  /**
-   * Returns whether the text field has been touched.
-   * @internal
-   */
-  @Method()
-  isTouched(): Promise<boolean> {
-    return Promise.resolve(this.touched);
+    return this.pickerMethods.onInputValidationChange();
   }
 
   render() {
@@ -512,66 +491,35 @@ export class TimeInput implements IxInputFieldComponent<string> {
       this.i18nErrorTimeUnparsable
     );
 
-    return (
-      <Host
-        class={{
-          disabled: this.disabled,
-          readonly: this.readonly,
+    const config = createRenderConfig(
+      this,
+      this.renderInput(),
+      <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-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"
-          enableTopLayer={this.enableTopLayer}
-          suppressOverflowBehavior
-          show={this.show}
-          onShowChanged={(event) => {
-            this.show = event.detail;
-          }}
-        >
-          <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>,
+      'time-dropdown'
     );
+
+    config.invalidText = invalidText;
+
+    return renderFieldWrapper(config);
   }
 }
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/base-picker-input.ts b/packages/core/src/components/utils/input/base-picker-input.ts
new file mode 100644
index 00000000000..f16e717a326
--- /dev/null
+++ b/packages/core/src/components/utils/input/base-picker-input.ts
@@ -0,0 +1,81 @@
+/*
+ * SPDX-FileCopyrightText: 2025 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 { Method, State } from '@stencil/core';
+import { clearInputValue } from '../../input/input.util';
+import { getNativeInput } from '../input';
+import { makeRef } from '../make-ref';
+import type { PickerInputMethods } from './picker-input.util';
+
+export class BasePickerInput {
+  protected hostElement!: HTMLElement;
+
+  protected readonly inputElementRef = makeRef<HTMLInputElement>();
+  protected readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();
+  protected readonly slotStartRef = makeRef<HTMLDivElement>();
+  protected readonly slotEndRef = makeRef<HTMLDivElement>();
+
+  @State() protected show = false;
+  @State() protected suppressValidation = false;
+  @State() isInvalid = false;
+  @State() isValid = false;
+  @State() isInfo = false;
+  @State() isWarning = false;
+  @State() protected focus = false;
+
+  protected invalidReason?: string;
+  protected touched = false;
+  protected isClearing = false;
+
+  protected get pickerMethods(): PickerInputMethods {
+    throw new Error(
+      'pickerMethods getter must be implemented by derived class'
+    );
+  }
+
+  protected get commonMethods() {
+    return this.pickerMethods.getCommonMethods();
+  }
+
+  protected get dropdownMethods() {
+    return this.pickerMethods.getDropdownMethods();
+  }
+
+  /** @internal */
+  @Method()
+  async getValidityState(): Promise<ValidityState> {
+    return this.pickerMethods.getValidityState();
+  }
+
+  @Method()
+  async getNativeInputElement(): Promise<HTMLInputElement> {
+    return getNativeInput(this.inputElementRef);
+  }
+
+  @Method()
+  async focusInput(): Promise<void> {
+    return this.commonMethods.focusInput();
+  }
+
+  /** @internal */
+  @Method()
+  isTouched(): Promise<boolean> {
+    return this.commonMethods.isTouched();
+  }
+
+  /** @internal */
+  syncValidationClasses(): void {
+    return this.commonMethods.syncValidationClasses();
+  }
+
+  @Method()
+  async clear(): Promise<void> {
+    return clearInputValue(this as any);
+  }
+}
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..879e444b7e2
--- /dev/null
+++ b/packages/core/src/components/utils/input/picker-input-common.tsx
@@ -0,0 +1,359 @@
+/*
+ * 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, JSX } from '@stencil/core';
+import { syncValidationClasses, ValidationResults } from './validation';
+import { handleSubmitOnEnterKeydown } from '../../input/input.util';
+import { closeDropdown as closeDropdownUtil } from './picker-input.util';
+import type { MakeRef } from '../make-ref';
+
+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 | Promise<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: MakeRef<HTMLInputElement>;
+  input: JSX.Element;
+  dropdown: JSX.Element;
+  testId: string;
+  trigger: () => Promise<HTMLElement>;
+  dropdownRef?: MakeRef<HTMLIxDropdownElement>;
+  enableTopLayer?: boolean;
+  show?: boolean;
+  onShow?: (event: CustomEvent<boolean>) => 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"
+        enableTopLayer={props.enableTopLayer}
+        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 | Promise<void>;
+  openDropdown: () => Promise<void>;
+  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 | Promise<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/picker-input.util.ts b/packages/core/src/components/utils/input/picker-input.util.ts
index 862f82c84b5..0ae4e7bc409 100644
--- a/packages/core/src/components/utils/input/picker-input.util.ts
+++ b/packages/core/src/components/utils/input/picker-input.util.ts
@@ -8,43 +8,61 @@
  */
 
 import { dropdownController } from '../../dropdown/dropdown-controller';
+import type { MakeRef } from '../make-ref';
 
-export async function openDropdown(dropdownElementRef: any) {
-  const dropdownElement = await dropdownElementRef.waitForCurrent();
-  const id = dropdownElement.getAttribute('data-ix-dropdown');
+type DropdownRef =
+  | MakeRef<HTMLIxDropdownElement>
+  | { current: HTMLIxDropdownElement | null };
+type InputRef =
+  | MakeRef<HTMLInputElement>
+  | { current: HTMLInputElement | null };
+
+async function getDropdownElement(ref: DropdownRef) {
+  return 'waitForCurrent' in ref ? await ref.waitForCurrent() : ref.current;
+}
+
+export async function openDropdown(dropdownElementRef: DropdownRef) {
+  const dropdownElement = await getDropdownElement(dropdownElementRef);
+  if (!dropdownElement) {
+    return;
+  }
+
+  const id = dropdownElement.dataset.ixDropdown;
 
   dropdownController.dismissAll();
+
   if (!id) {
     return;
   }
 
   const dropdown = dropdownController.getDropdownById(id);
-  if (!dropdown) {
-    return;
+  if (dropdown) {
+    dropdownController.present(dropdown);
   }
-  dropdownController.present(dropdown);
 }
 
-export async function closeDropdown(dropdownElementRef: any) {
-  const dropdownElement = await dropdownElementRef.waitForCurrent();
-  const id = dropdownElement.getAttribute('data-ix-dropdown');
+export async function closeDropdown(dropdownElementRef: DropdownRef) {
+  const dropdownElement = await getDropdownElement(dropdownElementRef);
+  if (!dropdownElement) {
+    return;
+  }
 
+  const id = dropdownElement.dataset.ixDropdown;
   if (!id) {
     return;
   }
 
   const dropdown = dropdownController.getDropdownById(id);
-  if (!dropdown) {
-    return;
+  if (dropdown) {
+    dropdownController.dismiss(dropdown);
   }
-  dropdownController.dismiss(dropdown);
 }
 
 export function handleIconClick(
   event: Event,
   show: boolean,
   openDropdownFn: () => void,
-  inputElementRef: any
+  inputElementRef: InputRef
 ) {
   if (!show) {
     event.stopPropagation();
@@ -76,3 +94,290 @@ export function createValidityState(
     valueMissing: !!required && !value,
   };
 }
+
+export interface PickerInputMethods {
+  getEventConfig: () => any;
+  getCommonMethods: () => any;
+  getDropdownMethods: () => any;
+  handleInputKeyDown: (event: KeyboardEvent) => void;
+  getValidityState: () => Promise<ValidityState>;
+  hookValidationLifecycle: (results: any) => void;
+  onInputValidationChange: () => Promise<void>;
+}
+
+export interface RenderInputConfig {
+  eventConfig: any;
+  slotStartRef: any;
+  slotEndRef: any;
+  updatePaddings: () => void;
+  isInputInvalid: boolean;
+  textAlignment?: 'start' | 'end';
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  inputElementRef: any;
+  value: string;
+  placeholder?: string;
+  name?: string;
+  onInput: (config: any) => (event: Event) => void;
+  onClick: (config: any) => (event: MouseEvent) => void;
+  onFocus: (config: any) => (event: FocusEvent) => void;
+  onBlur: (config: any) => (event: FocusEvent) => void;
+  onKeyDown: (config: any) => (event: KeyboardEvent) => void;
+  iconButton: any;
+}
+
+export function createInputRenderer(h: any, SlotStart: any, SlotEnd: any) {
+  return (config: RenderInputConfig) =>
+    h(
+      'div',
+      { class: 'input-wrapper' },
+      h(SlotStart, {
+        slotStartRef: config.slotStartRef,
+        onSlotChange: config.updatePaddings,
+      }),
+      h('input', {
+        autoComplete: 'off',
+        class: { 'is-invalid': config.isInputInvalid },
+        style: { textAlign: config.textAlignment },
+        disabled: config.disabled,
+        readOnly: config.readonly,
+        required: config.required,
+        ref: config.inputElementRef,
+        type: 'text',
+        value: config.value,
+        placeholder: config.placeholder,
+        name: config.name,
+        onInput: config.onInput(config.eventConfig),
+        onClick: config.onClick(config.eventConfig),
+        onFocus: config.onFocus(config.eventConfig),
+        onBlur: config.onBlur(config.eventConfig),
+        onKeyDown: config.onKeyDown(config.eventConfig),
+      }),
+      h(
+        SlotEnd,
+        {
+          slotEndRef: config.slotEndRef,
+          onSlotChange: config.updatePaddings,
+        },
+        config.iconButton
+      )
+    );
+}
+
+export function createPickerMethods<T>(config: {
+  component: T;
+  show: boolean;
+  touched: boolean;
+  isInputInvalid: boolean;
+  suppressValidation: boolean;
+  required: boolean;
+  value: string | undefined;
+  suppressSubmitOnEnter: boolean;
+  formInternals: ElementInternals;
+  inputElementRef: any;
+  dropdownElementRef: any;
+  hostElement: HTMLElement;
+  openDropdown: () => Promise<void>;
+  ixFocus: any;
+  ixBlur: any;
+  syncValidationClasses: () => void;
+  onInput: (value: string) => Promise<void>;
+  setTouched: (touched: boolean) => void;
+  setIsInvalid: (value: boolean) => void;
+  setIsInfo: (value: boolean) => void;
+  setIsValid: (value: boolean) => void;
+  setIsWarning: (value: boolean) => void;
+  validityStateChange: any;
+  invalidReason: string | undefined;
+  createInputMethods: (params: any) => any;
+  createDropdownMethods: (params: any) => any;
+  createEventConfig: (params: any) => any;
+  createKeyDownHandler: (
+    suppressSubmitOnEnter: boolean,
+    formInternals: ElementInternals
+  ) => (event: KeyboardEvent) => void;
+  handleValidationLifecycle: (
+    suppressValidation: boolean,
+    shouldShowInvalid: boolean,
+    results: any,
+    setters: any
+  ) => void;
+}): PickerInputMethods {
+  const keyDownHandler = (event: KeyboardEvent) =>
+    config.createKeyDownHandler(
+      config.suppressSubmitOnEnter,
+      config.formInternals
+    )(event);
+
+  return {
+    getEventConfig: () =>
+      config.createEventConfig({
+        show: config.show,
+        setTouched: config.setTouched,
+        onInput: config.onInput,
+        openDropdown: config.openDropdown,
+        ixFocus: config.ixFocus,
+        ixBlur: config.ixBlur,
+        syncValidationClasses: config.syncValidationClasses,
+        handleInputKeyDown: keyDownHandler,
+        alwaysSetTouchedOnBlur: true,
+      }),
+
+    getCommonMethods: () =>
+      config.createInputMethods({
+        inputElementRef: config.inputElementRef,
+        touched: config.touched,
+        hostElement: config.hostElement,
+        suppressValidation: config.suppressValidation,
+        required: config.required,
+        value: config.value,
+        isInputInvalid: config.isInputInvalid,
+      }),
+
+    getDropdownMethods: () =>
+      config.createDropdownMethods({
+        dropdownElementRef: config.dropdownElementRef,
+        hostElement: config.hostElement,
+        show: config.show,
+        touched: config.touched,
+        openDropdown: config.openDropdown,
+        ixFocus: config.ixFocus,
+        ixBlur: config.ixBlur,
+        syncValidationClasses: config.syncValidationClasses,
+        onInput: config.onInput,
+        handleInputKeyDown: keyDownHandler,
+      }),
+
+    handleInputKeyDown: keyDownHandler,
+
+    getValidityState: () =>
+      Promise.resolve(
+        createValidityState(
+          config.isInputInvalid,
+          !!config.required,
+          config.value
+        )
+      ),
+
+    hookValidationLifecycle: (results: any) =>
+      config.handleValidationLifecycle(
+        config.suppressValidation,
+        config.isInputInvalid,
+        results,
+        {
+          setIsInvalid: config.setIsInvalid,
+          setIsInfo: config.setIsInfo,
+          setIsValid: config.setIsValid,
+          setIsWarning: config.setIsWarning,
+        }
+      ),
+
+    onInputValidationChange: async () => {
+      const state = createValidityState(
+        config.isInputInvalid,
+        !!config.required,
+        config.value
+      );
+      config.validityStateChange.emit({
+        patternMismatch: state.patternMismatch,
+        invalidReason: config.invalidReason,
+      });
+    },
+  };
+}
+
+export interface PickerRenderConfig {
+  host: HTMLElement;
+  disabled?: boolean;
+  readonly?: boolean;
+  label?: string;
+  helper?: string;
+  invalid: boolean;
+  invalidText: string | undefined;
+  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;
+  enableTopLayer?: boolean;
+  show: boolean;
+  onShow: (event: any) => void;
+}
+
+export function createRenderConfig(
+  component: any,
+  input: any,
+  dropdown: any,
+  testId: string
+): PickerRenderConfig {
+  return {
+    host: component.hostElement,
+    disabled: component.disabled,
+    readonly: component.readonly,
+    label: component.label,
+    helper: component.helperText,
+    invalid: component.isInvalid,
+    invalidText: '',
+    info: component.infoText,
+    isInfo: component.isInfo,
+    warning: component.isWarning,
+    warningText: component.warningText,
+    valid: component.isValid,
+    validText: component.validText,
+    tooltip: component.showTextAsTooltip,
+    required: component.required,
+    inputRef: component.inputElementRef,
+    input,
+    dropdown,
+    testId,
+    trigger: () => component.inputElementRef.waitForCurrent(),
+    dropdownRef: component.dropdownElementRef,
+    enableTopLayer: component.enableTopLayer,
+    show: component.show,
+    onShow: (event) => (component.show = event.detail),
+  };
+}
+
+export interface PickerInputConfigParams {
+  component: any;
+  getEventConfig: () => any;
+  onInput: any;
+  onClick: any;
+  onFocus: any;
+  onBlur: any;
+  onKeyDown: any;
+  iconButton: any;
+  value?: string;
+}
+
+export function createInputConfig(
+  params: PickerInputConfigParams
+): RenderInputConfig {
+  const { component, getEventConfig, value, ...handlers } = params;
+  return {
+    eventConfig: getEventConfig(),
+    slotStartRef: component.slotStartRef,
+    slotEndRef: component.slotEndRef,
+    updatePaddings: () => component.updatePaddings(),
+    isInputInvalid: component.isInputInvalid,
+    textAlignment: component.textAlignment,
+    disabled: component.disabled,
+    readonly: component.readonly,
+    required: component.required,
+    inputElementRef: component.inputElementRef,
+    value: value ?? component.value ?? '',
+    placeholder: component.placeholder,
+    name: component.name,
+    ...handlers,
+  };
+}
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
+  );
+}
diff --git a/packages/react-test-app/src/preview-examples/date-input.tsx b/packages/react-test-app/src/preview-examples/date-input.tsx
index 82c3c0e313d..d2c566a07f4 100644
--- a/packages/react-test-app/src/preview-examples/date-input.tsx
+++ b/packages/react-test-app/src/preview-examples/date-input.tsx
@@ -7,8 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxDateInput } from '@siemens/ix-react';
+import { IxDateInput, IxButton } from '@siemens/ix-react';
+import { useRef } from 'react';
 
 export default () => {
-  return <IxDateInput value="1970/01/01"></IxDateInput>;
+  const dateInputRef = useRef<HTMLIxDateInputElement>(null);
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end' }}>
+      <IxDateInput required ref={dateInputRef} value="1970/01/01"></IxDateInput>
+      <IxButton onClick={() => dateInputRef.current?.clear()}>Clear</IxButton>
+    </div>
+  );
 };
diff --git a/packages/react-test-app/src/preview-examples/input.tsx b/packages/react-test-app/src/preview-examples/input.tsx
index 43aedc9054e..4731aea7853 100644
--- a/packages/react-test-app/src/preview-examples/input.tsx
+++ b/packages/react-test-app/src/preview-examples/input.tsx
@@ -1,6 +1,10 @@
 import { IxInput, IxButton, IxDateInput, IxTimeInput, IxNumberInput } from '@siemens/ix-react';
+import { useRef } from 'react';
 
 export default () => {
+  const emailInputRef = useRef<HTMLIxInputElement>(null);
+  const passwordInputRef = useRef<HTMLIxInputElement>(null);
+
   const handleSubmit = (e: React.FormEvent, formType: string) => {
     e.preventDefault();
     console.log(`${formType} form submitted`);
@@ -35,8 +39,14 @@ export default () => {
         }}
       >
         <h3>IxInput Form</h3>
-        <IxInput type="email" name="email" placeholder="Email" />
-        <IxInput type="password" name="password" placeholder="Password" />
+        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-end' }}>
+          <IxInput required ref={emailInputRef}  name="email" placeholder="Email" value="test@example.com" />
+          <IxButton onClick={() => emailInputRef.current?.clear()}>Clear</IxButton>
+        </div>
+        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-end' }}>
+          <IxInput ref={passwordInputRef} name="password" placeholder="Password" value="password123" />
+          <IxButton onClick={() => passwordInputRef.current?.clear()}>Clear</IxButton>
+        </div>
         <IxNumberInput name="age" placeholder="Age" />
         <IxDateInput name="dob" placeholder="Date of Birth" />
         <IxTimeInput name="appointment" placeholder="Appointment Time" />
diff --git a/packages/react-test-app/src/preview-examples/number-input.tsx b/packages/react-test-app/src/preview-examples/number-input.tsx
index 20deeecb703..9264cd6f910 100644
--- a/packages/react-test-app/src/preview-examples/number-input.tsx
+++ b/packages/react-test-app/src/preview-examples/number-input.tsx
@@ -7,8 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxNumberInput } from '@siemens/ix-react';
+import { IxNumberInput, IxButton } from '@siemens/ix-react';
+import { useRef } from 'react';
 
 export default () => {
-  return <IxNumberInput></IxNumberInput>;
+  const numberInputRef = useRef<HTMLIxNumberInputElement>(null);
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end' }}>
+      <IxNumberInput required ref={numberInputRef} value={42}></IxNumberInput>
+      <IxButton onClick={() => numberInputRef.current?.clear()}>Clear</IxButton>
+    </div>
+  );
 };
diff --git a/packages/react-test-app/src/preview-examples/textarea.tsx b/packages/react-test-app/src/preview-examples/textarea.tsx
index d358f498153..0b5839153e8 100644
--- a/packages/react-test-app/src/preview-examples/textarea.tsx
+++ b/packages/react-test-app/src/preview-examples/textarea.tsx
@@ -7,8 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxTextarea } from '@siemens/ix-react';
+import { IxTextarea, IxButton } from '@siemens/ix-react';
+import { useRef } from 'react';
 
 export default () => {
-  return <IxTextarea></IxTextarea>;
+  const textareaRef = useRef<HTMLIxTextareaElement>(null);
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+      <IxTextarea required ref={textareaRef} value="Sample text content"></IxTextarea>
+      <IxButton onClick={() => textareaRef.current?.clear()}>Clear</IxButton>
+    </div>
+  );
 };
diff --git a/packages/react-test-app/src/preview-examples/time-input.tsx b/packages/react-test-app/src/preview-examples/time-input.tsx
index d885fa11fbc..9df7af78a66 100644
--- a/packages/react-test-app/src/preview-examples/time-input.tsx
+++ b/packages/react-test-app/src/preview-examples/time-input.tsx
@@ -7,8 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxTimeInput } from '@siemens/ix-react';
+import { IxTimeInput, IxButton } from '@siemens/ix-react';
+import { useRef } from 'react';
 
 export default () => {
-  return <IxTimeInput></IxTimeInput>;
+  const timeInputRef = useRef<HTMLIxTimeInputElement>(null);
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end' }}>
+      <IxTimeInput required ref={timeInputRef} value="12:30"></IxTimeInput>
+      <IxButton onClick={() => timeInputRef.current?.clear()}>Clear</IxButton>
+    </div>
+  );
 };