diff --git a/playbook/app/pb_kits/playbook/pb_textarea/_textarea.jsx b/playbook/app/pb_kits/playbook/pb_textarea/_textarea.jsx
deleted file mode 100644
index e0ffd5d9b4..0000000000
--- a/playbook/app/pb_kits/playbook/pb_textarea/_textarea.jsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
-
-import React, { forwardRef, useEffect, useRef } from 'react'
-import classnames from 'classnames'
-
-import PbTextarea from './'
-import type { InputCallback } from '../types.js'
-
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Flex from '../pb_flex/_flex'
-import FlexItem from '../pb_flex/_flex_item'
-
-type TextareaProps = {
-  characterCount?: string,
-  className?: string,
-  children?: array<React.ReactChild>,
-  disabled?: boolean,
-  error?: string,
-  id?: string,
-  inline?: boolean,
-  object?: string,
-  method?: string,
-  label?: string,
-  maxCharacters?: string,
-  placeholder?: string,
-  value?: string,
-  name?: string,
-  required?: boolean,
-  rows?: number,
-  resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
-  onChange?: InputCallback<HTMLTextAreaElement>,
-}
-
-const Textarea = ({
-  characterCount,
-  className,
-  children,
-  disabled,
-  inline = false,
-  resize = 'none',
-  error,
-  label,
-  maxCharacters,
-  name,
-  onChange = () => {},
-  placeholder,
-  required,
-  rows = 4,
-  value,
-  ...props
-}: TextareaProps, ref: React.ElementRef<"textarea">) => {
-  ref = ref || useRef(false)
-  useEffect(() => {
-    if (ref.current && resize === 'auto') {
-      PbTextarea.addMatch(ref.current)
-    }
-  })
-
-  const errorClass = error ? 'error' : null
-  const inlineClass = inline ? 'inline' : ''
-  const resizeClass = `resize_${resize}`
-  const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
-
-  const characterCounter = () => {
-    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)
-  }
-
-  const checkIfZero = (characterCount) => {
-    return characterCount == 0 ? characterCount.toString() : characterCount
-  }
-
-  return (
-    <div className={classes}>
-      <Caption
-          text={label}
-      />
-      <If condition={children}>
-        {children}
-        <Else />
-        <textarea
-            className="pb_textarea_kit"
-            disabled={disabled}
-            name={name}
-            onChange={onChange}
-            placeholder={placeholder}
-            ref={ref}
-            required={required}
-            rows={rows}
-            value={value}
-            {...props}
-        />
-        <If condition={error}>
-          <If condition={characterCount}>
-            <Flex
-                spacing="between"
-                vertical="center"
-            >
-              <FlexItem>
-                <Body
-                    margin="none"
-                    status="negative"
-                    text={error}
-                />
-              </FlexItem>
-              <FlexItem>
-                <Caption
-                    margin="none"
-                    size="xs"
-                    text={characterCounter()}
-                />
-              </FlexItem>
-            </Flex>
-            <Else />
-            <Body
-                status="negative"
-                text={error}
-            />
-          </If>
-          <Else />
-          <Caption
-              margin="none"
-              size="xs"
-              text={characterCounter()}
-          />
-        </If>
-      </If>
-    </div>
-  )
-}
-
-export default forwardRef(Textarea)
diff --git a/playbook/app/pb_kits/playbook/pb_textarea/_textarea.tsx b/playbook/app/pb_kits/playbook/pb_textarea/_textarea.tsx
new file mode 100644
index 0000000000..f3e7f3de01
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_textarea/_textarea.tsx
@@ -0,0 +1,129 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React, { forwardRef, useEffect, useRef } from 'react'
+import classnames from 'classnames'
+
+import PbTextarea from '.'
+import type { InputCallback } from '../types'
+
+import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Flex from '../pb_flex/_flex'
+import FlexItem from '../pb_flex/_flex_item'
+
+type TextareaProps = {
+  aria?: {[key: string]: string},
+  characterCount?: string,
+  className?: string,
+  children?: React.ReactChild[],
+  data?: {[key: string]: string},
+  disabled?: boolean,
+  error?: string,
+  id?: string,
+  inline?: boolean,
+  object?: string,
+  method?: string,
+  label?: string,
+  maxCharacters?: string,
+  placeholder?: string,
+  value?: string,
+  name?: string,
+  required?: boolean,
+  rows?: number,
+  resize: "none" | "both" | "horizontal" | "vertical" | "auto",
+  onChange?: InputCallback<HTMLTextAreaElement>,
+} & GlobalProps
+
+const Textarea = ({
+  aria = {},
+  characterCount,
+  className,
+  children,
+  data = {},
+  disabled,
+  inline = false,
+  resize = 'none',
+  error,
+  label,
+  maxCharacters,
+  name,
+  onChange = () => {},
+  placeholder,
+  required,
+  rows = 4,
+  value,
+  ...props
+}: TextareaProps, ref: any) => {
+  ref = useRef<HTMLTextAreaElement>(null)
+  useEffect(() => {
+    if (ref.current && resize === 'auto') {
+      PbTextarea.addMatch(ref.current)
+    }
+  })
+
+  const errorClass = error ? 'error' : null
+  const inlineClass = inline ? 'inline' : ''
+  const resizeClass = `resize_${resize}`
+  const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
+  const noCount = typeof characterCount !== 'undefined'
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+
+  const characterCounter = () => {
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
+  }
+
+  const checkIfZero = (characterCount: string | number) => {
+    return characterCount == 0 ? characterCount.toString() : characterCount
+  }
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+    >
+      <Caption text={label} />
+      {children || (
+        <textarea
+          className="pb_textarea_kit"
+          disabled={disabled}
+          name={name}
+          onChange={onChange}
+          placeholder={placeholder}
+          ref={ref}
+          required={required}
+          rows={rows}
+          value={value}
+          {...props}
+        />
+      )}
+
+      {error ? (
+        <>
+          {characterCount ? (
+            <Flex spacing="between" vertical="center">
+              <FlexItem>
+                <Body margin="none" status="negative" text={error} />
+              </FlexItem>
+              <FlexItem>
+                <Caption margin="none" size="xs" text={characterCounter()} />
+              </FlexItem>
+            </Flex>
+          ) : (
+            <Body status="negative" text={error} />
+          )}
+        </>
+      ) : (
+         noCount && (
+          <Caption margin="none" size="xs" text={characterCounter()} />
+        )
+      )}
+    </div>
+  );
+}
+
+export default forwardRef(Textarea)
diff --git a/playbook/app/pb_kits/playbook/pb_textarea/index.js b/playbook/app/pb_kits/playbook/pb_textarea/index.tsx
similarity index 89%
rename from playbook/app/pb_kits/playbook/pb_textarea/index.js
rename to playbook/app/pb_kits/playbook/pb_textarea/index.tsx
index fa056ceb91..cab431c3ed 100644
--- a/playbook/app/pb_kits/playbook/pb_textarea/index.js
+++ b/playbook/app/pb_kits/playbook/pb_textarea/index.tsx
@@ -1,6 +1,8 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTextarea extends PbEnhancedElement {
+  style: {[key: string]: string}
+  scrollHeight: string
   static get selector() {
     return '.resize_auto textarea'
   }
diff --git a/playbook/app/pb_kits/playbook/pb_textarea/textarea.test.js b/playbook/app/pb_kits/playbook/pb_textarea/textarea.test.js
new file mode 100644
index 0000000000..c50d25b7dc
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_textarea/textarea.test.js
@@ -0,0 +1,213 @@
+import React from "react"
+import { render, screen } from "../utilities/test-utils"
+
+import Textarea from "./_textarea"
+
+const testId = "textarea-kit"
+
+describe("TextArea Kit Props", () => {
+  test("Expects to have correct classname", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          label="Label"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass("pb_textarea_kit")
+  })
+
+  test("should render aria-label", () => {
+    render(
+      <Textarea
+          aria={{ label: testId }}
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute("aria-label", testId)
+  })
+
+  test("should render custom classname", () => {
+    render(
+      <Textarea
+          className={"text_class"}
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+
+    expect(kit).toHaveClass("text_class")
+  })
+
+  test("should render value", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          value={"Default Value"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.innerHTML).toBe("Default Value")
+  })
+
+  test("should render disabled", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          disabled={false}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.disabled).toBe(false)
+  })
+
+  test("should render rows", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          rows={7}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.rows).toBe(7)
+  })
+
+  test("should render character count", () => {
+    render(
+      <Textarea
+          characterCount={50}
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const counter = kit.querySelector(".pb_caption_kit_xs")
+
+    expect(counter.innerHTML).toBe("50")
+  })
+
+  test("should have inline class", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          inline
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+
+    expect(kit).toHaveClass("inline")
+  })
+
+  test("should have resize class", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          resize={"none"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+
+    expect(kit).toHaveClass("resize_none")
+  })
+
+  test("should render error", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          error={"error message"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const error = kit.querySelector(".pb_body_kit_negative")
+
+    expect(kit).toHaveClass("error")
+    expect(error.innerHTML).toBe("error message")
+  })
+
+  test("should render label", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          label={"Test Label"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const error = kit.querySelector(".pb_caption_kit_md")
+
+    expect(error.innerHTML).toBe("Test Label")
+  })
+
+  test("should render max character display", () => {
+    render(
+      <Textarea
+          characterCount={"11"}
+          data={{ testid: testId }}
+          maxCharacters={"10"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const error = kit.querySelector(".pb_caption_kit_xs")
+
+    expect(error.innerHTML).toBe("11 / 10")
+  })
+
+  test("should render max character display", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          name={"TestName"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.name).toBe("TestName")
+  })
+
+  test("should render placeholder", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          placeholder={"Test Placeholder"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.placeholder).toBe("Test Placeholder")
+  })
+
+  test("should be required", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          required
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.required).toBeTruthy()
+  })
+})
