diff --git a/.changeset/perfect-jeans-lick.md b/.changeset/perfect-jeans-lick.md
new file mode 100644
index 0000000000..d82ad11341
--- /dev/null
+++ b/.changeset/perfect-jeans-lick.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added an auto expand behavior to the `TextArea` component.
diff --git a/packages/circuit-ui/components/Input/Input.tsx b/packages/circuit-ui/components/Input/Input.tsx
index 22eec1e138..2d7b2a1279 100644
--- a/packages/circuit-ui/components/Input/Input.tsx
+++ b/packages/circuit-ui/components/Input/Input.tsx
@@ -13,7 +13,14 @@
  * limitations under the License.
  */
 
-import { forwardRef, Ref, FC, InputHTMLAttributes, ReactNode } from 'react';
+import {
+  forwardRef,
+  Ref,
+  FC,
+  InputHTMLAttributes,
+  TextareaHTMLAttributes,
+  ReactNode,
+} from 'react';
 import { css, Interpolation } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 
@@ -29,7 +36,10 @@ import ValidationHint from '../ValidationHint';
 import { ReturnType } from '../../types/return-type';
 import { deprecate } from '../../util/logger';
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export type HTMLCircuitInputElement = HTMLInputElement & HTMLTextAreaElement;
+type CircuitInputHTMLAttributes = InputHTMLAttributes<HTMLInputElement> &
+  TextareaHTMLAttributes<HTMLTextAreaElement>;
+export interface InputProps extends CircuitInputHTMLAttributes {
   /**
    * A clear and concise description of the input purpose.
    */
@@ -105,7 +115,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /**
    * The ref to the HTML DOM element
    */
-  ref?: Ref<HTMLInputElement & HTMLTextAreaElement>;
+  ref?: Ref<HTMLCircuitInputElement>;
 }
 
 const containerStyles = () => css`
diff --git a/packages/circuit-ui/components/TextArea/TextArea.spec.tsx b/packages/circuit-ui/components/TextArea/TextArea.spec.tsx
index c81ebdd614..043e54f85b 100644
--- a/packages/circuit-ui/components/TextArea/TextArea.spec.tsx
+++ b/packages/circuit-ui/components/TextArea/TextArea.spec.tsx
@@ -100,6 +100,20 @@ describe('TextArea', () => {
     expect(actual).toMatchSnapshot();
   });
 
+  it('should render rows props when passed', () => {
+    const actual = create(<TextArea rows={3} />);
+    expect(actual).toMatchSnapshot();
+  });
+  it('should render without rows props when passed if rows is auto', () => {
+    const actual = create(<TextArea rows="auto" />);
+    expect(actual).toMatchSnapshot();
+  });
+
+  it('should render minRows props as rows when passed if rows is auto', () => {
+    const actual = create(<TextArea minRows={3} rows="auto" />);
+    expect(actual).toMatchSnapshot();
+  });
+
   describe('business logic', () => {
     /**
      * Should accept a working ref
diff --git a/packages/circuit-ui/components/TextArea/TextArea.stories.tsx b/packages/circuit-ui/components/TextArea/TextArea.stories.tsx
index fae2b3fbe8..7205dc333b 100644
--- a/packages/circuit-ui/components/TextArea/TextArea.stories.tsx
+++ b/packages/circuit-ui/components/TextArea/TextArea.stories.tsx
@@ -76,3 +76,12 @@ HiddenLabel.args = {
   placeholder: 'Describe your issue',
   hideLabel: true,
 };
+
+export const AutoExpand = (args: TextAreaProps) => <TextArea {...args} />;
+
+AutoExpand.args = {
+  ...baseArgs,
+  placeholder:
+    'Try writing a long text, textarea auto adapt its height to your text.',
+  rows: 'auto',
+};
diff --git a/packages/circuit-ui/components/TextArea/TextArea.tsx b/packages/circuit-ui/components/TextArea/TextArea.tsx
index 16288fd3bc..2ed2ae131a 100644
--- a/packages/circuit-ui/components/TextArea/TextArea.tsx
+++ b/packages/circuit-ui/components/TextArea/TextArea.tsx
@@ -13,13 +13,27 @@
  * limitations under the License.
  */
 
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { css } from '@emotion/react';
 
 import Input from '../Input';
-import { InputProps } from '../Input/Input';
+import { HTMLCircuitInputElement, InputProps } from '../Input/Input';
+import { multiRefs } from '../../util/multiRefs';
 
-export type TextAreaProps = InputProps;
+import { useAutoExpand } from './useAutoExpand';
+
+export type TextAreaProps = Omit<InputProps, 'rows'> & {
+  /**
+   * The number of visible text lines for the control.
+   * If set to `auto`, the control will auto-expand vertically to show the whole value.
+   */
+  rows?: InputProps['rows'] | 'auto';
+  /**
+   * Define the minimum number of visible text lines for the control.
+   * Works only when `rows` is set to `auto`.
+   */
+  minRows?: InputProps['rows'];
+};
 
 const textAreaStyles = css`
   overflow: auto;
