diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss
index 6a0e62ba5de..268119fbe36 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss
@@ -30,5 +30,9 @@
         @include m(dropdown) {
             @extend %date-picker--dropdown !optional;
         }
+
+        @include m(readonly) {
+            @extend %date-picker--readonly !optional;
+        }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
index 36151648bae..625b4f8c646 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
@@ -91,4 +91,95 @@
             --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
         }
     }
+
+    %date-picker--readonly igx-input-group {
+        igx-prefix,
+        [igxPrefix],
+        igx-suffix,
+        [igxSuffix] {
+            color: var(--disabled-text-color);
+
+            @if $variant == 'fluent' {
+                background: transparent;
+            }
+
+            @if $variant == 'bootstrap' {
+                background: var(--border-disabled-background);
+            }
+        }
+
+        @if $variant == 'bootstrap' {
+            %form-group-input {
+                background: var(--border-disabled-background);
+            }
+        }
+
+        &%form-group-display--box:not(%form-group-display--disabled) {
+            %form-group-bundle {
+                background: var(--box-background-focus);
+
+                &:hover {
+                    &:has(input[readonly][role="combobox"])::after {
+                        border-block-end-color: var(--idle-bottom-line-color);
+                    }
+                }
+            }
+        }
+
+        &%form-group-display--border:not(%form-group-display--disabled) {
+            %form-group-bundle:hover {
+                %form-group-bundle-start,
+                %igx-input-group__filler,
+                %form-group-bundle-end {
+                    border-color: var(--border-color);
+                }
+
+                %igx-input-group__notch {
+                    border-block-start-color: var(--border-color);
+                    border-block-end-color: var(--border-color);
+                }
+            }
+        }
+        
+        &:not(%form-group-display--disabled) {
+            %form-group-bundle:not(:focus-within) {
+                @if $variant == 'indigo' {
+                    &::after {
+                        border-block-end-color: var(--disabled-text-color);
+                    }
+
+                    &:hover {
+                        background: unset;
+                    }
+                }
+
+                &:hover:has(input[readonly][role="combobox"]) {
+                    &::before {
+                        @if $variant == 'fluent' {
+                            box-shadow: inset 0 0 0 rem(1px) var(--border-color);
+                        }
+                    }
+
+                    &::after {
+                        @if $variant == 'material' {
+                            border-block-end-color: var(--border-color);
+                        } @else if $variant == 'indigo' {
+                            border-block-end-color: var(--disabled-text-color);
+                        } 
+                    }
+                }
+            }
+        }
+
+        &:hover {
+            %form-group-input--hover {
+                cursor: default;
+                color: va(--filled-text-color);
+
+                &::placeholder {
+                    color: var(--placeholder-color);
+                }
+            }
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index 66643c96e65..853c7802a7a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -202,6 +202,28 @@
             -webkit-appearance: none;
         }
 
+        &:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
+        &:has(textarea:read-only:not(:disabled)) {
+            igx-prefix,
+            [igxPrefix],
+            igx-suffix,
+            [igxSuffix] {
+                color: var-get($theme, 'disabled-text-color');
+            }
+
+            %form-group-label {
+                color: var-get($theme, 'idle-secondary-color');
+            }
+
+            %form-group-line {
+                background: var-get($theme, 'focused-secondary-color');
+            }
+
+            %form-group-helper {
+                color: var-get($theme, 'helper-text-color');
+            }
+        }
+
         igx-icon,
         igx-icon[igxPrefix],
         igx-icon[igxSuffix] {
@@ -361,25 +383,33 @@
     }
 
     %form-group-bundle--hover {
-        //cursor: pointer;
-
-        &::after {
-            border-block-end-width: rem(1px);
-            border-block-end-color: var-get($theme, 'hover-bottom-line-color');
+        &:has(input:not([readonly])),
+        &:has(textarea:not([readonly])),
+        &:has(input[readonly][role="combobox"]),
+        &:has(input[readonly][type="file"]) {
+            &::after {
+                border-block-end-width: rem(1px);
+                border-block-end-color: var-get($theme, 'hover-bottom-line-color');
+            }
         }
     }
 
     %form-group-bundle--focus {
-        &::after {
-            @if $variant != 'indigo' {
-                border-block-end-width: rem(2px);
+        &:has(input:not([readonly])),
+        &:has(textarea:not([readonly])),
+        &:has(input[readonly][role="combobox"]),
+        &:has(input[readonly][type="file"]) {
+            &::after {
+                @if $variant != 'indigo' {
+                    border-block-end-width: rem(2px);
+                }
+                border-block-end-color: var-get($theme, 'focused-bottom-line-color');
             }
-            border-block-end-color: var-get($theme, 'focused-bottom-line-color');
-        }
 
-        @if $variant == 'indigo' {
-            caret-color: var-get($theme, 'focused-bottom-line-color');
-        }
+            @if $variant == 'indigo' {
+                caret-color: var-get($theme, 'focused-bottom-line-color');
+            }
+        }   
     }
 
     %form-group-bundle--success {
@@ -397,10 +427,16 @@
     }
 
     %form-group-bundle--error {
-        &::after {
-            border-block-end-color: var-get($theme, 'error-secondary-color');
+        &:has(input:not([readonly])),
+        &:has(textarea:not([readonly])),
+        &:has(input[readonly][role="combobox"]),
+        &:has(input[readonly][type="file"]) {
+            &::after {
+                border-block-end-color: var-get($theme, 'error-secondary-color');
+            }
+
+            caret-color: initial;
         }
-        caret-color: initial;
     }
 
     %form-group-bundle--disabled {
@@ -612,8 +648,7 @@
     %bootstrap-file-focused,
     %bootstrap-file-valid,
     %bootstrap-file-warning,
-    %bootstrap-file-invalid
-    {
+    %bootstrap-file-invalid {
         %form-group-bundle {
             border-radius: var-get($theme, 'box-border-radius');
             transition: box-shadow .15s ease-out, border .15s ease-out;
@@ -746,6 +781,11 @@
         &:hover {
             background: var-get($theme, 'box-background-hover');
         }
+
+        &:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
+        &:has(textarea:read-only:not(:disabled)) {
+            background: var-get($theme, 'box-background-focus');
+        }
     }
 
     %form-group-bundle--box-focus {
@@ -905,22 +945,21 @@
             display: none;
         }
 
-        &:hover {
-            %form-group-bundle-start {
-                border-color: var-get($theme, 'hover-border-color');
-            }
-
-            %igx-input-group__filler {
-                border-color: var-get($theme, 'hover-border-color');
-            }
-
-            %igx-input-group__notch {
-                border-block-start-color: var-get($theme, 'hover-border-color');
-                border-block-end-color: var-get($theme, 'hover-border-color');
-            }
+        &:has(input:not([readonly])),
+        &:has(textarea:not([readonly])),
+        &:has(input[readonly][role="combobox"]),
+        &:has(input[readonly][type="file"]) {
+            &:hover {
+                %form-group-bundle-start,
+                %igx-input-group__filler,
+                %form-group-bundle-end {
+                    border-color: var-get($theme, 'hover-border-color');
+                }
 
-            %form-group-bundle-end {
-                border-color: var-get($theme, 'hover-border-color');
+                %igx-input-group__notch {
+                    border-block-start-color: var-get($theme, 'hover-border-color');
+                    border-block-end-color: var-get($theme, 'hover-border-color');
+                }
             }
         }
     }
@@ -980,8 +1019,10 @@
     }
 
     %form-group-bundle-search--hover {
-        box-shadow: var-get($theme, 'search-hover-shadow');
-        border-color: var-get($theme, 'hover-border-color');
+        &:has(input:not([readonly])) {
+            box-shadow: var-get($theme, 'search-hover-shadow');
+            border-color: var-get($theme, 'hover-border-color');
+        }
     }
 
     %form-group-bundle-search--focus {
@@ -1355,11 +1396,14 @@
     }
 
     %form-group-input--hover {
-        cursor: pointer;
-        color: var-get($theme, 'filled-text-hover-color');
+        &:not([readonly]),
+        &[role="combobox"] {
+            cursor: pointer;
+            color: var-get($theme, 'filled-text-hover-color');
 
-        &::placeholder {
-            color: var-get($theme, 'hover-placeholder-color');
+            &::placeholder {
+                color: var-get($theme, 'hover-placeholder-color');
+            }
         }
     }
 
@@ -1522,29 +1566,34 @@
     }
 
     %form-group-border--error {
-        %form-group-bundle-start {
-            border-inline-start-color: var-get($theme, 'error-secondary-color');
-            border-block-start-color: var-get($theme, 'error-secondary-color');
-            border-block-end-color: var-get($theme, 'error-secondary-color');
-        }
+        &:has(input:not([readonly])),
+        &:has(textarea:not([readonly])),
+        &:has(input[readonly][role="combobox"]),
+        &:has(input[readonly][type="file"]) {
+            %form-group-bundle-start {
+                border-inline-start-color: var-get($theme, 'error-secondary-color');
+                border-block-start-color: var-get($theme, 'error-secondary-color');
+                border-block-end-color: var-get($theme, 'error-secondary-color');
+            }
 
-        %form-group-bundle-end {
-            border-inline-end-color: var-get($theme, 'error-secondary-color');
-            border-block-start-color: var-get($theme, 'error-secondary-color');
-            border-block-end-color: var-get($theme, 'error-secondary-color');
-        }
+            %form-group-bundle-end {
+                border-inline-end-color: var-get($theme, 'error-secondary-color');
+                border-block-start-color: var-get($theme, 'error-secondary-color');
+                border-block-end-color: var-get($theme, 'error-secondary-color');
+            }
 
-        %igx-input-group__notch,
-        %igx-input-group__filler {
-            border-block-color: var-get($theme, 'error-secondary-color');
-        }
+            %igx-input-group__notch,
+            %igx-input-group__filler {
+                border-block-color: var-get($theme, 'error-secondary-color');
+            }
 
-        %form-group-bundle--border:hover {
-            %form-group-bundle-start,
-            %form-group-bundle-end,
-            %igx-input-group__filler,
-            %igx-input-group__notch {
-                border-color: var-get($theme, 'error-secondary-color');
+            %form-group-bundle--border:hover {
+                %form-group-bundle-start,
+                %form-group-bundle-end,
+                %igx-input-group__filler,
+                %igx-input-group__notch {
+                    border-color: var-get($theme, 'error-secondary-color');
+                }
             }
         }
     }
@@ -1688,6 +1737,19 @@
         &:focus {
             background: var-get($theme, 'box-background-hover');
         }
+
+        &:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
+        &:has(textarea:read-only:not(:disabled)) {
+            &:not(:focus-within) {
+                &::after {
+                    border-block-end: rem(1px) solid var-get($theme, 'disabled-text-color');
+                }
+
+                &:hover {
+                    background: unset;
+                }
+            }
+        }
     }
 
     %indigo-label--focused {
@@ -1839,11 +1901,26 @@
             box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
             border-radius: inherit;
         }
+
+        &:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
+        &:has(textarea:read-only:not(:disabled)) {
+            igx-prefix,
+            [igxPrefix],
+            igx-suffix,
+            [igxSuffix] {
+                background: transparent;
+            }
+        }
     }
 
-    %form-group-bundle--fluent--hover {
-        &::before {
-            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'hover-border-color');
+    %form-group-bundle--fluent--hover:not(:focus-within) {
+        &:has(input:not([readonly])),
+        &:has(textarea:not([readonly])),
+        &:has(input[readonly][role="combobox"]),
+        &:has(input[readonly][type="file"]) {
+            &::before {
+                box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'hover-border-color');
+            }
         }
     }
 
@@ -1861,11 +1938,16 @@
         }
     }
 
-    %form-group-bundle-error--fluent,
+    %form-group-bundle-error--fluent:not(:focus-within),
     %form-group-bundle-error--fluent--hover,
     %form-group-bundle-error--fluent--focus {
-        &::before {
-            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
+        &:has(input:not([readonly])),
+        &:has(textarea:not([readonly])),
+        &:has(input[readonly][role="combobox"]),
+        &:has(input[readonly][type="file"]) {
+            &::before {
+                box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
+            }
         }
     }
 
@@ -2211,6 +2293,20 @@
                 transition: box-shadow .15s ease-out, border .15s ease-out;
             }
         }
+
+        &:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
+        &:has(textarea:read-only:not(:disabled)) {
+            %bootstrap-input {
+                background: var-get($theme, 'border-disabled-background');
+            }
+
+            igx-prefix,
+            [igxPrefix],
+            igx-suffix,
+            [igxSuffix] {
+                background: var-get($theme, 'border-disabled-background');
+            }
+        }
     }
 
     %bootstrap-input,
@@ -2267,13 +2363,16 @@
     }
 
     %bootstrap-input--error {
-        border: rem(1px) solid var-get($theme, 'error-secondary-color');
-
-        &:focus {
-            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+        &:not([readonly]),
+        &[role="combobox"] {
+            border: rem(1px) solid var-get($theme, 'error-secondary-color');
 
-            + %bootstrap-file-input {
+            &:focus {
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+
+                + %bootstrap-file-input {
+                    box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+                }
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss
index 7c574c4ce59..fb3b6bace46 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss
@@ -104,5 +104,9 @@
                 @extend %time-picker__buttons--vertical !optional;
             }
         }
+
+        @include m(readonly) {
+            @extend %time-picker-display--readonly !optional;
+        }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
index 9a661698792..3deebc470c6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
@@ -244,6 +244,97 @@
     %time-picker__buttons--vertical {
         align-items: flex-end;
     }
+
+    %time-picker-display--readonly igx-input-group {
+        igx-prefix,
+        [igxPrefix],
+        igx-suffix,
+        [igxSuffix] {
+            color: var(--disabled-text-color);
+
+            @if $variant == 'fluent' {
+                background: transparent;
+            }
+
+            @if $variant == 'bootstrap' {
+                background: var(--border-disabled-background);
+            }
+        }
+
+        @if $variant == 'bootstrap' {
+            %form-group-input {
+                background: var(--border-disabled-background);
+            }
+        }
+
+        &%form-group-display--box:not(%form-group-display--disabled) {
+            %form-group-bundle {
+                background: var(--box-background-focus);
+
+                &:hover {
+                    &:has(input[readonly][role="combobox"])::after {
+                        border-block-end-color: var(--idle-bottom-line-color);
+                    }
+                }
+            }
+        }
+
+        &%form-group-display--border:not(%form-group-display--disabled) {
+            %form-group-bundle:hover {
+                %form-group-bundle-start,
+                %igx-input-group__filler,
+                %form-group-bundle-end {
+                    border-color: var(--border-color);
+                }
+
+                %igx-input-group__notch {
+                    border-block-start-color: var(--border-color);
+                    border-block-end-color: var(--border-color);
+                }
+            }
+        }
+        
+        &:not(%form-group-display--disabled) {
+            %form-group-bundle:not(:focus-within) {
+                @if $variant == 'indigo' {
+                    &::after {
+                        border-block-end-color: var(--disabled-text-color);
+                    }
+
+                    &:hover {
+                        background: unset;
+                    }
+                }
+
+                &:hover:has(input[readonly][role="combobox"]) {
+                    &::before {
+                        @if $variant == 'fluent' {
+                            box-shadow: inset 0 0 0 rem(1px) var(--border-color);
+                        }
+                    }
+
+                    &::after {
+                        @if $variant == 'material' {
+                            border-block-end-color: var(--border-color);
+                        } @else if $variant == 'indigo' {
+                            border-block-end-color: var(--disabled-text-color);
+                        } 
+                    }
+                }
+            }
+        }
+
+        &:hover {
+            %form-group-input--hover {
+                cursor: default;
+                color: va(--filled-text-color);
+
+                &::placeholder {
+                    color: var(--placeholder-color);
+                }
+            }
+        }
+    }
 }
 
 /// Adds typography styles for the igx-calendar component.
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index f24cbaf792d..c63d4b27cf4 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -386,6 +386,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     public resourceStrings: IDatePickerResourceStrings;
 
     /** @hidden @internal */
+    @HostBinding('class.igx-date-picker--readonly')
     @Input({ transform: booleanAttribute })
     public readOnly = false;
 
@@ -585,7 +586,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
      * ```
      */
     public open(settings?: OverlaySettings): void {
-        if (!this.collapsed || this.disabled) {
+        if (!this.collapsed || this.disabled || this.readOnly) {
             return;
         }
 
@@ -683,7 +684,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
      * ```
      */
     public clear(): void {
-        if (!this.disabled) {
+        if (!this.disabled || !this.readOnly) {
             this._calendar?.deselectDate();
             this.dateTimeEditor.clear();
         }
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
index d70f0bddb6a..5d481043f25 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
@@ -240,6 +240,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     public formatter: (val: Date) => string;
 
     /** @hidden @internal */
+    @HostBinding('class.igx-time-picker--readonly')
     @Input({ transform: booleanAttribute })
     public readOnly = false;
 
@@ -767,7 +768,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
      * ```
      */
     public open(settings?: OverlaySettings): void {
-        if (this.disabled || !this.toggleRef.collapsed) {
+        if (this.disabled || !this.toggleRef.collapsed || this.readOnly) {
             return;
         }
 
@@ -811,7 +812,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
      * ```
      */
     public clear(): void {
-        if (this.disabled) {
+        if (this.disabled || this.readOnly) {
             return;
         }
 
diff --git a/src/app/date-picker/date-picker.sample.html b/src/app/date-picker/date-picker.sample.html
index 2e52f629db1..ded04c6a749 100644
--- a/src/app/date-picker/date-picker.sample.html
+++ b/src/app/date-picker/date-picker.sample.html
@@ -3,11 +3,12 @@ <h6>Angular Date Picker</h6>
     <igx-date-picker
         #dpAng
         [mode]="modeAngular"
-        type="box"
+        [type]="properties.type"
         [value]="properties.value"
         [displayFormat]="properties.displayFormat"
         [inputFormat]="properties.inputFormat"
         [required]="properties.required"
+        [readOnly]="properties.readonly"
         [disabled]="properties.disabled"
         [placeholder]="properties.placeholder"
         showWeekNumbers="true"
diff --git a/src/app/date-picker/date-picker.sample.ts b/src/app/date-picker/date-picker.sample.ts
index ee36f3bc953..fcc1d9042ed 100644
--- a/src/app/date-picker/date-picker.sample.ts
+++ b/src/app/date-picker/date-picker.sample.ts
@@ -107,12 +107,25 @@ export class DatePickerSampleComponent {
                 defaultValue: 'dropdown'
             }
         },
+        type: {
+            control: {
+                type: 'button-group',
+                options: ['box', 'border', 'line'],
+                defaultValue: 'box'
+            }
+        },
         required: {
             control: {
                 type: 'boolean',
                 defaultValue: false
             }
         },
+        readonly: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
         disabled: {
             control: {
                 type: 'boolean',