diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
index 0df98a3717..6770ab4382 100644
--- a/textfield/lib/text-field.ts
+++ b/textfield/lib/text-field.ts
@@ -120,6 +120,20 @@ export abstract class TextField extends LitElement {
}
// properties
+ /**
+ * The maximum number of characters a user can enter into the text field. Set
+ * to -1 for none.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+ */
+ @property({type: Number}) maxLength = -1;
+ /**
+ * The minimum number of characters a user can enter into the text field. Set
+ * to -1 for none.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+ */
+ @property({type: Number}) minLength = -1;
@property({type: String, reflect: true, converter: stringConverter})
placeholder = '';
@property({type: Boolean, reflect: true}) readonly = false;
@@ -422,6 +436,8 @@ export abstract class TextField extends LitElement {
this.getSupportingText() ? this.supportingTextId : undefined;
const ariaLabelValue = this.ariaLabel || this.label || undefined;
const ariaLabelledByValue = this.ariaLabelledBy || undefined;
+ const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined;
+ const minLengthValue = this.minLength > -1 ? this.minLength : undefined;
return html` {
expect(input.setCustomValidity).toHaveBeenCalledWith(errorMessage);
});
});
+
+ describe('minLength and maxLength', () => {
+ it('should set attribute on input', async () => {
+ const {testElement, input} = await setupTest();
+ testElement.minLength = 2;
+ testElement.maxLength = 5;
+ await env.waitForStability();
+
+ expect(input.getAttribute('minLength'))
+ .withContext('minLength')
+ .toEqual('2');
+ expect(input.getAttribute('maxLength'))
+ .withContext('maxLength')
+ .toEqual('5');
+ });
+
+ it('should not set attribute if value is -1', async () => {
+ const {testElement, input} = await setupTest();
+ testElement.minLength = 2;
+ testElement.maxLength = 5;
+ await env.waitForStability();
+
+ expect(input.hasAttribute('minlength'))
+ .withContext('should have minlength')
+ .toBeTrue();
+ expect(input.hasAttribute('maxlength'))
+ .withContext('should have maxlength')
+ .toBeTrue();
+
+ testElement.minLength = -1;
+ testElement.maxLength = -1;
+ await env.waitForStability();
+
+ expect(input.hasAttribute('minlength'))
+ .withContext('should not have minlength')
+ .toBeFalse();
+ expect(input.hasAttribute('maxlength'))
+ .withContext('should not have maxlength')
+ .toBeFalse();
+ });
+ });
});
// TODO(b/235238545): Add shared FormController tests.