diff --git a/package-lock.json b/package-lock.json
index 9d36c14c2a..f1446a967f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3257,9 +3257,9 @@
       "integrity": "sha512-hLieRtncKvRRs5bM8alnQ5F8UX5uTQnl37LNf1r2ToH+41MQojhaDl08B3a3884tXvB6L/+7V97ijt2CBp9L3g=="
     },
     "node_modules/@db-ui/core": {
-      "version": "2.18.2",
-      "resolved": "https://registry.npmjs.org/@db-ui/core/-/core-2.18.2.tgz",
-      "integrity": "sha512-eiFjpe77kR7R3zPOXBoKktZo+jp4nIb/AsMp8n8gZPYNILvD45B9T9UwsTcdYLUahumzkz7MMTJ/EQjC6AYRWQ==",
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@db-ui/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-NPdyXX0MmHorjRndUO5Lyyh7SKYd3hPK7oTsobxlFV1oqzagOrYvNp1XGl4QSHGqH/ax4xLQn5HsMUFyEfRtMQ==",
       "dependencies": {
         "@csstools/normalize.css": "^12.1.1",
         "@db-ui/base": "^0.27.1"
@@ -32659,7 +32659,7 @@
       "version": "0.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@db-ui/core": "^2.18.2"
+        "@db-ui/core": "^2.19.2"
       },
       "devDependencies": {
         "@faker-js/faker": "^8.4.1",
diff --git a/packages/db-ui-elements-stencil/package.json b/packages/db-ui-elements-stencil/package.json
index c9ddfb3816..3cbce85f7a 100644
--- a/packages/db-ui-elements-stencil/package.json
+++ b/packages/db-ui-elements-stencil/package.json
@@ -45,7 +45,7 @@
     "puppeteer": "^22.6.2"
   },
   "dependencies": {
-    "@db-ui/core": "^2.18.2"
+    "@db-ui/core": "^2.19.2"
   },
   "license": "Apache-2.0",
   "publishConfig": {
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx b/packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx
index 4652423463..4fe4797abf 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx
@@ -33,7 +33,7 @@ describe('db-input', () => {
     expect(page.root).toEqualHtml(`
       <db-input ariainvalid="_ariainvalid_" ariarequired="true" autocomplete="on" autofocus dirname="_dirname_" disabled input_id="_input_id_" label="_label_" list="_list_" maxlength="2" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" type='text' value="_value_" variant='semitransparent'>
         <input aria-invalid="_ariainvalid_" aria-required="true" type="text" class="elm-input" id="_input_id_" autocomplete="on" autofocus data-dirname="_dirname_" disabled list="_list_" maxlength="2" minlength="5" name="_name_" pattern="_pattern_" placeholder="_placeholder_" readonly required size="2" value="_value_" aria-labelledby="_input_id_-label" data-variant='semitransparent' />
-        <label class="elm-label" htmlFor="_input_id_" aria-hidden="true" id="_input_id_-label">_label_</label>
+        <label class="elm-label" htmlFor="_input_id_" aria-hidden="true" id="_input_id_-label">_label_</label><output htmlfor="_input_id_" id="_input_id_-result">0 / 2</output>
         <datalist id="_list_">
           <option>_option1_</option>
           <option>_option2_</option>
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/db-input.scss b/packages/db-ui-elements-stencil/src/components/db-input/db-input.scss
index c843c7bbd3..d05d3e891f 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/db-input.scss
+++ b/packages/db-ui-elements-stencil/src/components/db-input/db-input.scss
@@ -5,3 +5,17 @@
   // Overwriting the referenced SVG icon as this is going to get inlined and the path would be relative to the pages URL instead of the CSS, which would break
   --db-ic-search-24: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAV9JREFUSEu1le0xBEEURc9GgAjIABkQATIgAyEIQQaIABkQARlYESAC6qjXVV1T3f22dme7an5Nzzv3vq9ZsOWz2HJ8RoBL4Aw4AXaBb+AFeAIeVhXWAhwAj8DRIMg7cAEsM9AUYPC3UPwDXAMG89HFOXAD7Iej03jX5UwBBjoEXiOYaZkeQfeRPu8fj1zUAHN+B6hcJ63gJZYQg+vkKoBNTg2weBZ1+EEVpQh6DrcpQMU7YVl12dHFV1zqdmP94je73CCm39SA4mAvyX/h2MZ23GfULE3RujWw4xzGFFCK5vDYelkXfcRsrNxFKihz4EpwUntz4KSreqjegK1JFmI36cSptQ0FmXOH8DaUF0FOc9dtbxdZD4P1jsptU+8oqAvJtqm7x+Hz2C26ck34CDCVQ8im/4MUsilAZ0PIHIAhZC7AFGJtLPzwl5ktu9b7ki7b9n+653SQrop1FKff/AH2BVIZMfA02AAAAABJRU5ErkJggg==');
 }
+
+.elm-input:is(
+    [type='email'],
+    [type='password'],
+    [type='search'],
+    [type='tel'],
+    [type='text'],
+    [type='url']
+  )
+  + label
+  + output:not(:has(+ .description)) {
+  float: right;
+  position: initial;
+}
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
index 175685482f..34d4d72014 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx
@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { Component, Event, h, Host, Prop, State } from '@stencil/core';
 import { uuid } from '../../utils/utils';
 
 @Component({
@@ -7,6 +7,8 @@ import { uuid } from '../../utils/utils';
   scoped: true
 })
 export class DbInput {
+  @State() valueSize = 0;
+
   /**
    * The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.
    */
@@ -178,6 +180,9 @@ export class DbInput {
           aria-labelledby={this.input_id + '-label'}
           data-variant={this.variant}
           onChange={(event) => this.handleChange(event)}
+          onInput={(event) => {
+            this.valueSize = event.target.value.length;
+          }}
         />
 
         <label
@@ -189,6 +194,11 @@ export class DbInput {
         >
           {this.label}
         </label>
+        {this.maxlength && (
+          <output htmlFor={this.input_id} id={`${this.input_id}-result`}>
+            {`${this.valueSize} / ${this.maxlength}`}
+          </output>
+        )}
         {this.description && (
           <p id={this.input_id + '-hint'} class="description">
             {this.description}
diff --git a/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx
index 513a93cb62..0c3580e6c0 100644
--- a/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-input/stories/db-input.intro.stories.mdx
@@ -117,4 +117,12 @@ You could set the attribute `label-hidden="true"` for the rare case that you wou
   <db-input label="Semitransparent" label-hidden="true"></db-input>
 </Canvas>
 
+<db-headline variant="2">maxlength with counter</db-headline>
+
+On providing the maxlength attribute, a counter will be shown below the input field.
+
+<Canvas>
+  <db-input label="maxlength example" maxlength="100"></db-input>
+</Canvas>
+
 <Markdown>{Readme}</Markdown>
diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.scss b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.scss
index 40357a8753..ff14878092 100644
--- a/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.scss
+++ b/packages/db-ui-elements-stencil/src/components/db-textarea/db-textarea.scss
@@ -1,2 +1,7 @@
 @import '../general';
 @import 'textarea';
+
+.elm-textarea + output:not(:has(+ .description)) {
+  float: right;
+  position: initial;
+}