@@ -29,10 +43,20 @@ const textAreaStyles = css`
 /**
  * TextArea component for forms.
  */
-export const TextArea = forwardRef(
-  (props: TextAreaProps, ref: TextAreaProps['ref']) => (
-    <Input {...props} inputStyles={textAreaStyles} as="textarea" ref={ref} />
-  ),
+export const TextArea = forwardRef<HTMLCircuitInputElement, TextAreaProps>(
+  (props, passedRef) => {
+    const localRef = useRef<HTMLCircuitInputElement>(null);
+    const modifiedProps = useAutoExpand(localRef, props);
+
+    return (
+      <Input
+        {...modifiedProps}
+        inputStyles={textAreaStyles}
+        as="textarea"
+        ref={multiRefs(localRef, passedRef)}
+      />
+    );
+  },
 );
 
 TextArea.displayName = 'TextArea';
diff --git a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap
index d343db42fc..f84b8e4677 100644
--- a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap
+++ b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap
@@ -66,7 +66,7 @@ exports[`TextArea should prioritize disabled over error styles 1`] = `
 <label
   class="circuit-0"
   disabled=""
-  for="input_10"
+  for="input_20"
 >
   <span
     class="circuit-1"
@@ -78,7 +78,7 @@ exports[`TextArea should prioritize disabled over error styles 1`] = `
       aria-invalid="true"
       class="circuit-3"
       disabled=""
-      id="input_10"
+      id="input_20"
     />
   </div>
 </label>
@@ -150,7 +150,7 @@ exports[`TextArea should prioritize disabled over warning styles 1`] = `
 <label
   class="circuit-0"
   disabled=""
-  for="input_11"
+  for="input_22"
 >
   <span
     class="circuit-1"
