diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 30ff73350b..6b80ddb839 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -471,3 +471,12 @@
--border-color: #{$item-md-input-fill-border-color-hover};
}
}
+
+// Material Design Text Field Character Counter
+// --------------------------------------------------
+
+.item-counter {
+ color: #{$item-md-input-counter-color};
+
+ letter-spacing: #{$item-md-input-counter-letter-spacing};
+}
diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss
index f6f3c7696d..db02d36091 100644
--- a/core/src/components/item/item.md.vars.scss
+++ b/core/src/components/item/item.md.vars.scss
@@ -78,6 +78,11 @@ $item-md-input-fill-border-color: $background-color-step-500 !default;
/// @prop - Color of the item border when `fill` is set and hovered
$item-md-input-fill-border-color-hover: $background-color-step-750 !default;
+/// @prop - Color of the item input counter
+$item-md-input-counter-color: rgba(0, 0, 0, .6) !default;
+
+/// @prop - Letter spacing of the item input counter
+$item-md-input-counter-letter-spacing: .0333333333em !default;
// Item Label
// --------------------------------------------------
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 4bdd3d109a..315879bea1 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -533,6 +533,16 @@ ion-ripple-effect {
z-index: 1;
}
+// Item Max Length Counter
+// --------------------------------------------------
+
+.item-counter {
+ @include margin-horizontal(auto, null);
+
+ padding-inline-start: 16px;
+
+ white-space: nowrap;
+}
// Item: Reduced Motion
// --------------------------------------------------
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 28e423be17..f4643e2d30 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -297,7 +297,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
private updateCounterOutput(inputEl: HTMLIonInputElement | HTMLIonTextareaElement) {
if (this.counter && !this.multipleInputs && inputEl?.maxlength !== undefined) {
const length = inputEl?.value?.toString().length ?? '0';
- this.counterString = `${length}/${inputEl.maxlength}`;
+ this.counterString = `${length} / ${inputEl.maxlength}`;
}
}
diff --git a/core/src/components/item/test/counter/e2e.ts b/core/src/components/item/test/counter/e2e.ts
new file mode 100644
index 0000000000..cfbaf1bc20
--- /dev/null
+++ b/core/src/components/item/test/counter/e2e.ts
@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('item: counter', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/item/test/counter?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
+
+test('item: counter-rtl', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/item/test/counter?ionic:_testing=true&rtl=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/item/test/counter/index.html b/core/src/components/item/test/counter/index.html
new file mode 100644
index 0000000000..841578862b
--- /dev/null
+++ b/core/src/components/item/test/counter/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+ Item - Counter
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item counter
+
+
+
+
+
+
+
+ Counter
+
+
+
+
+ Counter with value
+
+
+
+
+
+
+
+