diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
index 427f2ef819..013e001ec6 100644
--- a/packages/angular-test-app/src/app/app-routing.module.ts
+++ b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -57,6 +57,7 @@ import DateInputDisabled from '../preview-examples/date-input-disabled';
 import DateInputLabel from '../preview-examples/date-input-label';
 import DateInputReadonly from '../preview-examples/date-input-readonly';
 import DateInputValidation from '../preview-examples/date-input-validation';
+import DateInputWithSlots from '../preview-examples/date-input-with-slots';
 import Datepicker from '../preview-examples/datepicker';
 import DatepickerLocale from '../preview-examples/datepicker-locale';
 import DatepickerRange from '../preview-examples/datepicker-range';
@@ -99,6 +100,8 @@ import FormCheckboxDisabled from '../preview-examples/form-checkbox-disabled';
 import FormCheckboxGroup from '../preview-examples/form-checkbox-group';
 import FormCheckboxGroupIndeterminate from '../preview-examples/form-checkbox-group-indeterminate';
 import FormCheckboxValidation from '../preview-examples/form-checkbox-validation';
+import FormLayoutAuto from '../preview-examples/form-layout-auto';
+import FormLayoutGrid from '../preview-examples/form-layout-grid';
 import FormValidation from '../preview-examples/form-validation';
 import Grid from '../preview-examples/grid';
 import GridPadding from '../preview-examples/grid-padding';
@@ -127,6 +130,7 @@ import InputPattern from '../preview-examples/input-pattern';
 import InputReadonly from '../preview-examples/input-readonly';
 import InputTypes from '../preview-examples/input-types';
 import InputValidation from '../preview-examples/input-validation';
+import InputWithSlots from '../preview-examples/input-with-slots';
 import KeyValue from '../preview-examples/key-value';
 import KeyValueList from '../preview-examples/key-value-list';
 import KeyValueListStriped from '../preview-examples/key-value-list-striped';
@@ -157,6 +161,7 @@ import NumberInputLabel from '../preview-examples/number-input-label';
 import NumberInputReadonly from '../preview-examples/number-input-readonly';
 import NumberInputStepperButton from '../preview-examples/number-input-stepper-button';
 import NumberInputValidation from '../preview-examples/number-input-validation';
+import NumberInputWithSlots from '../preview-examples/number-input-with-slots';
 import Pagination from '../preview-examples/pagination';
 import PaginationAdvanced from '../preview-examples/pagination-advanced';
 import Pane from '../preview-examples/pane';
@@ -222,8 +227,6 @@ import VerticalTabs from '../preview-examples/vertical-tabs';
 import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar';
 import Workflow from '../preview-examples/workflow';
 import WorkflowVertical from '../preview-examples/workflow-vertical';