@@ -161,7 +161,188 @@ exports[`TextArea should prioritize disabled over warning styles 1`] = `
     <textarea
       class="circuit-3"
       disabled=""
-      id="input_11"
+      id="input_22"
+    />
+  </div>
+</label>
+`;
+
+exports[`TextArea should render minRows props as rows when passed if rows is auto 1`] = `
+.circuit-0 {
+  font-size: 14px;
+  line-height: 20px;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.circuit-1 {
+  display: inline-block;
+  margin-bottom: 4px;
+}
+
+.circuit-2 {
+  position: relative;
+}
+
+.circuit-3 {
+  font-size: 16px;
+  line-height: 24px;
+  -webkit-appearance: none;
+  background-color: #FFF;
+  border: none;
+  outline: 0;
+  border-radius: 8px;
+  padding: 12px 16px;
+  -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
+  transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
+  width: 100%;
+  margin: 0;
+  box-shadow: 0 0 0 1px #999;
+  overflow: auto;
+  resize: vertical;
+}
+
+.circuit-3::-webkit-input-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3::-moz-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3:-ms-input-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3::placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3:hover {
+  box-shadow: 0 0 0 1px #666;
+}
+
+.circuit-3:focus {
+  box-shadow: 0 0 0 2px #3063E9;
+}
+
+.circuit-3:active {
+  box-shadow: 0 0 0 1px #3063E9;
+}
+
+<label
+  class="circuit-0"
+  for="input_32"
+>
+  <span
+    class="circuit-1"
+  />
+  <div
+    class="circuit-2"
+  >
+    <textarea
+      class="circuit-3"
+      id="input_32"
+      rows="3"
+      style="resize: none; overflow-y: hidden; height: auto;"
+    />
+  </div>
+</label>
+`;
+
+exports[`TextArea should render rows props when passed 1`] = `
+.circuit-0 {
+  font-size: 14px;
+  line-height: 20px;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.circuit-1 {
+  display: inline-block;
+  margin-bottom: 4px;
+}
+
+.circuit-2 {
+  position: relative;
+}
+
+.circuit-3 {
+  font-size: 16px;
+  line-height: 24px;
+  -webkit-appearance: none;
+  background-color: #FFF;
+  border: none;
+  outline: 0;
+  border-radius: 8px;
+  padding: 12px 16px;
+  -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
+  transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
+  width: 100%;
+  margin: 0;
+  box-shadow: 0 0 0 1px #999;
+  overflow: auto;
+  resize: vertical;
+}
+
+.circuit-3::-webkit-input-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3::-moz-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3:-ms-input-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3::placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3:hover {
+  box-shadow: 0 0 0 1px #666;
+}
+
+.circuit-3:focus {
+  box-shadow: 0 0 0 2px #3063E9;
+}
+
+.circuit-3:active {
+  box-shadow: 0 0 0 1px #3063E9;
+}
+
+<label
+  class="circuit-0"
+  for="input_28"
+>
+  <span
+    class="circuit-1"
+  />
+  <div
+    class="circuit-2"
+  >
+    <textarea
+      class="circuit-3"
+      id="input_28"
+      rows="3"
     />
   </div>
 </label>
@@ -250,7 +431,7 @@ exports[`TextArea should render with a Tooltip when passed the validationHint pr
 
 <label
   class="circuit-0"
-  for="input_4"
+  for="input_8"
 >
   <span
     class="circuit-1"
