diff --git a/src/input/text-area.directive.ts b/src/input/text-area.directive.ts
index 06b473cabb..aa1e3fa04e 100644
--- a/src/input/text-area.directive.ts
+++ b/src/input/text-area.directive.ts
@@ -1,4 +1,9 @@
-import { Directive, HostBinding, Input } from "@angular/core";
+import {
+	Directive,
+	ElementRef,
+	HostBinding,
+	Input
+} from "@angular/core";
 
 /**
  * A directive for applying styling to a textarea element.
@@ -28,7 +33,14 @@ export class TextArea {
 		return this.theme === "light";
 	}
 
+	/**
+	 * Binding maxlength to textarea
+	 */
+	@Input() @HostBinding("attr.maxlength") maxlength: number;
+
 	@HostBinding("attr.data-invalid") get getInvalidAttr() {
 		return this.invalid ? true : undefined;
 	}
+
+	constructor(public elementRef: ElementRef<HTMLTextAreaElement>) {}
 }
diff --git a/src/input/textarea-label.component.ts b/src/input/textarea-label.component.ts
index 3221fe07c3..791da13aab 100644
--- a/src/input/textarea-label.component.ts
+++ b/src/input/textarea-label.component.ts
@@ -49,6 +49,11 @@ import { TextArea } from "./text-area.directive";
 						<ng-content></ng-content>
 					</ng-template>
 				</label>
+				<div
+					*ngIf="enableCounter && textArea?.maxlength > 0 && textArea.elementRef"
+					class="cds--label">
+					{{characterCounter}} / {{textArea.maxlength}}
+				</div>
 			</div>
 			<div
 				class="cds--text-area__wrapper"
@@ -56,7 +61,8 @@ import { TextArea } from "./text-area.directive";
 					'cds--text-area__wrapper--warn': warn
 				}"
 				[attr.data-invalid]="(invalid ? true : null)"
-				#wrapper>
+				#wrapper
+				(keyup)="keyDownEvent($event)">
 				<svg
 					*ngIf="!fluid && invalid"
 					cdsIcon="warning--filled"
@@ -166,17 +172,20 @@ export class TextareaLabelComponent implements AfterViewInit {
 	 * Set the arialabel for label
 	 */
 	@Input() ariaLabel: string;
-
+	/**
+	 * Enable textarea character counter
+	 */
+	@Input() enableCounter = false;
 	/**
 	 * Experimental: enable fluid state
 	 */
 	@Input() fluid = false;
+	characterCounter = 0;
 
 	// @ts-ignore
 	@ViewChild("wrapper", { static: false }) wrapper: ElementRef<HTMLDivElement>;
 
-	// @ts-ignore
-	@ContentChild(TextArea, { static: false }) textArea: TextArea;
+	@ContentChild(TextArea) textArea: TextArea;
 
 	@HostBinding("class.cds--form-item") labelClass = true;
 
@@ -211,6 +220,7 @@ export class TextareaLabelComponent implements AfterViewInit {
 					this.changeDetectorRef.detectChanges();
 				}
 				inputElement.setAttribute("id", this.labelInputID);
+				this.characterCounter = this.textArea.elementRef?.nativeElement?.value?.length;
 				return;
 			}
 
@@ -228,4 +238,8 @@ export class TextareaLabelComponent implements AfterViewInit {
 	public isTemplate(value) {
 		return value instanceof TemplateRef;
 	}
+
+	keyDownEvent(event) {
+		this.characterCounter = event.target.textLength;
+	}
 }
diff --git a/src/input/textarea.stories.ts b/src/input/textarea.stories.ts
index a90ebf2762..28a0c47eb9 100644
--- a/src/input/textarea.stories.ts
+++ b/src/input/textarea.stories.ts
@@ -25,7 +25,9 @@ export default {
 		theme: "dark",
 		readonly: false,
 		fluid: false,
-		skeleton: false
+		skeleton: false,
+		maxlength: undefined,
+		enableCounter: false
 	},
 	argTypes: {
 		autocomplete: {
@@ -35,6 +37,9 @@ export default {
 		theme: {
 			options: ["light", "dark"],
 			control: "radio"
+		},
+		maxlength: {
+			control: "number"
 		}
 	},
 	component: TextareaLabelComponent
@@ -44,25 +49,29 @@ const Template = (args) => ({
 	props: args,
 	template: `
 		<cds-textarea-label
-		[helperText]="helperText"
-		[invalid]="invalid"
-		[disabled]="disabled"
-		[invalidText]="invalidText"
-		[fluid]="fluid"
-		[skeleton]="skeleton"
-		[warn]="warn"
-		[warnText]="warnText">
-		{{label}}
-		<textarea
-			cdsTextArea
-			[placeholder]="placeholder"
+			[helperText]="helperText"
 			[invalid]="invalid"
 			[disabled]="disabled"
-			[theme]="theme"
-			[rows]="rows"
-			[cols]="cols"
-			[readonly]="readonly"
-			aria-label="textarea"></textarea>
+			[invalidText]="invalidText"
+			[fluid]="fluid"
+			[skeleton]="skeleton"
+			[warn]="warn"
+			[warnText]="warnText"
+			[enableCounter]="enableCounter">
+			{{label}}
+			<textarea
+				cdsTextArea
+				[placeholder]="placeholder"
+				[invalid]="invalid"
+				[disabled]="disabled"
+				[theme]="theme"
+				[rows]="rows"
+				[cols]="cols"
+				[readonly]="readonly"
+				[maxlength]="maxlength"
+				[attr.aria-label]="textarea"
+				style="width: 100%;">
+			</textarea>
 		</cds-textarea-label>
 	`
 });