-import FormLayoutAuto from 'src/preview-examples/form-layout-auto';
-import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
 
 const routes: Routes = [
   {
@@ -434,6 +437,10 @@ const routes: Routes = [
         path: 'date-input-validation',
         component: DateInputValidation,
       },
+      {
+        path: 'date-input-with-slots',
+        component: DateInputWithSlots,
+      },
       {
         path: 'datepicker',
         component: Datepicker,
@@ -770,6 +777,7 @@ const routes: Routes = [
       { path: 'input-readonly', component: InputReadonly },
       { path: 'input-types', component: InputTypes },
       { path: 'input-validation', component: InputValidation },
+      { path: 'input-with-slots', component: InputWithSlots },
       { path: 'theme-switcher', component: ThemeService },
       { path: 'tile', component: Tile },
       { path: 'timepicker', component: Timepicker },
@@ -901,6 +909,7 @@ const routes: Routes = [
         component: NumberInputStepperButton,
       },
       { path: 'number-input-validation', component: NumberInputValidation },
+      { path: 'number-input-with-slots', component: NumberInputWithSlots },
       { path: 'tooltip', component: Tooltip },
       { path: 'modal-by-instance', component: ModalByInstance },
       { path: 'push-card', component: PushCard },
diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
index ee904b99f8..d33aec70dc 100644
--- a/packages/angular-test-app/src/app/app.module.ts
+++ b/packages/angular-test-app/src/app/app.module.ts
@@ -65,6 +65,7 @@ import DateInputDisabled from '../preview-examples/date-input-disabled';
 import DateInputLabel from '../preview-examples/date-input-label';
 import DateInputReadonly from '../preview-examples/date-input-readonly';
 import DateInputValidation from '../preview-examples/date-input-validation';
+import DateInputWithSlots from '../preview-examples/date-input-with-slots';
 import Datepicker from '../preview-examples/datepicker';
 import DatepickerLocale from '../preview-examples/datepicker-locale';
 import DatepickerRange from '../preview-examples/datepicker-range';
@@ -107,6 +108,8 @@ import FormCheckboxDisabled from '../preview-examples/form-checkbox-disabled';
 import FormCheckboxGroup from '../preview-examples/form-checkbox-group';
 import FormCheckboxGroupIndeterminate from '../preview-examples/form-checkbox-group-indeterminate';
 import FormCheckboxValidation from '../preview-examples/form-checkbox-validation';
+import FormLayoutAuto from '../preview-examples/form-layout-auto';
+import FormLayoutGrid from '../preview-examples/form-layout-grid';
 import FormValidation from '../preview-examples/form-validation';
 import Grid from '../preview-examples/grid';
 import GridPadding from '../preview-examples/grid-padding';
@@ -135,6 +138,7 @@ import InputPattern from '../preview-examples/input-pattern';
 import InputReadonly from '../preview-examples/input-readonly';
 import InputTypes from '../preview-examples/input-types';
 import InputValidation from '../preview-examples/input-validation';
+import InputWithSlots from '../preview-examples/input-with-slots';
 import KeyValue from '../preview-examples/key-value';
 import KeyValueList from '../preview-examples/key-value-list';
 import KeyValueListStriped from '../preview-examples/key-value-list-striped';
@@ -165,6 +169,7 @@ import NumberInputLabel from '../preview-examples/number-input-label';
 import NumberInputReadonly from '../preview-examples/number-input-readonly';
 import NumberInputStepperButton from '../preview-examples/number-input-stepper-button';
 import NumberInputValidation from '../preview-examples/number-input-validation';
+import NumberInputWithSlots from '../preview-examples/number-input-with-slots';
 import Pagination from '../preview-examples/pagination';
 import PaginationAdvanced from '../preview-examples/pagination-advanced';
 import Pane from '../preview-examples/pane';
@@ -230,8 +235,6 @@ import VerticalTabs from '../preview-examples/vertical-tabs';
 import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar';
 import Workflow from '../preview-examples/workflow';
 import WorkflowVertical from '../preview-examples/workflow-vertical';
-import FormLayoutAuto from 'src/preview-examples/form-layout-auto';
-import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
 
 @NgModule({
   declarations: [
@@ -284,6 +287,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
     DateInputLabel,
     DateInputReadonly,
     DateInputValidation,
+    DateInputWithSlots,
     ContentExample,
     DateDropdown,
     DateDropdownUserRange,
@@ -413,6 +417,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
     InputReadonly,
     InputTypes,
     InputValidation,
+    InputWithSlots,
     InputPattern,
     TextareaLegacyReadonly,
     TextareaLegacy,
@@ -450,6 +455,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
     NumberInputReadonly,
     NumberInputStepperButton,
     NumberInputValidation,
+    NumberInputWithSlots,
     TabsRounded,
     DatepickerRange,
     Tooltip,
diff --git a/packages/angular-test-app/src/preview-examples/date-input-with-slots.html b/packages/angular-test-app/src/preview-examples/date-input-with-slots.html
new file mode 100644
index 0000000000..7cfcb9d6f4
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/date-input-with-slots.html
@@ -0,0 +1,13 @@
+<!--
+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.
+-->
+
+<ix-date-input value="1970/01/01">
+  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
+  <ix-typography slot="end">Slot</ix-typography>
+</ix-date-input>
diff --git a/packages/angular-test-app/src/preview-examples/date-input-with-slots.ts b/packages/angular-test-app/src/preview-examples/date-input-with-slots.ts
new file mode 100644
index 0000000000..003cb39720
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/date-input-with-slots.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './date-input-with-slots.html',
+})
+export default class DateInputWithSlots {}
diff --git a/packages/angular-test-app/src/preview-examples/input-with-slots.html b/packages/angular-test-app/src/preview-examples/input-with-slots.html
new file mode 100644
index 0000000000..4fe5530e2d
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/input-with-slots.html
@@ -0,0 +1,13 @@
+<!--
+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.
+-->
+
+<ix-input>
+  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
+  <ix-typography slot="end">unit</ix-typography>
+</ix-input>
diff --git a/packages/angular-test-app/src/preview-examples/input-with-slots.ts b/packages/angular-test-app/src/preview-examples/input-with-slots.ts
new file mode 100644
index 0000000000..649b3a9383
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/input-with-slots.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './input-with-slots.html'
+})
+export default class InputWithSlots {}
diff --git a/packages/angular-test-app/src/preview-examples/number-input-with-slots.html b/packages/angular-test-app/src/preview-examples/number-input-with-slots.html
new file mode 100644
index 0000000000..cb9e63db72
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/number-input-with-slots.html
@@ -0,0 +1,13 @@
+<!--
+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.
+-->
+
+<ix-number-input>
+  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
+  <ix-typography slot="end">unit</ix-typography>
+</ix-number-input>
diff --git a/packages/angular-test-app/src/preview-examples/number-input-with-slots.ts b/packages/angular-test-app/src/preview-examples/number-input-with-slots.ts
new file mode 100644
index 0000000000..5d5e329aa7
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/number-input-with-slots.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './number-input-with-slots.html'
+})
+export default class NumberInputWithSlots {}
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index ada4ed96bf..bc355c4a68 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -4465,6 +4465,14 @@
         {
           "name": "form-ready",
           "text": "2.6.0"
+        },
+        {
+          "name": "slot",
+          "text": "start - Element will be displayed at the start of the input"
+        },
+        {
+          "name": "slot",
+          "text": "end - Element will be displayed at the end of the input"
         }
       ],
       "encapsulation": "shadow",
