From 7f111ed289c02c8a3b5c88020090abbd45e19185 Mon Sep 17 00:00:00 2001
From: donskov <donskovdmitriyv@gmail.com>
Date: Wed, 28 Feb 2024 18:40:02 +0200
Subject: [PATCH] chore(react-components): add default "id" generation for
 TextField and TextareaField

---
 .../__snapshots__/text_field.test.tsx.snap    | 180 +-------
 .../src/TextField/text_field.stories.tsx      |   5 -
 .../src/TextField/text_field.test.tsx         |  57 ++-
 .../src/TextField/text_field.tsx              |   8 +-
 .../textarea_field.test.tsx.snap              | 421 ++++++++++++++++++
 .../src/TextareaField/textarea_field.test.tsx |  43 +-
 .../src/TextareaField/textarea_field.tsx      |  16 +-
 7 files changed, 528 insertions(+), 202 deletions(-)

diff --git a/packages/react-components/src/TextField/__snapshots__/text_field.test.tsx.snap b/packages/react-components/src/TextField/__snapshots__/text_field.test.tsx.snap
index 6c261fc6..52f5769a 100644
--- a/packages/react-components/src/TextField/__snapshots__/text_field.test.tsx.snap
+++ b/packages/react-components/src/TextField/__snapshots__/text_field.test.tsx.snap
@@ -74,6 +74,7 @@ exports[`<TextField /> TextField render sizes size "large" 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -155,6 +156,7 @@ exports[`<TextField /> TextField render sizes size "medium" 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -236,6 +238,7 @@ exports[`<TextField /> TextField render sizes size "small" 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -318,6 +321,7 @@ exports[`<TextField /> TextField render variants should be disabled 1`] = `
     <input
       class="emotion-0"
       disabled=""
+      id="test-id"
       type="text"
       value=""
     />
@@ -401,6 +405,7 @@ exports[`<TextField /> TextField render variants should have className 1`] = `
   >
     <input
       class="input-cls emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -482,6 +487,7 @@ exports[`<TextField /> TextField render variants should have defaultValue 1`] =
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value="test-value"
     />
@@ -574,6 +580,7 @@ exports[`<TextField /> TextField render variants should have error alert 1`] = `
     <input
       aria-invalid="true"
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -586,88 +593,6 @@ exports[`<TextField /> TextField render variants should have error alert 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<TextField /> TextField render variants should have id 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  margin: 0;
-  color: var(--pv-color-black);
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  font-family: inherit;
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  padding: 0 var(--pv-size-base-2);
-  background-color: var(--pv-color-gray-1);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
-  transition: background-color 200ms,color 200ms,border-color 200ms;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  height: var(--pv-size-base-7);
-  color: var(--pv-color-black);
-  border-color: var(--pv-color-gray-8);
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0::-moz-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0::placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0:hover {
-  background-color: var(--pv-color-gray-3);
-  border-color: var(--pv-color-gray-7);
-}
-
-.emotion-0:disabled {
-  cursor: not-allowed;
-  background-color: var(--pv-color-gray-1);
-  border-color: var(--pv-color-gray-5);
-  color: var(--pv-color-gray-7);
-}
-
-.emotion-0:not(:disabled)[aria-invalid] {
-  background-color: var(--pv-color-wrong-tint-5);
-  border-color: var(--pv-color-wrong-tint-3);
-}
-
-.emotion-0:not(:disabled):focus-visible {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-<div>
-    <input
-      class="emotion-0"
-      id="test-id"
-      type="text"
-      value=""
-    />
-  </div>
-</DocumentFragment>
-`;
-
 exports[`<TextField /> TextField render variants should have label 1`] = `
 <DocumentFragment>
   .emotion-0 {
@@ -756,6 +681,8 @@ exports[`<TextField /> TextField render variants should have label 1`] = `
 <div>
     <label
       class="emotion-0"
+      for="test-id"
+      id="test-id-label"
     >
       <span
         class="emotion-1"
@@ -765,6 +692,7 @@ exports[`<TextField /> TextField render variants should have label 1`] = `
     </label>
     <input
       class="emotion-2"
+      id="test-id"
       type="text"
       value=""
     />
@@ -846,6 +774,7 @@ exports[`<TextField /> TextField render variants should have name attr 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       name="test-name"
       type="text"
       value=""
@@ -928,6 +857,7 @@ exports[`<TextField /> TextField render variants should have placeholder 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       placeholder="test-placeholder"
       type="text"
       value=""
@@ -1010,6 +940,7 @@ exports[`<TextField /> TextField render variants should have required 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       required=""
       type="text"
       value=""
@@ -1018,89 +949,6 @@ exports[`<TextField /> TextField render variants should have required 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<TextField /> TextField render variants should have test id 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  margin: 0;
-  color: var(--pv-color-black);
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  font-family: inherit;
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  padding: 0 var(--pv-size-base-2);
-  background-color: var(--pv-color-gray-1);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
-  transition: background-color 200ms,color 200ms,border-color 200ms;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  height: var(--pv-size-base-7);
-  color: var(--pv-color-black);
-  border-color: var(--pv-color-gray-8);
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0::-moz-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0::placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0:hover {
-  background-color: var(--pv-color-gray-3);
-  border-color: var(--pv-color-gray-7);
-}
-
-.emotion-0:disabled {
-  cursor: not-allowed;
-  background-color: var(--pv-color-gray-1);
-  border-color: var(--pv-color-gray-5);
-  color: var(--pv-color-gray-7);
-}
-
-.emotion-0:not(:disabled)[aria-invalid] {
-  background-color: var(--pv-color-wrong-tint-5);
-  border-color: var(--pv-color-wrong-tint-3);
-}
-
-.emotion-0:not(:disabled):focus-visible {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-<div
-    data-testid="test-id"
-  >
-    <input
-      class="emotion-0"
-      type="text"
-      value=""
-    />
-  </div>
-</DocumentFragment>
-`;
-
 exports[`<TextField /> TextField render variants should have value 1`] = `
 <DocumentFragment>
   .emotion-0 {
@@ -1175,6 +1023,7 @@ exports[`<TextField /> TextField render variants should have value 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value="test-value"
     />
@@ -1256,6 +1105,7 @@ exports[`<TextField /> TextField render variants should render as default 1`] =
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
diff --git a/packages/react-components/src/TextField/text_field.stories.tsx b/packages/react-components/src/TextField/text_field.stories.tsx
index f933f627..389c29bb 100644
--- a/packages/react-components/src/TextField/text_field.stories.tsx
+++ b/packages/react-components/src/TextField/text_field.stories.tsx
@@ -27,30 +27,25 @@ export const FormExample = () => (
       defaultValue="Hello World"
       required
       label="Required"
-      id="TextField-required"
     />
     <TextField
       defaultValue="Hello World"
       type="password"
       label="Password"
-      id="TextField-password"
     />
     <TextField
       type="number"
       label="Number"
-      id="TextField-number"
     />
     <TextField
       defaultValue="Hello World"
       readOnly
       label="Read Only"
-      id="TextField-readOnly"
     />
     <TextField
       defaultValue="Hello World"
       disabled
       label="Disabled"
-      id="TextField-disabled"
     />
   </>
 );
diff --git a/packages/react-components/src/TextField/text_field.test.tsx b/packages/react-components/src/TextField/text_field.test.tsx
index 79277643..ea95b746 100644
--- a/packages/react-components/src/TextField/text_field.test.tsx
+++ b/packages/react-components/src/TextField/text_field.test.tsx
@@ -5,7 +5,7 @@ import { TextField } from './index';
 describe('<TextField />', () => {
   describe('TextField render variants', () => {
     it('should render as default', () => {
-      const { asFragment } = render(<TextField />);
+      const { asFragment } = render(<TextField id="test-id" />);
 
       const input = screen.getByRole('textbox');
 
@@ -17,43 +17,42 @@ describe('<TextField />', () => {
     });
 
     it('should have label', () => {
-      const { asFragment } = render(<TextField label="Test label" />);
-
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it('should have id', () => {
-      const { asFragment } = render(<TextField id="test-id" />);
+      const { asFragment } = render(
+        <TextField
+          label="Test label"
+          id="test-id"
+        />,
+      );
 
       expect(asFragment()).toMatchSnapshot();
     });
 
     it('should be disabled', () => {
-      const { asFragment } = render(<TextField disabled />);
+      const { asFragment } = render(<TextField disabled id="test-id" />);
 
       expect(asFragment()).toMatchSnapshot();
     });
 
     it('should have required', () => {
-      const { asFragment } = render(<TextField required />);
+      const { asFragment } = render(<TextField required id="test-id" />);
 
       expect(asFragment()).toMatchSnapshot();
     });
 
     it('should have name attr', () => {
-      const { asFragment } = render(<TextField name="test-name" />);
-
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it('should have test id', () => {
-      const { asFragment } = render(<TextField data-testid="test-id" />);
+      const { asFragment } = render(<TextField name="test-name" id="test-id" />);
 
       expect(asFragment()).toMatchSnapshot();
     });
 
     it('should have className', () => {
-      const { asFragment } = render(<TextField className="div-cls" inputProps={{ className: 'input-cls' }} />);
+      const { asFragment } = render(
+        <TextField
+          className="div-cls"
+          id="test-id"
+          inputProps={{ className: 'input-cls' }}
+        />,
+      );
 
       expect(asFragment()).toMatchSnapshot();
     });
@@ -79,7 +78,7 @@ describe('<TextField />', () => {
     });
 
     it('should have placeholder', () => {
-      const { asFragment } = render(<TextField placeholder="test-placeholder" />);
+      const { asFragment } = render(<TextField placeholder="test-placeholder" id="test-id" />);
 
       const input = screen.getByRole('textbox');
 
@@ -89,7 +88,7 @@ describe('<TextField />', () => {
     });
 
     it('should have defaultValue', () => {
-      const { asFragment } = render(<TextField defaultValue="test-value" />);
+      const { asFragment } = render(<TextField defaultValue="test-value" id="test-id" />);
 
       const input = screen.getByRole('textbox');
 
@@ -101,7 +100,13 @@ describe('<TextField />', () => {
     it('should have value', () => {
       const onChange = jest.fn();
 
-      const { asFragment } = render(<TextField value="test-value" onChange={onChange} />);
+      const { asFragment } = render(
+        <TextField
+          value="test-value"
+          onChange={onChange}
+          id="test-id"
+        />,
+      );
 
       const input = screen.getByRole('textbox');
 
@@ -111,7 +116,13 @@ describe('<TextField />', () => {
     });
 
     it('should have error alert', () => {
-      const { asFragment } = render(<TextField error errorText="Error message" />);
+      const { asFragment } = render(
+        <TextField
+          error
+          errorText="Error message"
+          id="test-id"
+        />,
+      );
 
       expect(screen.getByText('Error message')).toBeInTheDocument();
 
@@ -129,7 +140,7 @@ describe('<TextField />', () => {
     sizes.forEach((size) => {
       it(`size "${size}"`, () => {
         const { asFragment } = render(
-          <TextField size={size} />,
+          <TextField size={size} id="test-id" />,
         );
 
         expect(asFragment()).toMatchSnapshot();
diff --git a/packages/react-components/src/TextField/text_field.tsx b/packages/react-components/src/TextField/text_field.tsx
index 031b599b..bb9c7ddc 100644
--- a/packages/react-components/src/TextField/text_field.tsx
+++ b/packages/react-components/src/TextField/text_field.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { Typography } from '../Typography';
+import { useId } from '../hooks/use_id';
 
 /**
  * Types.
@@ -35,7 +36,7 @@ type TextFieldOwnProps = {
    */
   id?: string;
   /**
-   * The label of the input. It is only used for layout.
+   * The label content.
    */
   label?: string;
   /**
@@ -192,7 +193,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
     inputProps = {},
     disabled,
     defaultValue,
-    id,
+    id: idProp,
     value,
     placeholder,
     required,
@@ -206,6 +207,8 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
     onChange,
     ...other
   } = props;
+  const id = useId(idProp);
+  const inputLabelId = label && id ? `${id}-label` : undefined;
 
   return (
     <div
@@ -215,6 +218,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
       {label && (
         <TextFieldLabel
           htmlFor={id}
+          id={inputLabelId}
         >
           <Typography
             component="span"
diff --git a/packages/react-components/src/TextareaField/__snapshots__/textarea_field.test.tsx.snap b/packages/react-components/src/TextareaField/__snapshots__/textarea_field.test.tsx.snap
index fd2d0982..39dcd6b1 100644
--- a/packages/react-components/src/TextareaField/__snapshots__/textarea_field.test.tsx.snap
+++ b/packages/react-components/src/TextareaField/__snapshots__/textarea_field.test.tsx.snap
@@ -1,5 +1,425 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<TextareaField /> should be disabled 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: var(--pv-size-base) var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  resize: none;
+  min-height: var(--pv-size-base-14);
+  color: var(--pv-color-black);
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+<div>
+    <textarea
+      class="emotion-0"
+      disabled=""
+      id="test-id"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<TextareaField /> should have className 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: var(--pv-size-base) var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  resize: none;
+  min-height: var(--pv-size-base-14);
+  color: var(--pv-color-black);
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+<div
+    class="div-cls"
+  >
+    <textarea
+      class="input-cls emotion-0"
+      id="test-id"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<TextareaField /> should have label 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin-bottom: 2px;
+  display: inline-block;
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-gray-10);
+  font-weight: var(--pv-text-c2-weight);
+  font-size: var(--pv-text-c2-size);
+  line-height: var(--pv-text-c2-height);
+  letter-spacing: var(--pv-text-c2-spacing);
+}
+
+.emotion-2 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: var(--pv-size-base) var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  resize: none;
+  min-height: var(--pv-size-base-14);
+  color: var(--pv-color-black);
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-2::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-2::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-2:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-2::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-2:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-2:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-2:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+<div>
+    <label
+      class="emotion-0"
+      for="test-id"
+      id="test-id-label"
+    >
+      <span
+        class="emotion-1"
+      >
+        Test label
+      </span>
+    </label>
+    <textarea
+      class="emotion-2"
+      id="test-id"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<TextareaField /> should have name attr 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: var(--pv-size-base) var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  resize: none;
+  min-height: var(--pv-size-base-14);
+  color: var(--pv-color-black);
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+<div>
+    <textarea
+      class="emotion-0"
+      id="test-id"
+      name="test-name"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<TextareaField /> should have required 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: var(--pv-size-base) var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  resize: none;
+  min-height: var(--pv-size-base-14);
+  color: var(--pv-color-black);
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+<div>
+    <textarea
+      class="emotion-0"
+      id="test-id"
+      required=""
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<TextareaField /> should render with default styles 1`] = `
 <DocumentFragment>
   .emotion-0 {
@@ -72,6 +492,7 @@ exports[`<TextareaField /> should render with default styles 1`] = `
 <div>
     <textarea
       class="emotion-0"
+      id="test-id"
     />
   </div>
 </DocumentFragment>
diff --git a/packages/react-components/src/TextareaField/textarea_field.test.tsx b/packages/react-components/src/TextareaField/textarea_field.test.tsx
index 9c21e008..646c4d0e 100644
--- a/packages/react-components/src/TextareaField/textarea_field.test.tsx
+++ b/packages/react-components/src/TextareaField/textarea_field.test.tsx
@@ -4,7 +4,48 @@ import { TextareaField } from './index';
 
 describe('<TextareaField />', () => {
   it('should render with default styles', () => {
-    const { asFragment } = render(<TextareaField />);
+    const { asFragment } = render(<TextareaField id="test-id" />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should have label', () => {
+    const { asFragment } = render(
+      <TextareaField
+        label="Test label"
+        id="test-id"
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should be disabled', () => {
+    const { asFragment } = render(<TextareaField disabled id="test-id" />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should have required', () => {
+    const { asFragment } = render(<TextareaField required id="test-id" />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should have name attr', () => {
+    const { asFragment } = render(<TextareaField name="test-name" id="test-id" />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should have className', () => {
+    const { asFragment } = render(
+      <TextareaField
+        className="div-cls"
+        id="test-id"
+        inputProps={{ className: 'input-cls' }}
+      />,
+    );
 
     expect(asFragment()).toMatchSnapshot();
   });
diff --git a/packages/react-components/src/TextareaField/textarea_field.tsx b/packages/react-components/src/TextareaField/textarea_field.tsx
index 90e7cc7a..20d04c30 100644
--- a/packages/react-components/src/TextareaField/textarea_field.tsx
+++ b/packages/react-components/src/TextareaField/textarea_field.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { Typography } from '../Typography';
+import { useId } from '../hooks/use_id';
 
 /**
  * Types.
@@ -35,13 +36,9 @@ type TextareaFieldOwnProps = {
    */
   id?: string;
   /**
-   * The label of the input. It is only used for layout.
+   * The label content.
    */
   label?: string;
-  /**
-   * Callback fired when the value is changed.
-   */
-  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
   /**
    * The value of the `input` element, required for a controlled component.
    */
@@ -76,6 +73,10 @@ type TextareaFieldOwnProps = {
    * the field (not from interacting with the field).
    */
   readOnly?: boolean;
+  /**
+   * Callback fired when the value is changed.
+   */
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>
 };
 
 type TextareaFieldProps = TextareaFieldOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'>;
@@ -188,7 +189,7 @@ export const TextareaField = React.forwardRef<HTMLDivElement, TextareaFieldProps
     inputProps = {},
     disabled,
     defaultValue,
-    id,
+    id: idProp,
     value,
     placeholder,
     required,
@@ -201,6 +202,8 @@ export const TextareaField = React.forwardRef<HTMLDivElement, TextareaFieldProps
     onChange,
     ...other
   } = props;
+  const id = useId(idProp);
+  const inputLabelId = label && id ? `${id}-label` : undefined;
 
   return (
     <div
@@ -210,6 +213,7 @@ export const TextareaField = React.forwardRef<HTMLDivElement, TextareaFieldProps
       {label && (
         <TextareaFieldLabel
           htmlFor={id}
+          id={inputLabelId}
         >
           <Typography
             component="span"