npm - @siemens/ix-docs - Versions diffs - 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251211061723 - Mend

@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251211061723

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1026) hide show

package/build/docs/autogenerated/prompt/ix-input/readme.md CHANGED Viewed

@@ -1,8 +1,2318 @@
-# ix-textarea
+# ix-input
+## HTML Examples
-<!-- Auto Generated Below -->
+### Example: custom-field
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Custom field example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconOpenFile } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconOpenFile,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-custom-field helper-text="Choose file">
+      <ix-input value="No file chosen" readonly></ix-input>
+      <ix-icon-button icon="open-file" variant="subtle-primary"></ix-icon-button>
+      <input id="file-upload" type="file" style="display: none" />
+    </ix-custom-field>
+    <script type="module" src="./init.js"></script>
+    <script>
+      document.querySelector('ix-icon-button').addEventListener('click', () => {
+        document.querySelector('#file-upload').click();
+      });
+      document.querySelector('#file-upload').addEventListener('input', (e) => {
+        const fileName = e.target.files[0]?.name;
+        document.querySelector('ix-input').value = fileName || 'No file chosen';
+      });
+    </script>
+  </body>
+</html>
+```
+### Example: form-layout-auto
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Avatar example</title>
+  </head>
+  <body>
+    <ix-layout-auto>
+      <ix-field-label htmlFor="my-select-1">Example</ix-field-label>
+      <ix-select id="my-select-1"></ix-select>
+      <ix-field-label htmlFor="my-select-2">Example</ix-field-label>
+      <ix-input id="my-select-2"></ix-input>
+      <ix-button data-colspan="2">Submit</ix-button>
+    </ix-layout-auto>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: form-layout-grid
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Avatar example</title>
+    <link rel="stylesheet" href="./form-layout-grid.css" />
+  </head>
+  <body>
+    <ix-layout-grid class="layout-grid-example">
+      <ix-row>
+        <ix-col size="2" size-sm="12">
+          <ix-field-label for="my-select-1">Example</ix-field-label>
+        </ix-col>
+        <ix-col>
+          <ix-select id="my-select-1"></ix-select>
+        </ix-col>
+      </ix-row>
+      <ix-row>
+        <ix-col size="2" size-sm="12">
+          <ix-field-label for="my-select-2">Example</ix-field-label>
+        </ix-col>
+        <ix-col>
+          <ix-input id="my-select-2"></ix-input>
+        </ix-col>
+      </ix-row>
+      <ix-row>
+        <ix-col size="12" size-sm="12">
+          <ix-button data-colspan="2">Submit</ix-button>
+        </ix-col>
+      </ix-row>
+    </ix-layout-grid>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: input-disabled
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input disabled example</title>
+  </head>
+  <body>
+    <ix-input
+      placeholder="Some placeholder"
+      value="Some example text"
+      disabled
+    ></ix-input>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: input-label
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input label example</title>
+  </head>
+  <body>
+    <ix-input
+      label="Some label"
+      placeholder="Some placeholder"
+      value="Some example text"
+      helper-text="Some helper text"
+    ></ix-input>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: input-pattern
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input pattern example</title>
+  </head>
+  <body>
+    <ix-input
+      helper-text="Only characters a-d are allowed"
+      allowed-characters-pattern="[a-d]"
+      max-length="4"
+    ></ix-input>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: input-readonly
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input readonly example</title>
+  </head>
+  <body>
+    <ix-input
+      readonly
+      label="Readonly"
+      placeholder="Placeholder text..."
+      value="Some text"
+    ></ix-input>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: input-types
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input types example</title>
+  </head>
+  <link rel="stylesheet" href="./input-types.css" />
+  <body>
+    <div>
+      <ix-input type="text" label="Username" value="MaxMuster1"></ix-input>
+    </div>
+    <div>
+      <ix-input
+        type="email"
+        label="Email"
+        value="example@example.com"
+      ></ix-input>
+    </div>
+    <div>
+      <ix-input
+        type="password"
+        label="Password"
+        placeholder="Enter your password"
+        value="1234"
+      ></ix-input>
+    </div>
+    <div>
+      <ix-input
+        type="tel"
+        label="Telephone"
+        placeholder="Enter your phone number"
+        value="+49 123 456789"
+      ></ix-input>
+    </div>
+    <div>
+      <ix-input
+        type="url"
+        label="URL"
+        placeholder="Enter your URL"
+        value="https://ix.siemens.io"
+      ></ix-input>
+    </div>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: input-validation
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input validation example</title>
+  </head>
+  <style>
+    ix-input {
+      margin-bottom: 1rem;
+    }
+  </style>
+  <body>
+    <div>
+      <ix-input
+        label="Username"
+        placeholder="Enter your Username"
+        info-text="Info text"
+        class="ix-info"
+      ></ix-input>
+    </div>
+    <div>
+      <ix-input
+        label="Username"
+        placeholder="Enter your Username"
+        warning-text="Warning text"
+        class="ix-warning"
+      ></ix-input>
+    </div>
+    <div>
+      <ix-input
+        label="Username"
+        placeholder="Enter your Username"
+        valid-text="Valid text"
+        class="ix-valid"
+      ></ix-input>
+    </div>
+    <div>
+      <ix-input
+        label="Username"
+        placeholder="Enter your Username"
+        invalid-text="Invalid text"
+        class="ix-invalid"
+      ></ix-input>
+    </div>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: input-with-slots
+```html
+<!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>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconBulb } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconBulb,
+      });
+    </script>
+  </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>
+```
+### Example: input
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input example</title>
+  </head>
+  <body>
+    <ix-input placeholder="Enter your Username"></ix-input>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: modal-form-ix-button-submit
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modal Form Example</title>
+  </head>
+  <body>
+    <ix-button>Show modal</ix-button>
+    <template id="modal-form-template">
+      <ix-modal-header>Create Resource</ix-modal-header>
+      <ix-modal-content>
+        <form id="create-resource-form">
+          <ix-input label="Name" type="text" id="name" name="name"></ix-input>
+        </form>
+      </ix-modal-content>
+      <ix-modal-footer>
+        <ix-button variant="subtle-primary" data-cancel>Cancel</ix-button>
+        <ix-button type="submit" form="create-resource-form">Submit</ix-button>
+      </ix-modal-footer>
+    </template>
+    <script type="module">
+      import { showModal, closeModal, dismissModal } from '@siemens/ix';
+      function createFormModal() {
+        const name = 'modal-form-example';
+        window.customElements.define(
+          name,
+          class extends HTMLElement {
+            isInitalRender = false;
+            connectedCallback() {
+              if (this.isInitalRender) {
+                return;
+              }
+              this.isInitalRender = true;
+              this.firstRender();
+            }
+            firstRender() {
+              const modalTemplate = document.getElementById(
+                'modal-form-template'
+              );
+              const template = modalTemplate.content.cloneNode(true);
+              const cancelButton = template.querySelector('[data-cancel]');
+              const form = template.querySelector('#create-resource-form');
+              cancelButton.addEventListener('click', () => {
+                dismissModal(this);
+              });
+              form.addEventListener('submit', (event) => {
+                event.preventDefault();
+                closeModal(this);
+              });
+              this.append(template);
+            }
+          }
+        );
+        return name;
+      }
+      (async function () {
+        const formModalName = createFormModal();
+        await window.customElements.whenDefined('ix-button');
+        const button = document.querySelector('ix-button');
+        button.addEventListener('click', async () => {
+          const customModal = document.createElement(formModalName);
+          await showModal({
+            content: customModal,
+          });
+        });
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+## React Examples
+### Example: custom-field
+```tsx
+import { useRef } from 'react';
+import { IxCustomField, IxIconButton, IxInput } from '@siemens/ix-react';
+export default () => {
+  const ref = useRef<HTMLInputElement>(null);
+  return (
+    <IxCustomField helper-text="Choose file">
+      <IxInput value="Enter text here" readonly></IxInput>
+      <IxIconButton icon="open-file" variant="subtle-primary" onClick={() => {
+          ref.current?.click();
+        }}
+      ></IxIconButton>
+      <input
+        ref={ref}
+        id="file-upload"
+        type="file"
+        style={{ display: 'none' }}
+        onInput={(e: any) => console.log(e.target.files)}
+      />
+    </IxCustomField>
+  );
+};
+```
+### Example: form-layout-auto
+```tsx
+import {
+  IxButton,
+  IxFieldLabel,
+  IxInput,
+  IxLayoutAuto,
+  IxSelect,
+} from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxLayoutAuto>
+      <IxFieldLabel htmlFor="my-select-1">Example</IxFieldLabel>
+      <IxSelect id="my-select-1"></IxSelect>
+      <IxFieldLabel htmlFor="my-select-2">Example</IxFieldLabel>
+      <IxInput id="my-select-2"></IxInput>
+      <IxButton data-colspan="2">Submit</IxButton>
+    </IxLayoutAuto>
+  );
+};
+```
+### Example: form-layout-grid
+```tsx
+import {
+  IxButton,
+  IxCol,
+  IxFieldLabel,
+  IxInput,
+  IxLayoutGrid,
+  IxRow,
+  IxSelect,
+} from '@siemens/ix-react';
+import './form-layout-grid.scoped.css';
+export default () => {
+  return (
+    <IxLayoutGrid className="layout-grid-example">
+      <IxRow>
+        <IxCol size="2" size-sm="12">
+          <IxFieldLabel htmlFor="my-select-1">Example</IxFieldLabel>
+        </IxCol>
+        <IxCol>
+          <IxSelect id="my-select-1"></IxSelect>
+        </IxCol>
+      </IxRow>
+      <IxRow>
+        <IxCol size="2" size-sm="12">
+          <IxFieldLabel htmlFor="my-select-2">Example</IxFieldLabel>
+        </IxCol>
+        <IxCol>
+          <IxInput id="my-select-2"></IxInput>
+        </IxCol>
+      </IxRow>
+      <IxRow>
+        <IxCol size="12" size-sm="12">
+          <IxButton data-colspan="2">Submit</IxButton>
+        </IxCol>
+      </IxRow>
+    </IxLayoutGrid>
+  );
+};
+```
+### Example: input-disabled
+```tsx
+import { IxInput } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxInput
+      placeholder="Some placeholder"
+      value="Some example text"
+      disabled
+    ></IxInput>
+  );
+};
+```
+### Example: input-label
+```tsx
+import { IxInput } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxInput
+      label="Some label"
+      placeholder="Some placeholder"
+      value="Some example text"
+      helperText="Some helper text"
+    ></IxInput>
+  );
+};
+```
+### Example: input-pattern
+```tsx
+import { IxInput } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxInput
+      helperText="Only characters a-d are allowed"
+      allowedCharactersPattern="[a-d]"
+      maxLength={4}
+    ></IxInput>
+  );
+};
+```
+### Example: input-readonly
+```tsx
+import { IxInput } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxInput
+      readonly
+      label="Readonly"
+      placeholder="Placeholder text..."
+      value="Some text"
+    ></IxInput>
+  );
+};
+```
+### Example: input-types
+```tsx
+import './input-types.scoped.css';
+import { IxInput } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <div>
+        <IxInput type="text" label="Username" value="MaxMuster1"></IxInput>
+      </div>
+      <div>
+        <IxInput
+          type="email"
+          label="Email"
+          value="example@example.com"
+        ></IxInput>
+      </div>
+      <div>
+        <IxInput
+          type="password"
+          label="Password"
+          placeholder="Enter your password"
+          value="1234"
+        ></IxInput>
+      </div>
+      <div>
+        <IxInput
+          type="tel"
+          label="Telephone"
+          placeholder="Enter your phone number"
+          value="+49 123 456789"
+        ></IxInput>
+      </div>
+      <div>
+        <IxInput
+          type="url"
+          label="URL"
+          placeholder="Enter your URL"
+          value="https://ix.siemens.io"
+        ></IxInput>
+      </div>
+    </>
+  );
+};
+```
+### Example: input-validation
+```tsx
+import { IxInput } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <div>
+        <IxInput
+          label="Username"
+          placeholder="Enter your Username"
+          infoText="Info text"
+          className="ix-info"
+        ></IxInput>
+      </div>
+      <div>
+        <IxInput
+          label="Username"
+          placeholder="Enter your Username"
+          warningText="Warning text"
+          className="ix-warning"
+        ></IxInput>
+      </div>
+      <div>
+        <IxInput
+          label="Username"
+          placeholder="Enter your Username"
+          validText="Valid text"
+          className="ix-valid"
+        ></IxInput>
+      </div>
+      <div>
+        <IxInput
+          label="Username"
+          placeholder="Enter your Username"
+          invalidText="Invalid text"
+          className="ix-invalid"
+        ></IxInput>
+      </div>
+    </>
+  );
+};
+```
+### Example: input-with-slots
+```tsx
+import { IxIcon, IxInput, IxTypography } from '@siemens/ix-react';
+import { iconBulb } from '@siemens/ix-icons/icons';
+export default () => {
+  return (
+    <IxInput>
+      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
+      <IxTypography slot="end">unit</IxTypography>
+    </IxInput>
+  );
+};
+```
+### Example: input
+```tsx
+import { IxInput, IxButton, IxDateInput, IxTimeInput, IxNumberInput } from '@siemens/ix-react';
+export default () => {
+  const handleSubmit = (e: React.FormEvent, formType: string) => {
+    e.preventDefault();
+    console.log(`${formType} form submitted`);
+  };
+  return (
+    <div style={{ display: 'flex', gap: '2rem' }}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          console.log(e);
+        }}
+        id="login-form"
+      >
+        <IxInput type="email" name="email" id="email" />
+        <IxButton
+          form="login-form"
+          type="submit"
+          onClick={(evt) => console.log('Clicked Submit!')}
+        >
+          Login
+        </IxButton>
+      </form>
+      {}
+      <form
+        onSubmit={(e) => handleSubmit(e, 'IxInput')}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+          width: '250px',
+        }}
+      >
+        <h3>IxInput Form</h3>
+        <IxInput type="email" name="email" placeholder="Email" />
+        <IxInput type="password" name="password" placeholder="Password" />
+        <IxNumberInput name="age" placeholder="Age" />
+        <IxDateInput name="dob" placeholder="Date of Birth" />
+        <IxTimeInput name="appointment" placeholder="Appointment Time" />
+        <IxButton type="submit">Submit</IxButton>
+      </form>
+      {}
+      <form
+        onSubmit={(e) => handleSubmit(e, 'Native')}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+          width: '250px',
+        }}
+      >
+        <h3>Native Input Form</h3>
+        <input
+          type="email"
+          name="email"
+          placeholder="Email"
+          style={{
+            padding: '8px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          style={{
+            padding: '8px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+        <button
+          type="submit"
+          style={{
+            padding: '8px',
+            backgroundColor: '#007acc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+          }}
+        >
+          Submit
+        </button>
+        <input type="submit" value="Native Submit Input" />
+      </form>
+    </div>
+  );
+};
+```
+### Example: modal-form-ix-button-submit
+```tsx
+import {
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  Modal,
+  ModalRef,
+  showModal,
+  IxInput,
+} from '@siemens/ix-react';
+import { useRef } from 'react';
+function CustomModal() {
+  const modalRef = useRef<ModalRef>(null);
+  const close = () => {
+    modalRef.current?.close('close payload!');
+  };
+  const dismiss = () => {
+    modalRef.current?.dismiss('dismiss payload');
+  };
+  return (
+    <Modal ref={modalRef}>
+      <IxModalHeader onCloseClick={() => dismiss()}>
+        Create Resource
+      </IxModalHeader>
+      <IxModalContent>
+        <form
+          id="create-resource-form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            close();
+          }}
+        >
+          <IxInput label="Name" type="text" id="name" name="name"></IxInput>
+        </form>
+      </IxModalContent>
+      <IxModalFooter>
+        <IxButton variant="subtle-primary" onClick={() => dismiss()}>
+          Cancel
+        </IxButton>
+        <IxButton form="create-resource-form" type="submit">
+          Submit
+        </IxButton>
+      </IxModalFooter>
+    </Modal>
+  );
+}
+export default () => {
+  async function show() {
+    await showModal({
+      content: <CustomModal />,
+    });
+  }
+  return <IxButton onClick={show}>Show modal</IxButton>;
+};
+```
+## Vue Examples
+### Example: custom-field
+```tsx
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IxCustomField, IxInput, IxIconButton } from '@siemens/ix-vue';
+const input = ref();
+const openFileBrowser = () => {
+  input.value.click();
+};
+</script>
+<template>
+  <IxCustomField helper-text="Choose file">
+    <IxInput value="Enter text here" readonly></IxInput>
+    <IxIconButton icon="open-file" variant="subtle-primary" @click="openFileBrowser()"></IxIconButton>
+    <input
+      ref="input"
+      id="file-upload"
+      type="file"
+      style="display: none"
+      @input="(e: any) => console.log(e.target.files)"
+    />
+  </IxCustomField>
+</template>
+```
+### Example: form-layout-auto
+```tsx
+<script setup lang="ts">
+import {
+  IxButton,
+  IxFieldLabel,
+  IxInput,
+  IxLayoutAuto,
+  IxSelect,
+} from '@siemens/ix-vue';
+</script>
+<template>
+  <IxLayoutAuto>
+    <IxFieldLabel htmlFor="my-select-1">Example</IxFieldLabel>
+    <IxSelect id="my-select-1"></IxSelect>
+    <IxFieldLabel htmlFor="my-select-2">Example</IxFieldLabel>
+    <IxInput id="my-select-2"></IxInput>
+    <IxButton data-colspan="2">Submit</IxButton>
+  </IxLayoutAuto>
+</template>
+```
+### Example: form-layout-grid
+```tsx
+<script setup lang="ts">
+import {
+  IxButton,
+  IxCol,
+  IxFieldLabel,
+  IxInput,
+  IxLayoutGrid,
+  IxRow,
+  IxSelect,
+} from '@siemens/ix-vue';
+</script>
+<style scoped src="./form-layout-grid.css"></style>
+<template>
+  <IxLayoutGrid class="layout-grid-example">
+    <IxRow>
+      <IxCol size="2" size-sm="12">
+        <IxFieldLabel htmlFor="my-select-1">Example</IxFieldLabel>
+      </IxCol>
+      <IxCol>
+        <IxSelect id="my-select-1"></IxSelect>
+      </IxCol>
+    </IxRow>
+    <IxRow>
+      <IxCol size="2" size-sm="12">
+        <IxFieldLabel htmlFor="my-select-2">Example</IxFieldLabel>
+      </IxCol>
+      <IxCol>
+        <IxInput id="my-select-2"></IxInput>
+      </IxCol>
+    </IxRow>
+    <IxRow>
+      <IxCol size="12" size-sm="12">
+        <IxButton data-colspan="2">Submit</IxButton>
+      </IxCol>
+    </IxRow>
+  </IxLayoutGrid>
+</template>
+```
+### Example: input-disabled
+```tsx
+<script setup lang="ts">
+import { IxInput } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxInput
+    placeholder="Some placeholder"
+    value="Some example text"
+    disabled
+  ></IxInput>
+</template>
+```
+### Example: input-label
+```tsx
+<script setup lang="ts">
+import { IxInput } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxInput
+    label="Some label"
+    placeholder="Some placeholder"
+    value="Some example text"
+    helper-text="Some helper text"
+  ></IxInput>
+</template>
+```
+### Example: input-pattern
+```tsx
+<script setup lang="ts">
+import { IxInput } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxInput
+    helper-text="Only characters a-d are allowed"
+    allowed-characters-pattern="[a-d]"
+    :max-length="4"
+  ></IxInput>
+</template>
+```
+### Example: input-readonly
+```tsx
+<script setup lang="ts">
+import { IxInput } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxInput
+    readonly
+    label="Readonly"
+    placeholder="Placeholder text..."
+    value="Some text"
+  ></IxInput>
+</template>
+```
+### Example: input-types
+```tsx
+<script setup lang="ts">
+import { IxInput } from '@siemens/ix-vue';
+</script>
+<style scoped src="./input-types.css"></style>
+<template>
+  <div>
+    <IxInput type="text" label="Username" value="MaxMuster1"></IxInput>
+  </div>
+  <div>
+    <IxInput type="email" label="Email" value="example@example.com"></IxInput>
+  </div>
+  <div>
+    <IxInput
+      type="password"
+      label="Password"
+      placeholder="Enter your password"
+      value="1234"
+    ></IxInput>
+  </div>
+  <div>
+    <IxInput type="tel" label="Telephone" value="+49 123 456 789"></IxInput>
+  </div>
+  <div>
+    <IxInput
+      type="url"
+      label="URL"
+      placeholder="Enter your URL"
+      value="http://ix.siemens.io"
+    ></IxInput>
+  </div>
+</template>
+```
+### Example: input-validation
+```tsx
+<script setup lang="ts">
+import { IxInput } from '@siemens/ix-vue';
+</script>
+<template>
+  <div>
+    <IxInput
+      label="Username"
+      placeholder="Enter your Username"
+      info-text="Info text"
+      class="ix-info"
+    ></IxInput>
+  </div>
+  <div>
+    <IxInput
+      label="Username"
+      placeholder="Enter your Username"
+      warning-text="Warning text"
+      class="ix-warning"
+    ></IxInput>
+  </div>
+  <div>
+    <IxInput
+      label="Username"
+      placeholder="Enter your Username"
+      valid-text="Valid text"
+      class="ix-valid"
+    ></IxInput>
+  </div>
+  <div>
+    <IxInput
+      label="Username"
+      placeholder="Enter your Username"
+      invalid-text="Invalid text"
+      class="ix-invalid"
+    ></IxInput>
+  </div>
+</template>
+```
+### Example: input-with-slots
+```tsx
+<script setup lang="ts">
+import { iconBulb } from '@siemens/ix-icons/icons';
+import { IxInput, IxIcon, IxTypography } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxInput>
+    <IxIcon :name="iconBulb" slot="start" size="16"></IxIcon>
+    <IxTypography slot="end">unit</IxTypography>
+  </IxInput>
+</template>
+```
+### Example: input
+```tsx
+<script setup lang="ts">
+import { IxInput } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxInput placeholder="Enter your Username"></IxInput>
+</template>
+```
+### Example: modal-form-ix-button-submit
+```tsx
+<script setup lang="ts">
+import {
+  HTMLRefElement,
+  IxButton,
+  IxModalHeader,
+  IxModalContent,
+  IxModalFooter,
+  IxInput,
+} from '@siemens/ix-vue';
+import { ref } from 'vue';
+const modalRef = ref<HTMLRefElement<HTMLIxModalElement>>();
+const show = ref(false);
+const close = () => {
+  modalRef.value?.$el.closeModal('close payload!');
+  show.value = false;
+};
+const dismiss = () => {
+  modalRef.value?.$el.dismissModal('dismiss payload');
+  show.value = false;
+};
+const submitForm = (event: Event) => {
+  event.preventDefault();
+  close();
+};
+</script>
+<template>
+  <IxButton @click="show = true">Show modal</IxButton>
+  <IxDialog ref="modalRef" v-if="show">
+    <IxModalHeader @closeClick="dismiss">Create Resource</IxModalHeader>
+    <IxModalContent>
+      <form id="create-resource-form" @submit="submitForm">
+        <IxInput label="Name" type="text" id="name" name="name"></IxInput>
+      </form>
+    </IxModalContent>
+    <IxModalFooter>
+      <IxButton variant="subtle-primary" @click="dismiss">Cancel</IxButton>
+      <IxButton form="create-resource-form" type="submit">Submit</IxButton>
+    </IxModalFooter>
+  </IxDialog>
+</template>
+```
+## Angular Examples
+### Example: custom-field
+#### Component typescript
+```typescript
+import { Component, ElementRef, ViewChild } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './custom-field.html',
+})
+export default class CustomField {
+  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLElement>;
+  openFileBrowser() {
+    this.fileUpload.nativeElement.click();
+    this.fileUpload.nativeElement.oninput = (event: any) => {
+      console.log(event.target.files);
+    };
+  }
+}
+```
+#### Component template
+```html
+<!--
+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-custom-field helper-text="Choose file">
+  <ix-input value="No file chosen" readonly></ix-input>
+  <ix-icon-button icon="open-file" variant="subtle-primary" (click)="openFileBrowser()"></ix-icon-button>
+  <input #fileUpload type="file" style="display: none" />
+</ix-custom-field>
+```
+### Example: form-layout-auto
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './form-layout-auto.html',
+})
+export default class FormLayoutAuto {}
+```
+#### Component template
+```html
+<ix-layout-auto>
+  <ix-field-label for="my-select-1">Example</ix-field-label>
+  <ix-select id="my-select-1"></ix-select>
+  <ix-field-label for="my-select-2">Example</ix-field-label>
+  <ix-input id="my-select-2"></ix-input>
+  <ix-button data-colspan="2">Submit</ix-button>
+</ix-layout-auto>
+```
+### Example: form-layout-grid
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './form-layout-grid.html',
+  styleUrls: ['./form-layout-grid.css'],
+})
+export default class FormLayoutGrid {}
+```
+#### Component template
+```html
+<ix-layout-grid class="layout-grid-example">
+  <ix-row>
+    <ix-col size="2" size-sm="12">
+      <ix-field-label for="my-select-1">Example</ix-field-label>
+    </ix-col>
+    <ix-col>
+      <ix-select id="my-select-1"></ix-select>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2" size-sm="12">
+      <ix-field-label for="my-select-2">Example</ix-field-label>
+    </ix-col>
+    <ix-col>
+      <ix-input id="my-select-2"></ix-input>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="12" size-sm="12">
+      <ix-button data-colspan="2">Submit</ix-button>
+    </ix-col>
+  </ix-row>
+</ix-layout-grid>
+```
+### Example: input-disabled
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './input-disabled.html',
+})
+export default class InputDisabled {}
+```
+#### Component template
+```html
+<!--
+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
+  placeholder='Some placeholder'
+  value='Some example text'
+  disabled
+></ix-input>
+```
+### Example: input-label
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './input-label.html',
+})
+export default class InputLabel {}
+```
+#### Component template
+```html
+<!--
+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
+  label='Some label'
+  placeholder='Some placeholder'
+  value='Some example text'
+  helper-text='Some helper text'
+></ix-input>
+```
+### Example: input-pattern
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './input-pattern.html',
+})
+export default class InputPattern {}
+```
+#### Component template
+```html
+<!--
+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
+  helper-text='Only characters a-d are allowed'
+  allowed-characters-pattern='[a-d]'
+  maxLength='4'
+></ix-input>
+```
+### Example: input-readonly
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './input-readonly.html',
+})
+export default class InputReadonly {}
+```
+#### Component template
+```html
+<!--
+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
+  placeholder='Some placeholder'
+  value='Some example text'
+  readonly
+></ix-input>
+```
+### Example: input-types
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './input-types.html',
+  styleUrls: ['./input-types.css'],
+})
+export default class InputTypes {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<div>
+  <ix-input
+    type='text'
+    label='Username'
+    value='MaxMuster1'
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    type='email'
+    label='Email'
+    value='example@example.com'
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    type='password'
+    label='Password'
+    placeholder='Enter your password'
+    value='1234'
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    type='tel'
+    label='Telephone'
+    value='+49 123 456789'
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    type='url'
+    label='URL'
+    placeholder='Enter your URL'
+    value='https://ix.siemens.io'
+  ></ix-input>
+</div>
+```
+### Example: input-validation
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './input-validation.html',
+})
+export default class InputValidation {}
+```
+#### Component template
+```html
+<div>
+  <ix-input
+    label='Username'
+    placeholder='Enter your Username'
+    info-text='Info text'
+    class='ix-info'
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    label='Username'
+    placeholder='Enter your Username'
+    warning-text='Warning text'
+    class='ix-warning'
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    label='Username'
+    placeholder='Enter your Username'
+    valid-text='Valid text'
+    class='ix-valid'
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    label='Username'
+    placeholder='Enter your Username'
+    invalid-text='Invalid text'
+    class='ix-invalid'
+  ></ix-input>
+</div>
+```
+### Example: input-with-slots
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './input-with-slots.html',
+})
+export default class InputWithSlots {}
+```
+#### Component template
+```html
+<!--
+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>
+```
+### Example: input
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './input.html',
+})
+export default class Input {}
+```
+#### Component template
+```html
+<!--
+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
+  placeholder='Enter your Username'
+></ix-input>
+```
+### Example: modal-form-ix-button-submit
+#### Component typescript
+```typescript
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ModalService } from '@siemens/ix-angular';
+import { NgForm } from '@angular/forms';
+@Component({
+  standalone: false,
+  selector: 'app-modal-form-ix-button-submit',
+  templateUrl: './modal-form-ix-button-submit.html',
+})
+export default class ModalFormIxButtonSubmit {
+  @ViewChild('customModal', { read: TemplateRef })
+  customModalRef!: TemplateRef<any>;
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    await this.modalService.open({
+      content: this.customModalRef,
+      data: 'Some data',
+    });
+  }
+  onSubmit(form: NgForm): void {
+    if (form.valid) {
+      return;
+    }
+    form.control.markAllAsTouched();
+  }
+}
+```
+#### Component template
+```html
+<ix-button
+  (click)="openModal()"
+  (keydown.enter)="openModal()"
+  (keydown.space)="openModal()"
+>
+  Show modal
+</ix-button>
+<ng-template #customModal let-modal>
+  <ix-modal>
+    <ix-modal-header> Create Resource </ix-modal-header>
+    <ix-modal-content>
+      <form
+        id="create-resource-form"
+        #formRef="ngForm"
+        (ngSubmit)="onSubmit(formRef)"
+      >
+        <ix-input label="Name:" type="text" name="name" ngModel></ix-input>
+      </form>
+    </ix-modal-content>
+    <ix-modal-footer>
+      <ix-button variant="subtle-primary" (click)="modal.dismiss('dismiss')" (keydown.enter)="modal.dismiss('dismiss')" (keydown.space)="modal.dismiss('dismiss')">
+        Cancel
+      </ix-button>
+      <ix-button form="create-resource-form" type="submit"> Submit </ix-button>
+    </ix-modal-footer>
+  </ix-modal>
+</ng-template>
+```
+## Angular Standalone Examples
+### Example: custom-field
+#### Component typescript
+```typescript
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import {
+  IxCustomField,
+  IxInput,
+  IxIconButton,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxCustomField, IxInput, IxIconButton, IxTextValueAccessorDirective],
+  templateUrl: './custom-field.html',
+})
+export default class CustomField {
+  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLElement>;
+  openFileBrowser() {
+    this.fileUpload.nativeElement.click();
+    this.fileUpload.nativeElement.oninput = (event: any) => {
+      console.log(event.target.files);
+    };
+  }
+}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-custom-field helper-text="Choose file">
+  <ix-input value="No file chosen" readonly></ix-input>
+  <ix-icon-button icon="open-file" variant="subtle-primary" (click)="openFileBrowser()"></ix-icon-button>
+  <input #fileUpload type="file" style="display: none" />
+</ix-custom-field>
+```
+### Example: form-layout-auto
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxLayoutAuto,
+  IxFieldLabel,
+  IxSelect,
+  IxInput,
+  IxButton,
+  IxSelectValueAccessorDirective,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxLayoutAuto,
+    IxFieldLabel,
+    IxSelect,
+    IxInput,
+    IxButton,
+    IxSelectValueAccessorDirective,
+    IxTextValueAccessorDirective,
+  ],
+  templateUrl: './form-layout-auto.html',
+})
+export default class FormLayoutAuto {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-layout-auto>
+  <ix-field-label for="my-select-1">Example</ix-field-label>
+  <ix-select id="my-select-1"></ix-select>
+  <ix-field-label for="my-select-2">Example</ix-field-label>
+  <ix-input id="my-select-2"></ix-input>
+  <ix-button data-colspan="2">Submit</ix-button>
+</ix-layout-auto>
+```
+### Example: form-layout-grid
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxLayoutGrid,
+  IxRow,
+  IxCol,
+  IxFieldLabel,
+  IxSelect,
+  IxInput,
+  IxButton,
+  IxSelectValueAccessorDirective,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxLayoutGrid,
+    IxRow,
+    IxCol,
+    IxFieldLabel,
+    IxSelect,
+    IxInput,
+    IxButton,
+    IxSelectValueAccessorDirective,
+    IxTextValueAccessorDirective,
+  ],
+  templateUrl: './form-layout-grid.html',
+  styleUrls: ['./form-layout-grid.css'],
+})
+export default class FormLayoutGrid {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-layout-grid class="layout-grid-example">
+  <ix-row>
+    <ix-col size="2" size-sm="12">
+      <ix-field-label for="my-select-1">Example</ix-field-label>
+    </ix-col>
+    <ix-col>
+      <ix-select id="my-select-1"></ix-select>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2" size-sm="12">
+      <ix-field-label for="my-select-2">Example</ix-field-label>
+    </ix-col>
+    <ix-col>
+      <ix-input id="my-select-2"></ix-input>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="12" size-sm="12">
+      <ix-button data-colspan="2">Submit</ix-button>
+    </ix-col>
+  </ix-row>
+</ix-layout-grid>
+```
+### Example: input-disabled
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxInput,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxInput, IxTextValueAccessorDirective],
+  templateUrl: './input-disabled.html',
+})
+export default class InputDisabled {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-input
+  placeholder="Some placeholder"
+  value="Some example text"
+  disabled
+></ix-input>
+```
+### Example: input-label
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxInput,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxInput, IxTextValueAccessorDirective],
+  templateUrl: './input-label.html',
+})
+export default class InputLabel {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-input
+  label="Some label"
+  placeholder="Some placeholder"
+  value="Some example text"
+  helper-text="Some helper text"
+></ix-input>
+```
+### Example: input-pattern
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxInput,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxInput, IxTextValueAccessorDirective],
+  templateUrl: './input-pattern.html',
+})
+export default class InputPattern {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-input
+  helper-text="Only characters a-d are allowed"
+  allowed-characters-pattern="[a-d]"
+  maxLength="4"
+></ix-input>
+```
+### Example: input-readonly
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxInput,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxInput, IxTextValueAccessorDirective],
+  templateUrl: './input-readonly.html',
+})
+export default class InputReadonly {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-input
+  placeholder="Some placeholder"
+  value="Some example text"
+  readonly
+></ix-input>
+```
+### Example: input-types
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxInput,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxInput, IxTextValueAccessorDirective],
+  templateUrl: './input-types.html',
+  styleUrls: ['./input-types.css'],
+})
+export default class InputTypes {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<div>
+  <ix-input type="text" label="Username" value="MaxMuster1"></ix-input>
+</div>
+<div>
+  <ix-input type="email" label="Email" value="example@example.com"></ix-input>
+</div>
+<div>
+  <ix-input
+    type="password"
+    label="Password"
+    placeholder="Enter your password"
+    value="1234"
+  ></ix-input>
+</div>
+<div>
+  <ix-input type="tel" label="Telephone" value="+49 123 456789"></ix-input>
+</div>
+<div>
+  <ix-input
+    type="url"
+    label="URL"
+    placeholder="Enter your URL"
+    value="https://ix.siemens.io"
+  ></ix-input>
+</div>
+```
+### Example: input-validation
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxInput,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxInput, IxTextValueAccessorDirective],
+  templateUrl: './input-validation.html',
+})
+export default class InputValidation {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<div>
+  <ix-input
+    label="Username"
+    placeholder="Enter your Username"
+    info-text="Info text"
+    class="ix-info"
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    label="Username"
+    placeholder="Enter your Username"
+    warning-text="Warning text"
+    class="ix-warning"
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    label="Username"
+    placeholder="Enter your Username"
+    valid-text="Valid text"
+    class="ix-valid"
+  ></ix-input>
+</div>
+<div>
+  <ix-input
+    label="Username"
+    placeholder="Enter your Username"
+    invalid-text="Invalid text"
+    class="ix-invalid"
+  ></ix-input>
+</div>
+```
+### Example: input-with-slots
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxInput,
+  IxIcon,
+  IxTypography,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxInput, IxIcon, IxTypography, IxTextValueAccessorDirective],
+  templateUrl: './input-with-slots.html',
+})
+export default class InputWithSlots {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-input>
+  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
+  <ix-typography slot="end">unit</ix-typography>
+</ix-input>
+```
+### Example: input
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxInput,
+  IxTextValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxInput, IxTextValueAccessorDirective],
+  templateUrl: './input.html',
+})
+export default class Input {}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-input placeholder="Enter your Username"></ix-input>
+```
+### Example: modal-form-ix-button-submit
+#### Component typescript
+```typescript
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import {
+  IxButton,
+  IxModal,
+  IxModalHeader,
+  IxModalContent,
+  IxModalFooter,
+  IxInput,
+  ModalService,
+} from '@siemens/ix-angular/standalone';
+import { FormsModule, NgForm } from '@angular/forms';
+@Component({
+  selector: 'app-modal-form-ix-button-submit',
+  templateUrl: './modal-form-ix-button-submit.html',
+  imports: [
+    FormsModule,
+    IxButton,
+    IxModal,
+    IxModalHeader,
+    IxModalContent,
+    IxModalFooter,
+    IxInput,
+  ],
+})
+export default class ModalFormIxButtonSubmit {
+  @ViewChild('customModal', { read: TemplateRef })
+  customModalRef!: TemplateRef<any>;
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    await this.modalService.open({
+      content: this.customModalRef,
+      data: 'Some data',
+    });
+  }
+  onSubmit(form: NgForm): void {
+    if (form.valid) {
+      return;
+    }
+    form.control.markAllAsTouched();
+  }
+}
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-button (click)="openModal()"> Show modal </ix-button>
+<ng-template #customModal let-modal>
+  <ix-modal>
+    <ix-modal-header> Create Resource </ix-modal-header>
+    <ix-modal-content>
+      <form
+        id="create-resource-form"
+        #formRef="ngForm"
+        (ngSubmit)="onSubmit(formRef)"
+      >
+        <ix-input label="Name:" type="text" name="name" ngModel></ix-input>
+      </form>
+    </ix-modal-content>
+    <ix-modal-footer>
+      <ix-button variant="subtle-primary" (click)="modal.dismiss('dismiss')"> Cancel </ix-button>
+      <ix-button form="create-resource-form" type="submit"> Submit </ix-button>
+    </ix-modal-footer>
+  </ix-modal>
+</ng-template>
+```
 ## Properties