@@ -4941,7 +4949,16 @@
         }
       ],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "end",
+          "docs": "Element will be displayed at the end of the input"
+        },
+        {
+          "name": "start",
+          "docs": "Element will be displayed at the start of the input"
+        }
+      ],
       "parts": [],
       "listeners": []
     },
@@ -9633,6 +9650,14 @@
         {
           "name": "form-ready",
           "text": "2.6.0"
+        },
+        {
+          "name": "slot",
+          "text": "start - Element will be displayed at the start of the input"
+        },
+        {
+          "name": "slot",
+          "text": "end - Element will be displayed at the end of the input"
         }
       ],
       "encapsulation": "shadow",
@@ -10165,7 +10190,16 @@
         }
       ],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "end",
+          "docs": "Element will be displayed at the end of the input"
+        },
+        {
+          "name": "start",
+          "docs": "Element will be displayed at the start of the input"
+        }
+      ],
       "parts": [],
       "listeners": []
     },
@@ -13814,6 +13848,14 @@
         {
           "name": "form-ready",
           "text": "2.6.0"
+        },
+        {
+          "name": "slot",
+          "text": "start - Element will be displayed at the start of the input"
+        },
+        {
+          "name": "slot",
+          "text": "end - Element will be displayed at the end of the input"
         }
       ],
       "encapsulation": "shadow",
@@ -14332,7 +14374,16 @@
         }
       ],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "end",
+          "docs": "Element will be displayed at the end of the input"
+        },
+        {
+          "name": "start",
+          "docs": "Element will be displayed at the start of the input"
+        }
+      ],
       "parts": [],
       "listeners": []
     },