@@ -260,7 +441,7 @@ exports[`TextArea should render with a Tooltip when passed the validationHint pr
   >
     <textarea
       class="circuit-3"
-      id="input_4"
+      id="input_8"
     />
   </div>
   <span
@@ -354,7 +535,7 @@ exports[`TextArea should render with a prefix when passed the prefix prop 1`] =
 
 <label
   class="circuit-0"
-  for="input_2"
+  for="input_4"
 >
   <span
     class="circuit-1"
@@ -368,7 +549,7 @@ exports[`TextArea should render with a prefix when passed the prefix prop 1`] =
     />
     <textarea
       class="circuit-4"
-      id="input_2"
+      id="input_4"
     />
   </div>
 </label>
@@ -461,7 +642,7 @@ exports[`TextArea should render with a suffix when passed the suffix prop 1`] =
 
 <label
   class="circuit-0"
-  for="input_3"
+  for="input_6"
 >
   <span
     class="circuit-1"
@@ -471,7 +652,7 @@ exports[`TextArea should render with a suffix when passed the suffix prop 1`] =
   >
     <textarea
       class="circuit-3"
-      id="input_3"
+      id="input_6"
     />
     <div
       class="circuit-4"
@@ -554,7 +735,7 @@ exports[`TextArea should render with default styles 1`] = `
 
 <label
   class="circuit-0"
-  for="input_1"
+  for="input_2"
 >
   <span
     class="circuit-1"
@@ -564,7 +745,7 @@ exports[`TextArea should render with default styles 1`] = `
   >
     <textarea
       class="circuit-3"
-      id="input_1"
+      id="input_2"
     />
   </div>
 </label>
@@ -636,7 +817,7 @@ exports[`TextArea should render with disabled styled when passed the disabled pr
 <label
   class="circuit-0"
   disabled=""
-  for="input_9"
+  for="input_18"
 >
   <span
     class="circuit-1"
@@ -647,7 +828,7 @@ exports[`TextArea should render with disabled styled when passed the disabled pr
     <textarea
       class="circuit-3"
       disabled=""
-      id="input_9"
+      id="input_18"
     />
   </div>
 </label>
@@ -728,7 +909,7 @@ exports[`TextArea should render with inline styles when passed the inline prop 1
 
 <label
   class="circuit-0"
-  for="input_12"
+  for="input_24"
 >
   <span
     class="circuit-1"
@@ -738,7 +919,7 @@ exports[`TextArea should render with inline styles when passed the inline prop 1
   >
     <textarea
       class="circuit-3"
-      id="input_12"
+      id="input_24"
     />
   </div>
 </label>
@@ -837,7 +1018,7 @@ exports[`TextArea should render with invalid styles when passed the invalid prop
 
 <label
   class="circuit-0"
-  for="input_6"
+  for="input_12"
 >
   <span
     class="circuit-1"
@@ -848,7 +1029,7 @@ exports[`TextArea should render with invalid styles when passed the invalid prop
     <textarea
       aria-invalid="true"
       class="circuit-3"
-      id="input_6"
+      id="input_12"
     />
   </div>
 </label>
@@ -926,7 +1107,7 @@ exports[`TextArea should render with no margin styles when passed the noMargin p
 
 <label
   class="circuit-0"
-  for="input_13"
+  for="input_26"
 >
   <span
     class="circuit-1"
@@ -936,7 +1117,7 @@ exports[`TextArea should render with no margin styles when passed the noMargin p
   >
     <textarea
       class="circuit-3"
-      id="input_13"
+      id="input_26"
     />
   </div>
 </label>
@@ -1016,7 +1197,7 @@ exports[`TextArea should render with readonly styles when passed the readonly pr
 
 <label
   class="circuit-0"
-  for="input_8"
+  for="input_16"
 >
   <span
     class="circuit-1"
@@ -1026,7 +1207,7 @@ exports[`TextArea should render with readonly styles when passed the readonly pr
   >
     <textarea
       class="circuit-3"
-      id="input_8"
+      id="input_16"
       readonly=""
     />
   </div>
@@ -1106,7 +1287,7 @@ exports[`TextArea should render with valid styles when passed the showValid prop
 
 <label
   class="circuit-0"
-  for="input_7"
+  for="input_14"
 >
   <span
     class="circuit-1"
@@ -1116,7 +1297,7 @@ exports[`TextArea should render with valid styles when passed the showValid prop
   >
     <textarea
       class="circuit-3"
-      id="input_7"
+      id="input_14"
     />
   </div>
 </label>
@@ -1211,7 +1392,96 @@ exports[`TextArea should render with warning styles when passed the hasWarning p
 
 <label
   class="circuit-0"
-  for="input_5"
+  for="input_10"
+>
+  <span
+    class="circuit-1"
+  />
+  <div
+    class="circuit-2"
+  >
+    <textarea
+      class="circuit-3"
+      id="input_10"
+    />
+  </div>
+</label>
+`;
+
+exports[`TextArea should render without rows props when passed if rows is auto 1`] = `
+.circuit-0 {
+  font-size: 14px;
+  line-height: 20px;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.circuit-1 {
+  display: inline-block;
+  margin-bottom: 4px;
+}
+
+.circuit-2 {
+  position: relative;
+}
+
+.circuit-3 {
+  font-size: 16px;
+  line-height: 24px;
+  -webkit-appearance: none;
+  background-color: #FFF;
+  border: none;
+  outline: 0;
+  border-radius: 8px;
+  padding: 12px 16px;
+  -webkit-transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
+  transition: box-shadow 120ms ease-in-out,padding 120ms ease-in-out;
+  width: 100%;
+  margin: 0;
+  box-shadow: 0 0 0 1px #999;
+  overflow: auto;
+  resize: vertical;
+}
+
+.circuit-3::-webkit-input-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3::-moz-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3:-ms-input-placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3::placeholder {
+  color: #999;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
+}
+
+.circuit-3:hover {
+  box-shadow: 0 0 0 1px #666;
+}
+
+.circuit-3:focus {
+  box-shadow: 0 0 0 2px #3063E9;
+}
+
+.circuit-3:active {
+  box-shadow: 0 0 0 1px #3063E9;
+}
+
+<label
+  class="circuit-0"
+  for="input_30"
 >
   <span
     class="circuit-1"
@@ -1221,7 +1491,8 @@ exports[`TextArea should render with warning styles when passed the hasWarning p
   >
     <textarea
       class="circuit-3"
-      id="input_5"
+      id="input_30"
+      style="resize: none; overflow-y: hidden; height: auto;"
     />
   </div>
 </label>
diff --git a/packages/circuit-ui/components/TextArea/useAutoExpand.spec.tsx b/packages/circuit-ui/components/TextArea/useAutoExpand.spec.tsx
new file mode 100644
index 0000000000..b6251cd02e
--- /dev/null
+++ b/packages/circuit-ui/components/TextArea/useAutoExpand.spec.tsx
@@ -0,0 +1,213 @@
+/**
+ * Copyright 2022, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
+import React, { FormEvent } from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { HTMLCircuitInputElement } from '../Input/Input';
+
+import { useAutoExpand } from './useAutoExpand';
+
+const createTextAreaRef = (props = {}) => {
+  render(<textarea {...props} />);
+  return {
+    current: screen.getByRole('textbox'),
+  } as React.MutableRefObject<HTMLCircuitInputElement>;
+};
+
+describe('useAutoExpand hook', () => {
+  describe('when rows is not set', () => {
+    test('should render default Props', () => {
+      const ref = createTextAreaRef();
+      const { result } = renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+        }),
+      );
+      expect(result.current).toEqual({
+        label: 'test',
+        onInput: undefined,
+        rows: undefined,
+      });
+    });
+
+    test('should pass provided `onInput` as is', () => {
+      const ref = createTextAreaRef();
+      const onInputHandler = jest.fn();
+
+      const {
+        result: { current: modifiedProps },
+      } = renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+          onInput: onInputHandler,
+        }),
+      );
+
+      expect(modifiedProps.onInput).toEqual(onInputHandler);
+    });
+  });
+
+  describe('when rows is set as number', () => {
+    test('should return rows when rows is a number', () => {
+      const ref = createTextAreaRef();
+      const { result } = renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+          rows: 2,
+        }),
+      );
+      expect(result.current).toEqual({
+        label: 'test',
+        onInput: undefined,
+        rows: 2,
+      });
+      expect(ref.current).not.toHaveAttribute('style');
+    });
+
+    test('should pass provided `onInput` as is', () => {
+      const ref = createTextAreaRef();
+      const onInputHandler = jest.fn();
+
+      const {
+        result: { current: modifiedProps },
+      } = renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+          rows: 2,
+          onInput: onInputHandler,
+        }),
+      );
+
+      expect(modifiedProps.onInput).toEqual(onInputHandler);
+    });
+  });
+
+  describe('when rows is set as `auto`', () => {
+    test('should generate element style', () => {
+      const ref = createTextAreaRef();
+      const { result } = renderHook(() =>
+        useAutoExpand(ref, { label: 'test', rows: 'auto' }),
+      );
+
+      expect(result.current).toHaveProperty('onInput');
+      expect(ref.current).toHaveAttribute('style');
+    });
+
+    test('should use scrollHeight as style.height', () => {
+      const ref = createTextAreaRef();
+      const mockedScrollHeight = 123;
+      jest
+        .spyOn(ref.current, 'scrollHeight', 'get')
+        .mockImplementation(() => mockedScrollHeight);
+
+      renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+          value: 'blablabla',
+          rows: 'auto',
+        }),
+      );
+
+      expect(ref.current.style.height).toEqual(`${mockedScrollHeight}px`);
+    });
+
+    test('should use placeholder as value if empty', () => {
+      const ref = createTextAreaRef();
+      const valueSetter = jest.fn();
+      const placeholderString = 'random string';
+      jest.spyOn(ref.current, 'value', 'set').mockImplementation(valueSetter);
+
+      renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+          placeholder: placeholderString,
+          rows: 'auto',
+        }),
+      );
+
+      expect(valueSetter).toBeCalledWith(placeholderString);
+    });
+
+    test('should have a rows props when minRows is defined', () => {
+      const ref = createTextAreaRef();
+      const { result } = renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+          rows: 'auto',
+          minRows: 3,
+        }),
+      );
+      expect(result.current).toHaveProperty('onInput');
+      expect(result.current.rows).toEqual(3);
+      expect(ref.current).toHaveAttribute('style');
+    });
+
+    test('should modified provided `onInput`', () => {
+      const ref = createTextAreaRef();
+      const onInputHandler = jest.fn();
+
+      const {
+        result: { current: modifiedProps },
+      } = renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+          rows: 'auto',
+          onInput: onInputHandler,
+        }),
+      );
+
+      expect(modifiedProps.onInput).not.toEqual(onInputHandler);
+      // We need to apply those props on a second textarea for code coverage.
+      render(<textarea aria-label="second" {...modifiedProps} />);
+      expect(onInputHandler).toHaveBeenCalledTimes(0);
+      userEvent.type(screen.getByLabelText('second'), '{space}{space}');
+      expect(onInputHandler).toHaveBeenCalledTimes(2);
+    });
+
+    test('should allow preventing resize from onInput handler', () => {
+      const onInputHandler = jest
+        .fn()
+        .mockImplementation((e: FormEvent<HTMLCircuitInputElement>) => {
+          e.preventDefault();
+        });
+
+      const ref = createTextAreaRef({ onInput: onInputHandler });
+      const scrollHeightGetter = jest.fn();
+      jest
+        .spyOn(ref.current, 'scrollHeight', 'get')
+        .mockImplementation(scrollHeightGetter);
+
+      renderHook(() =>
+        useAutoExpand(ref, {
+          label: 'test',
+          rows: 'auto',
+          onInput: onInputHandler,
+        }),
+      );
+
+      // initial
+      expect(onInputHandler).toHaveBeenCalledTimes(0);
+      expect(scrollHeightGetter).toHaveBeenCalledTimes(1);
+
+      // typing
+      userEvent.type(screen.getByRole('textbox'), '{space}{space}');
+      expect(onInputHandler).toHaveBeenCalledTimes(2);
+      expect(scrollHeightGetter).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/packages/circuit-ui/components/TextArea/useAutoExpand.ts b/packages/circuit-ui/components/TextArea/useAutoExpand.ts
new file mode 100644
index 0000000000..3e5c3018ae
--- /dev/null
+++ b/packages/circuit-ui/components/TextArea/useAutoExpand.ts
@@ -0,0 +1,81 @@
+/* eslint-disable no-param-reassign */
+/**
+ * Copyright 2021, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormEvent, RefObject, useCallback, useEffect } from 'react';
+
+import { HTMLCircuitInputElement } from '../Input/Input';
+import { useComponentSize } from '../../hooks/useComponentSize';
+
+import { TextAreaProps } from '.';
+
+type ModifiedProps = Omit<TextAreaProps, 'minRows' | 'rows'> & {
+  rows: TextAreaProps['minRows'];
+};
+
+export const useAutoExpand = (
+  ref: RefObject<HTMLCircuitInputElement>,
+  { minRows, rows = minRows, onInput, ...props }: TextAreaProps,
+): ModifiedProps => {
+  const autoExpand = rows === 'auto';
+
+  const { height, width } = useComponentSize(ref) as DOMRect;
+
+  const updateElementHeight = useCallback(
+    (el: EventTarget & HTMLTextAreaElement) => {
+      const previousValue = el.value !== undefined ? el.value : '';
+      const shouldUsePlaceholder = !previousValue.length && !!props.placeholder;
+      if (shouldUsePlaceholder) {
+        el.value = props.placeholder !== undefined ? props.placeholder : '';
+      }
+
+      el.style.height = 'auto';
+      if (el.scrollHeight) {
+        el.style.height = `${el.scrollHeight}px`;
+      }
+      if (shouldUsePlaceholder) {
+        el.value = previousValue;
+      }
+    },
+    [props.placeholder],
+  );
+
+  const inputHandler = useCallback(
+    (e: FormEvent<HTMLCircuitInputElement>) => {
+      if (onInput) {
+        onInput(e);
+      }
+      if (!e.defaultPrevented) {
+        updateElementHeight(e.currentTarget);
+      }
+    },
+    [onInput, updateElementHeight],
+  );
+
+  useEffect(() => {
+    const el = ref.current;
+    if (el && autoExpand) {
+      el.style.resize = 'none';
+      el.style.overflowY = 'hidden';
+      updateElementHeight(el);
+    }
+  }, [autoExpand, ref, updateElementHeight, minRows, height, width]);
+
+  return {
+    ...props,
+    onInput: autoExpand ? inputHandler : onInput,
+    rows: autoExpand ? minRows : rows,
+  };
+};
diff --git a/packages/circuit-ui/util/multiRefs.spec.tsx b/packages/circuit-ui/util/multiRefs.spec.tsx
new file mode 100644
index 0000000000..65c1470ef5
--- /dev/null
+++ b/packages/circuit-ui/util/multiRefs.spec.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2022, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useRef } from 'react';
+
+import { multiRefs } from './multiRefs';
+
+describe('multiRefs function', () => {
+  test("should populate a reference's `current` member'", () => {
+    const {
+      result: { current: refAsObject },
+    } = renderHook(() => useRef<HTMLDivElement>());
+
+    render(<div ref={multiRefs(refAsObject)} />);
+    expect(refAsObject.current).toMatchInlineSnapshot('<div />');
+  });
+
+  test("should call a ref if it's a function", () => {
+    const refAsFunction = jest.fn();
+
+    render(<div ref={multiRefs(refAsFunction)} />);
+
+    const lastCall = refAsFunction.mock.calls[0] as JSX.Element[];
+    expect(lastCall[0]).toMatchInlineSnapshot('<div />');
+  });
+
+  test('should allow multiple refs as arguments', () => {
+    const {
+      result: { current: refAsObject },
+    } = renderHook(() => useRef<HTMLDivElement>());
+
+    const refAsFunction = jest.fn();
+
+    render(<div ref={multiRefs(refAsObject, refAsFunction)} />);
+
+    expect(refAsObject.current).toMatchInlineSnapshot('<div />');
+    expect(refAsFunction).toBeCalled();
+  });
+});
diff --git a/packages/circuit-ui/util/multiRefs.tsx b/packages/circuit-ui/util/multiRefs.tsx
new file mode 100644
index 0000000000..6246763046
--- /dev/null
+++ b/packages/circuit-ui/util/multiRefs.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2021, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ForwardedRef } from 'react';
+
+type Refs<T extends Element> = (ForwardedRef<T> | { current: T })[];
+
+export const multiRefs =
+  <T extends Element>(...refs: Refs<T>): ForwardedRef<T> =>
+  (instance: T | null): void => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(instance);
+      } else if (ref) {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = instance;
+      }
+    });
+  };