diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts
index 31c7721e06..d6491f673a 100644
--- a/textfield/filled-text-field.ts
+++ b/textfield/filled-text-field.ts
@@ -47,6 +47,7 @@ export class MdFilledTextField extends FilledTextField {
${this.renderLeadingIcon()}
${this.renderFieldContent()}
${this.renderTrailingIcon()}
+ ${this.renderSupportingText()}
`;
}
diff --git a/textfield/lib/_filled-text-field-theme.scss b/textfield/lib/_filled-text-field-theme.scss
index f3fb875e9b..b2f863f2db 100644
--- a/textfield/lib/_filled-text-field-theme.scss
+++ b/textfield/lib/_filled-text-field-theme.scss
@@ -56,6 +56,11 @@ $forced-colors-theme: (
map.get($resolvers, typography),
label-text
);
+ $theme: typography.resolve-theme(
+ $theme,
+ map.get($resolvers, typography),
+ supporting-text
+ );
@return $theme;
}
diff --git a/textfield/lib/_outlined-text-field-theme.scss b/textfield/lib/_outlined-text-field-theme.scss
index cd1ad859b2..4a3ac51f70 100644
--- a/textfield/lib/_outlined-text-field-theme.scss
+++ b/textfield/lib/_outlined-text-field-theme.scss
@@ -55,6 +55,11 @@ $forced-colors-theme: (
map.get($resolvers, typography),
label-text
);
+ $theme: typography.resolve-theme(
+ $theme,
+ map.get($resolvers, typography),
+ supporting-text
+ );
@return $theme;
}
diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
index 148754da10..ed8a00c75d 100644
--- a/textfield/lib/text-field.ts
+++ b/textfield/lib/text-field.ts
@@ -73,6 +73,15 @@ export class TextField extends LitElement {
* Whether or not the text field has a trailing icon. Used for SSR.
*/
@property({type: Boolean}) hasTrailingIcon = false;
+ /**
+ * Conveys additional information below the text field, such as how it should
+ * be used.
+ */
+ @property({type: String}) supportingText = '';
+ /**
+ * The ID on the supporting text element, used for SSR.
+ */
+ @property({type: String}) supportingTextId = 'support';
// ARIA
// TODO(b/210730484): replace with @soyParam annotation
@@ -206,6 +215,8 @@ export class TextField extends LitElement {
// TODO(b/237281840): replace ternary operators with double pipes
// TODO(b/237283903): remove when custom isTruthy directive is supported
const placeholderValue = this.placeholder ? this.placeholder : undefined;
+ const ariaDescribedByValue =
+ this.supportingText ? this.supportingTextId : undefined;
const ariaLabelValue = this.ariaLabel ? this.ariaLabel :
this.label ? this.label :
undefined;
@@ -214,6 +225,7 @@ export class TextField extends LitElement {
return html`${
+ this.supportingText}` :
+ html``;
+ }
+
protected override willUpdate(changedProperties: PropertyValues) {
if (!changedProperties.has('value') && !this.dirty) {
// Do this here instead of in a setter so that the order of setting both
diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts
index c81d0715ba..04acd49acb 100644
--- a/textfield/outlined-text-field.ts
+++ b/textfield/outlined-text-field.ts
@@ -47,6 +47,7 @@ export class MdOutlinedTextField extends OutlinedTextField {
${this.renderLeadingIcon()}
${this.renderFieldContent()}
${this.renderTrailingIcon()}
+ ${this.renderSupportingText()}
`;
}