diff --git a/packages/core/src/components/date-input/date-input.tsx b/packages/core/src/components/date-input/date-input.tsx
index 652c6e212d..e84807bcc7 100644
--- a/packages/core/src/components/date-input/date-input.tsx
+++ b/packages/core/src/components/date-input/date-input.tsx
@@ -42,6 +42,8 @@ export type DateInputValidityState = {
 /**
  * @since 2.6.0
  * @form-ready 2.6.0
+ * @slot start - Element will be displayed at the start of the input
+ * @slot end - Element will be displayed at the end of the input
  */
 @Component({
   tag: 'ix-date-input',
diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
index bf83c7c5e9..f2ab6dd774 100644
--- a/packages/core/src/components/input/input.tsx
+++ b/packages/core/src/components/input/input.tsx
@@ -42,6 +42,8 @@ let inputIds = 0;
 /**
  * @since 2.6.0
  * @form-ready 2.6.0
+ * @slot start - Element will be displayed at the start of the input
+ * @slot end - Element will be displayed at the end of the input
  */
 @Component({
   tag: 'ix-input',
diff --git a/packages/core/src/components/input/number-input.tsx b/packages/core/src/components/input/number-input.tsx
index 2b99348fc6..4573e4b692 100644
--- a/packages/core/src/components/input/number-input.tsx
+++ b/packages/core/src/components/input/number-input.tsx
@@ -40,6 +40,8 @@ let numberInputIds = 0;
 /**
  * @since 2.6.0
  * @form-ready 2.6.0
+ * @slot start - Element will be displayed at the start of the input
+ * @slot end - Element will be displayed at the end of the input
  */
 @Component({
   tag: 'ix-number-input',
diff --git a/packages/documentation/docs/controls/_date-input_code.mdx b/packages/documentation/docs/controls/_date-input_code.mdx
index 8bd6e7cf4c..4bd0edacb1 100644
--- a/packages/documentation/docs/controls/_date-input_code.mdx
+++ b/packages/documentation/docs/controls/_date-input_code.mdx
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/PlaygroundV3';
 import Props from '@site/docs/auto-generated/ix-date-input/props.md';
 import Events from '@site/docs/auto-generated/ix-date-input/events.md';
+import Slots from '@site/docs/auto-generated/ix-input/slots.md';
 
 ## Development
 
@@ -26,6 +27,10 @@ import Events from '@site/docs/auto-generated/ix-date-input/events.md';
 
 <Playground name="date-input-validation" height="40rem"></Playground>
 
+#### Slots
+
+<Playground name="date-input-with-slots" height="28rem"></Playground>
+
 ### API
 
 #### Properties
@@ -35,3 +40,7 @@ import Events from '@site/docs/auto-generated/ix-date-input/events.md';
 #### Events
 
 <Events />
+
+#### Slots
+
+<Slots />
diff --git a/packages/documentation/docs/controls/_input_code.md b/packages/documentation/docs/controls/_input_code.md
index 222d7a7158..2c09f55363 100644
--- a/packages/documentation/docs/controls/_input_code.md
+++ b/packages/documentation/docs/controls/_input_code.md
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/PlaygroundV3';
 import Props from '@site/docs/auto-generated/ix-input/props.md';
 import Events from '@site/docs/auto-generated/ix-input/events.md';
+import Slots from '@site/docs/auto-generated/ix-input/slots.md';
 import Tags from '@site/docs/auto-generated/ix-input/tags.md';
 
 ## Development
@@ -33,11 +34,11 @@ import Tags from '@site/docs/auto-generated/ix-input/tags.md';
 
 #### Validation
 
-<Playground
-name="input-validation"
-height="27rem"
+<Playground name="input-validation" height="27rem"></Playground>
 
-> </Playground>
+#### Slots
+
+<Playground name="input-with-slots"></Playground>
 
 ### API
 
@@ -48,3 +49,7 @@ height="27rem"
 #### Events
 
 <Events />
+
+#### Slots
+
+<Slots />
diff --git a/packages/documentation/docs/controls/_number-input_code.mdx b/packages/documentation/docs/controls/_number-input_code.mdx
index c2d790c18c..e2f3f0c055 100644
--- a/packages/documentation/docs/controls/_number-input_code.mdx
+++ b/packages/documentation/docs/controls/_number-input_code.mdx
@@ -1,5 +1,6 @@
 import Playground from '@site/src/components/PlaygroundV3';
 import Props from '@site/docs/auto-generated/ix-number-input/props.md';
+import Slots from '@site/docs/auto-generated/ix-input/slots.md';
 import Events from '@site/docs/auto-generated/ix-number-input/events.md';
 
 ## Development
@@ -34,6 +35,10 @@ import Events from '@site/docs/auto-generated/ix-number-input/events.md';
   examplesByName
 ></Playground>
 
+#### Slots
+
+<Playground name="number-input-with-slots"></Playground>
+
 ### API
 
 #### Properties
@@ -43,3 +48,7 @@ import Events from '@site/docs/auto-generated/ix-number-input/events.md';
 #### Events
 
 <Events />
+
+#### Slots
+
+<Slots />
diff --git a/packages/html-test-app/src/preview-examples/date-input-with-slots.html b/packages/html-test-app/src/preview-examples/date-input-with-slots.html
new file mode 100644
index 0000000000..6021085b95
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/date-input-with-slots.html
@@ -0,0 +1,25 @@
+<!--
+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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Date input with slots example</title>
+  </head>
+  <body>
+    <ix-date-input value="1970/01/01">
+      <ix-icon slot="start" name="bulb" size="16"></ix-icon>
+      <ix-typography slot="end">Slot</ix-typography>
+    </ix-date-input>
+
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
diff --git a/packages/html-test-app/src/preview-examples/input-with-slots.html b/packages/html-test-app/src/preview-examples/input-with-slots.html
new file mode 100644
index 0000000000..bb748f56f6
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/input-with-slots.html
@@ -0,0 +1,25 @@
+<!--
+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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input with slots example</title>
+  </head>
+  <body>
+    <ix-input>
+      <ix-icon slot="start" name="bulb" size="16"></ix-icon>
+      <ix-typography slot="end">unit</ix-typography>
+    </ix-input>
+
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
diff --git a/packages/html-test-app/src/preview-examples/number-input-with-slots.html b/packages/html-test-app/src/preview-examples/number-input-with-slots.html
new file mode 100644
index 0000000000..0c9086f8d8
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/number-input-with-slots.html
@@ -0,0 +1,25 @@
+<!--
+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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Number input with slots example</title>
+  </head>
+  <body>
+    <ix-number-input>
+      <ix-icon slot="start" name="bulb" size="16"></ix-icon>
+      <ix-typography slot="end">unit</ix-typography>
+    </ix-number-input>
+
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx
index 778af5ab9a..95b53a2fbe 100644
--- a/packages/react-test-app/src/main.tsx
+++ b/packages/react-test-app/src/main.tsx
@@ -218,6 +218,10 @@ import LayoutAutoCustom from './preview-examples/layout-auto-custom';
 import FormCheckboxGroupIndeterminate from './preview-examples/form-checkbox-group-indeterminate';
 import FormLayoutAuto from './preview-examples/form-layout-auto';
 import FormLayoutGrid from './preview-examples/form-layout-grid';
+import InputWithSlots from './preview-examples/input-with-slots';
+import NumberInputWithSlots from './preview-examples/number-input-with-slots';
+import DateInput from './preview-examples/date-input';
+import DateInputWithSlots from './preview-examples/date-input-with-slots';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <IxApplicationContext>
@@ -600,6 +604,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         <Route path="/preview/input-readonly" element={<InputReadonly />} />
         <Route path="/preview/input-types" element={<InputTypes />} />
         <Route path="/preview/input-validation" element={<InputValidation />} />
+        <Route path="/preview/input-with-slots" element={<InputWithSlots />} />
         <Route path="/preview/textarea-legacy" element={<TextareaLegacy />} />
         <Route path="/preview/theme-switcher" element={<ThemeSwitcher />} />
         <Route path="/preview/tile" element={<Tile />} />
@@ -641,6 +646,10 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         <Route path="/preview/tooltip" element={<Tooltip />} />
         <Route path="/preview/tree-custom" element={<TreeCustom />} />
         <Route path="/preview/number-input" element={<NumberInput />} />
+        <Route
+          path="/preview/number-input-with-slots"
+          element={<NumberInputWithSlots />}
+        />
         <Route
           path="/preview/number-input-disabled"
           element={<NumberInputDisabled />}
@@ -661,6 +670,11 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
           path="/preview/number-input-validation"
           element={<NumberInputValidation />}
         />
+        <Route path="/preview/date-input" element={<DateInput />} />
+        <Route
+          path="/preview/date-input-with-slots"
+          element={<DateInputWithSlots />}
+        />
         <Route path="/preview/tree" element={<Tree />} />
         <Route path="/preview/upload" element={<Upload />} />
         <Route path="/preview/validation" element={<Validation />} />
diff --git a/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx b/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx
new file mode 100644
index 0000000000..61d878a91b
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx
@@ -0,0 +1,19 @@
+/*
+ * 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 { IxDateInput, IxIcon, IxTypography } from '@siemens/ix-react';
+
+export default () => {
+  return (
+    <IxDateInput value="1970/01/01">
+      <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+      <IxTypography slot="end">Slot</IxTypography>
+    </IxDateInput>
+  );
+};
diff --git a/packages/react-test-app/src/preview-examples/input-with-slots.tsx b/packages/react-test-app/src/preview-examples/input-with-slots.tsx
new file mode 100644
index 0000000000..29f9f00244
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/input-with-slots.tsx
@@ -0,0 +1,19 @@
+/*
+ * 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 { IxIcon, IxInput, IxTypography } from '@siemens/ix-react';
+
+export default () => {
+  return (
+    <IxInput>
+      <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+      <IxTypography slot="end">unit</IxTypography>
+    </IxInput>
+  );
+};
diff --git a/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx b/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx
new file mode 100644
index 0000000000..dc63253fdd
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx
@@ -0,0 +1,19 @@
+/*
+ * 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 { IxIcon, IxNumberInput, IxTypography } from '@siemens/ix-react';
+
+export default () => {
+  return (
+    <IxNumberInput>
+      <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+      <IxTypography slot="end">unit</IxTypography>
+    </IxNumberInput>
+  );
+};
diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue
index 00340e0c48..438dd9d7fa 100644
--- a/packages/vue-test-app/src/Root.vue
+++ b/packages/vue-test-app/src/Root.vue
@@ -56,6 +56,8 @@ import CustomFieldValidation from './preview-examples/custom-field-validation.vu
 import CustomField from './preview-examples/custom-field.vue';
 import DateDropdownUserRange from './preview-examples/date-dropdown-user-range.vue';
 import DateDropdown from './preview-examples/date-dropdown.vue';
+import DateInputWithSlots from './preview-examples/date-input-with-slots.vue';
+import DateInput from './preview-examples/date-input.vue';
 import DatepickerLocale from './preview-examples/datepicker-locale.vue';
 import DatepickerRange from './preview-examples/datepicker-range.vue';
 import Datepicker from './preview-examples/datepicker.vue';
@@ -98,6 +100,8 @@ import FormCheckboxGroupIndeterminate from './preview-examples/form-checkbox-gro
 import FormCheckboxGroup from './preview-examples/form-checkbox-group.vue';
 import FormCheckboxValidation from './preview-examples/form-checkbox-validation.vue';
 import FormCheckbox from './preview-examples/form-checkbox.vue';
+import FormLayoutAuto from './preview-examples/form-layout-auto.vue';
+import FormLayoutGrid from './preview-examples/form-layout-grid.vue';
 import FormValidation from './preview-examples/form-validation.vue';
 import GridPadding from './preview-examples/grid-padding.vue';
 import GridSize from './preview-examples/grid-size.vue';
@@ -124,6 +128,7 @@ import InputPattern from './preview-examples/input-pattern.vue';
 import InputReadonly from './preview-examples/input-readonly.vue';
 import InputTypes from './preview-examples/input-types.vue';
 import InputValidation from './preview-examples/input-validation.vue';
+import InputWithSlots from './preview-examples/input-with-slots.vue';
 import Input from './preview-examples/input.vue';
 import KeyValueListStriped from './preview-examples/key-value-list-striped.vue';
 import KeyValueListWithCustomValue from './preview-examples/key-value-list-with-custom-value.vue';
@@ -151,6 +156,7 @@ import NumberInputDisabled from './preview-examples/number-input-disabled.vue';
 import NumberInputLabel from './preview-examples/number-input-label.vue';
 import NumberInputReadOnly from './preview-examples/number-input-readonly.vue';
 import NumberInputStepperButton from './preview-examples/number-input-stepper-button.vue';
+import NumberInputWithSlots from './preview-examples/number-input-with-slots.vue';
 import NumberInput from './preview-examples/number-input.vue';
 import PaginationAdvanced from './preview-examples/pagination-advanced.vue';
 import Pagination from './preview-examples/pagination.vue';
@@ -215,8 +221,6 @@ import VerticalTabsWithAvatar from './preview-examples/vertical-tabs-with-avatar
 import VerticalTabs from './preview-examples/vertical-tabs.vue';
 import WorkflowVertical from './preview-examples/workflow-vertical.vue';
 import Workflow from './preview-examples/workflow.vue';
-import FormLayoutAuto from './preview-examples/form-layout-auto.vue';
-import FormLayoutGrid from './preview-examples/form-layout-grid.vue';
 
 const routes: any = {
   '/': App,
@@ -357,6 +361,7 @@ const routes: any = {
   '/preview/input-readonly': InputReadonly,
   '/preview/input-types': InputTypes,
   '/preview/input-validation': InputValidation,
+  '/preview/input-with-slots': InputWithSlots,
   '/preview/tile': Tile,
   '/preview/timepicker': Timepicker,
   '/preview/toast': Toast,
@@ -376,6 +381,9 @@ const routes: any = {
   '/preview/number-input-label': NumberInputLabel,
   '/preview/number-input-readonly': NumberInputReadOnly,
   '/preview/number-input-stepper-button': NumberInputStepperButton,
+  '/preview/number-input-with-slots': NumberInputWithSlots,
+  '/preview/date-input': DateInput,
+  '/preview/date-input-with-slots': DateInputWithSlots,
   '/preview/workflow': Workflow,
   '/preview/workflow-vertical': WorkflowVertical,
   '/preview/map-navigation': MapNavigation,
diff --git a/packages/vue-test-app/src/preview-examples/date-input-with-slots.vue b/packages/vue-test-app/src/preview-examples/date-input-with-slots.vue
new file mode 100644
index 0000000000..1979ec10b0
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/date-input-with-slots.vue
@@ -0,0 +1,19 @@
+<!--
+ * 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.
+-->
+
+<script setup lang="ts">
+import { IxDateInput, IxIcon, IxTypography } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxDateInput value="1970/01/01">
+    <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+    <IxTypography slot="end">Slot</IxTypography>
+  </IxDateInput>
+</template>
diff --git a/packages/vue-test-app/src/preview-examples/input-with-slots.vue b/packages/vue-test-app/src/preview-examples/input-with-slots.vue
new file mode 100644
index 0000000000..5d388f72cb
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/input-with-slots.vue
@@ -0,0 +1,19 @@
+<!--
+ * 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.
+-->
+
+<script setup lang="ts">
+import { IxInput, IxIcon, IxTypography } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxInput>
+    <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+    <IxTypography slot="end">unit</IxTypography>
+  </IxInput>
+</template>
diff --git a/packages/vue-test-app/src/preview-examples/number-input-with-slots.vue b/packages/vue-test-app/src/preview-examples/number-input-with-slots.vue
new file mode 100644
index 0000000000..d533aefd15
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/number-input-with-slots.vue
@@ -0,0 +1,19 @@
+<!--
+ * 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.
+-->
+
+<script setup lang="ts">
+import { IxIcon, IxNumberInput, IxTypography } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxNumberInput>
+    <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+    <IxTypography slot="end">unit</IxTypography>
+  </IxNumberInput>
+</template>