diff --git a/packages/index.ts b/packages/index.ts
index bc94ebe10..b1a1d3b42 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -50,6 +50,7 @@ export {
   NumberCell
 } from "./table";
 export { TextInput, TextInputWithIcon } from "./textInput";
+export { Textarea } from "./textarea";
 export { Toaster, Toast } from "./toaster";
 export { ToggleContent } from "./toggleContent";
 export { ToggleInput } from "./toggleInput";
diff --git a/packages/textarea/README.md b/packages/textarea/README.md
new file mode 100644
index 000000000..2af6a21c6
--- /dev/null
+++ b/packages/textarea/README.md
@@ -0,0 +1,5 @@
+# Textarea
+
+A Textarea is used to input a large amount of text data in a form field. They're very similar to a regular text input, but they support multiple lines of text.
+
+By default, the Textarea height is big enough to hold 3 lines of text. Adjust this using the `rows` prop to give users a hint of how much content the field expects.
diff --git a/packages/textarea/components/Textarea.tsx b/packages/textarea/components/Textarea.tsx
new file mode 100644
index 000000000..cd7617d82
--- /dev/null
+++ b/packages/textarea/components/Textarea.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+import { InputAppearance } from "../../shared/types/inputAppearance";
+import FormFieldWrapper from "../../shared/components/FormFieldWrapper";
+import { cx } from "emotion";
+import {
+  inputReset,
+  tintText,
+  visuallyHidden
+} from "../../shared/styles/styleUtils";
+import {
+  getInputAppearanceStyle,
+  inputContainer,
+  getLabelStyle
+} from "../../shared/styles/formStyles";
+import { textarea } from "../style";
+import { themeError } from "../../design-tokens/build/js/designTokens";
+
+export interface TextareaProps extends React.HTMLProps<HTMLTextAreaElement> {
+  /**
+   * Unique identifier used for the form textarea element
+   */
+  id: string;
+  /**
+   * Sets the current appearance of the component. This defaults to InputAppearance.Standard, but supports `InputAppearance.Error` & `InputAppearance.Success` appearances as well.
+   */
+  appearance: InputAppearance;
+  /**
+   * Sets the contents of the label. This can be a `string` or any `ReactNode`.
+   */
+  inputLabel: React.ReactNode;
+  /**
+   * Defaults to `true`, but can be set to `false` to visibly hide the `Textarea`'s label. The `inputLabel` should still be set even when hidden for accessibility support.
+   */
+  showInputLabel: boolean;
+  /**
+   * Text or a ReactNode that is displayed directly under the textarea with additional information about the expected input.
+   */
+  hintContent?: React.ReactNode;
+  /**
+   * Sets the contents for validation errors. This will be displayed below the textarea element. Errors are only visible when the `Textarea` appearance is also set to `InputAppearance.Error`.
+   */
+  errors?: React.ReactNode[];
+}
+
+class Textarea extends React.PureComponent<TextareaProps, {}> {
+  public static defaultProps: Partial<TextareaProps> = {
+    appearance: InputAppearance.Standard,
+    showInputLabel: true,
+    rows: 3
+  };
+
+  public render() {
+    const {
+      appearance,
+      errors,
+      hintContent,
+      id,
+      inputLabel,
+      required,
+      showInputLabel,
+      value,
+      ...other
+    } = this.props;
+    const hasError = appearance === InputAppearance.Error;
+    let { onChange } = other;
+    if (onChange == null && value != null) {
+      onChange = Function.prototype as (
+        event: React.FormEvent<HTMLTextAreaElement>
+      ) => void;
+    }
+
+    return (
+      <FormFieldWrapper id={id} errors={errors} hintContent={hintContent}>
+        {({ getValidationErrors, getHintContent, isValid, describedByIds }) => (
+          <div>
+            <label
+              className={cx(getLabelStyle(hasError), {
+                [visuallyHidden]: !showInputLabel
+              })}
+              htmlFor={id}
+            >
+              {inputLabel}
+              {required ? (
+                <span className={cx(tintText(themeError))}> *</span>
+              ) : null}
+            </label>
+            <textarea
+              aria-invalid={!isValid}
+              aria-describedby={describedByIds}
+              value={value}
+              id={id}
+              className={cx(
+                inputReset,
+                inputContainer,
+                getInputAppearanceStyle(this.getInputAppearance()),
+                textarea
+              )}
+              required={required}
+              {...{ ...other, onChange }}
+            />
+            {getHintContent}
+            {hasError && getValidationErrors}
+          </div>
+        )}
+      </FormFieldWrapper>
+    );
+  }
+
+  private getInputAppearance(): string {
+    return this.props.disabled ? "disabled" : this.props.appearance;
+  }
+}
+
+export default Textarea;
diff --git a/packages/textarea/index.ts b/packages/textarea/index.ts
new file mode 100644
index 000000000..4fc7d13fd
--- /dev/null
+++ b/packages/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./components/Textarea";
diff --git a/packages/textarea/stories/Textarea.stories.tsx b/packages/textarea/stories/Textarea.stories.tsx
new file mode 100644
index 000000000..f5e3f90ad
--- /dev/null
+++ b/packages/textarea/stories/Textarea.stories.tsx
@@ -0,0 +1,166 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { withReadme } from "storybook-readme";
+import { Textarea } from "../index";
+import styled from "react-emotion";
+import { InputAppearance } from "../../shared/types/inputAppearance";
+
+const readme = require("../README.md");
+
+const InputStoryWrapper = styled("div")`
+  max-width: 300px;
+
+  & > div {
+    margin-bottom: 1.5em;
+  }
+`;
+
+storiesOf("Forms/Textarea", module)
+  .addDecorator(withReadme([readme]))
+  .add("default", () => (
+    <InputStoryWrapper>
+      <div>
+        <Textarea
+          id="standard"
+          inputLabel="Standard"
+          placeholder="Placeholder"
+        />
+      </div>
+      <div>
+        <Textarea
+          appearance={InputAppearance.Error}
+          id="error"
+          inputLabel="Error"
+          placeholder="Placeholder"
+        />
+      </div>
+      <div>
+        <Textarea
+          appearance={InputAppearance.Success}
+          id="success"
+          inputLabel="Success"
+          placeholder="Placeholder"
+        />
+      </div>
+      <div>
+        <Textarea
+          id="value"
+          inputLabel="With Value"
+          placeholder="Placeholder"
+          value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
+        />
+      </div>
+      <div>
+        <Textarea
+          id="disabled"
+          inputLabel="Disabled"
+          placeholder="Placeholder"
+          disabled={true}
+        />
+      </div>
+      <div>
+        <Textarea
+          id="disabledValue"
+          inputLabel="Disabled w/ Value"
+          value="This is Disabled"
+          disabled={true}
+        />
+      </div>
+    </InputStoryWrapper>
+  ))
+  .add("more rows", () => (
+    <InputStoryWrapper>
+      <Textarea
+        id="tenRows"
+        inputLabel="Standard"
+        placeholder="Placeholder"
+        rows={10}
+      />
+    </InputStoryWrapper>
+  ))
+  .add("required", () => (
+    <InputStoryWrapper>
+      <div>
+        <Textarea
+          id="required"
+          inputLabel="Required"
+          placeholder="Placeholder"
+          required={true}
+        />
+      </div>
+      <div>
+        <Textarea
+          appearance={InputAppearance.Error}
+          id="required"
+          inputLabel="Required"
+          placeholder="Placeholder"
+          errors={["Please enter a value"]}
+          required={true}
+        />
+      </div>
+    </InputStoryWrapper>
+  ))
+  .add("with hint", () => (
+    <InputStoryWrapper>
+      <Textarea
+        id="hint"
+        inputLabel="Standard"
+        placeholder="Placeholder"
+        hintContent="Enter a body of text here"
+      />
+    </InputStoryWrapper>
+  ))
+  .add("error with message", () => (
+    <InputStoryWrapper>
+      <Textarea
+        appearance={InputAppearance.Error}
+        id="error"
+        inputLabel="Error"
+        placeholder="Placeholder"
+        errors={["Something is wrong here"]}
+      />
+    </InputStoryWrapper>
+  ))
+  .add("error with messages", () => (
+    <InputStoryWrapper>
+      <Textarea
+        appearance={InputAppearance.Error}
+        id="error"
+        inputLabel="Error"
+        placeholder="Placeholder"
+        errors={["Something is wrong here", "Another error message"]}
+      />
+    </InputStoryWrapper>
+  ))
+  .add("hidden label", () => (
+    <InputStoryWrapper>
+      <Textarea
+        id="hiddenlabel"
+        inputLabel="Standard"
+        placeholder="Placeholder"
+        showInputLabel={false}
+      />
+    </InputStoryWrapper>
+  ))
+  .add("with onChange", () => (
+    <InputStoryWrapper>
+      <Textarea
+        id="onChange"
+        inputLabel="Standard"
+        placeholder="Placeholder"
+        onChange={action("onChange happened")}
+      />
+    </InputStoryWrapper>
+  ))
+  .add("with onChange delegated", () => (
+    <InputStoryWrapper>
+      <form onChange={action("onChange delegated")}>
+        <Textarea
+          id="onChangeDelegated"
+          inputLabel="Standard"
+          placeholder="Placeholder"
+        />
+      </form>
+    </InputStoryWrapper>
+  ));
diff --git a/packages/textarea/style.ts b/packages/textarea/style.ts
new file mode 100644
index 000000000..7654da925
--- /dev/null
+++ b/packages/textarea/style.ts
@@ -0,0 +1,9 @@
+import { css } from "emotion";
+import { spaceM } from "../design-tokens/build/js/designTokens";
+
+export const textarea = css`
+  box-sizing: border-box;
+  height: unset;
+  padding: ${spaceM};
+  width: 100%;
+`;
diff --git a/packages/textarea/tests/Textarea.test.tsx b/packages/textarea/tests/Textarea.test.tsx
new file mode 100644
index 000000000..8a9a4cbde
--- /dev/null
+++ b/packages/textarea/tests/Textarea.test.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import * as emotion from "emotion";
+import { createSerializer } from "jest-emotion";
+import toJson from "enzyme-to-json";
+
+import { Textarea } from "../";
+import { InputAppearance } from "../../shared/types/inputAppearance";
+
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+describe("Textarea", () => {
+  describe("should render", () => {
+    it("all appearances", () => {
+      Object.keys(InputAppearance).forEach(appearance => {
+        const component = shallow(
+          <Textarea
+            id={InputAppearance[appearance]}
+            inputLabel={InputAppearance[appearance]}
+            appearance={InputAppearance[appearance]}
+          />
+        );
+        expect(toJson(component)).toMatchSnapshot();
+      });
+    });
+    it("string inputLabel", () => {
+      const component = shallow(
+        <Textarea id="textarea" inputLabel="Test Input" />
+      );
+      expect(toJson(component)).toMatchSnapshot();
+    });
+    it("node as inputLabel", () => {
+      const component = shallow(
+        <Textarea id="textarea" inputLabel={<span>My Test Node</span>} />
+      );
+      expect(toJson(component)).toMatchSnapshot();
+    });
+    it("with hidden label if `showInputLabel` is set to false", () => {
+      const component = shallow(
+        <Textarea
+          id="textarea"
+          inputLabel="I'm not displayed"
+          showInputLabel={false}
+        />
+      );
+      expect(toJson(component)).toMatchSnapshot();
+    });
+    it("error messages if appearance set to InputAppearance.Error", () => {
+      const component = shallow(
+        <Textarea
+          id="textarea"
+          inputLabel="Error Message Test"
+          appearance={InputAppearance.Error}
+          errors={[
+            "This is an error message",
+            "this is a second error message"
+          ]}
+        />
+      );
+      expect(toJson(component)).toMatchSnapshot();
+    });
+    it("no error messages if appearance set to InputAppearance.Success", () => {
+      const component = shallow(
+        <Textarea
+          id="textarea"
+          inputLabel="Error Message Test"
+          appearance={InputAppearance.Success}
+          errors={["I'm not displayed"]}
+        />
+      );
+      expect(toJson(component)).toMatchSnapshot();
+    });
+  });
+  it("sets custom number of rows", () => {
+    const rowCount = 5;
+    const component = mount(
+      <Textarea id="textarea" inputLabel="Custom rows" rows={rowCount} />
+    );
+    expect(component.find("textarea").prop("rows")).toEqual(rowCount);
+  });
+  it("should set <label>'s `for` attribute if `id` is set", () => {
+    const testId = "testId";
+    const component = mount(<Textarea id={testId} inputLabel="Custom rows" />);
+    expect(component.find("label").prop("htmlFor")).toEqual(testId);
+  });
+  it("should call onFocus when input gains focus", () => {
+    const focusFn = jest.fn();
+    const component = mount(
+      <Textarea id="textarea" inputLabel="Focus" onFocus={focusFn} />
+    );
+    expect(focusFn).not.toHaveBeenCalled();
+    component.find("textarea").simulate("focus");
+    expect(focusFn).toHaveBeenCalled();
+  });
+  it("should call onBlur when input loses focus", () => {
+    const blurFn = jest.fn();
+    const component = mount(
+      <Textarea id="textarea" inputLabel="Blur" onBlur={blurFn} />
+    );
+    expect(blurFn).not.toHaveBeenCalled();
+    component.find("textarea").simulate("focus");
+    expect(blurFn).not.toHaveBeenCalled();
+    component.find("textarea").simulate("blur");
+    expect(blurFn).toHaveBeenCalled();
+  });
+  it("should call onChange when input changes", () => {
+    const changeFn = jest.fn();
+    const component = mount(
+      <Textarea id="textarea" inputLabel="Change" onChange={changeFn} />
+    );
+    expect(changeFn).not.toHaveBeenCalled();
+    component.find("textarea").simulate("change");
+    expect(changeFn).toHaveBeenCalled();
+  });
+  it("should delegate onChange from parent form", () => {
+    const changeFn = jest.fn();
+    const component = mount(
+      <form onChange={changeFn}>
+        <Textarea id="textarea" inputLabel="Change" />
+      </form>
+    );
+    expect(changeFn).not.toHaveBeenCalled();
+    component.find("textarea").simulate("change");
+    expect(changeFn).toHaveBeenCalled();
+  });
+});
diff --git a/packages/textarea/tests/__snapshots__/Textarea.test.tsx.snap b/packages/textarea/tests/__snapshots__/Textarea.test.tsx.snap
new file mode 100644
index 000000000..1cccfc9d6
--- /dev/null
+++ b/packages/textarea/tests/__snapshots__/Textarea.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Textarea should render all appearances 1`] = `
+<FormFieldWrapper
+  id="standard"
+>
+  <Component />
+</FormFieldWrapper>
+`;
+
+exports[`Textarea should render all appearances 2`] = `
+<FormFieldWrapper
+  id="error"
+>
+  <Component />
+</FormFieldWrapper>
+`;
+
+exports[`Textarea should render all appearances 3`] = `
+<FormFieldWrapper
+  id="success"
+>
+  <Component />
+</FormFieldWrapper>
+`;
+
+exports[`Textarea should render error messages if appearance set to InputAppearance.Error 1`] = `
+<FormFieldWrapper
+  errors={
+    Array [
+      "This is an error message",
+      "this is a second error message",
+    ]
+  }
+  id="textarea"
+>
+  <Component />
+</FormFieldWrapper>
+`;
+
+exports[`Textarea should render no error messages if appearance set to InputAppearance.Success 1`] = `
+<FormFieldWrapper
+  errors={
+    Array [
+      "I'm not displayed",
+    ]
+  }
+  id="textarea"
+>
+  <Component />
+</FormFieldWrapper>
+`;
+
+exports[`Textarea should render node as inputLabel 1`] = `
+<FormFieldWrapper
+  id="textarea"
+>
+  <Component />
+</FormFieldWrapper>
+`;
+
+exports[`Textarea should render string inputLabel 1`] = `
+<FormFieldWrapper
+  id="textarea"
+>
+  <Component />
+</FormFieldWrapper>
+`;
+
+exports[`Textarea should render with hidden label if \`showInputLabel\` is set to false 1`] = `
+<FormFieldWrapper
+  id="textarea"
+>
+  <Component />
+</FormFieldWrapper>
+`;