diff --git a/src/ec/packages/ec-component-text-area/__snapshots__/text-area.test.js.snap b/src/ec/packages/ec-component-text-area/__snapshots__/text-area.test.js.snap
index b8a4e9f26..f33377379 100644
--- a/src/ec/packages/ec-component-text-area/__snapshots__/text-area.test.js.snap
+++ b/src/ec/packages/ec-component-text-area/__snapshots__/text-area.test.js.snap
@@ -10,18 +10,17 @@ exports[`EC - Text area Default renders correctly 1`] = `
   >
     Label
   </label>
-  <textarea
-    class="ecl-text-area"
-    id="example-id"
-    name="example-name"
-    placeholder="Placeholder"
-    rows="4"
-  />
   <div
     class="ecl-help-block"
   >
     Help message
   </div>
+  <textarea
+    class="ecl-text-area ecl-text-area--m"
+    id="example-id"
+    name="example-name"
+    rows="4"
+  />
 </div>
 `;
 
@@ -35,20 +34,19 @@ exports[`EC - Text area Default renders correctly with a default value 1`] = `
   >
     Label
   </label>
+  <div
+    class="ecl-help-block"
+  >
+    Help message
+  </div>
   <textarea
-    class="ecl-text-area"
+    class="ecl-text-area ecl-text-area--m"
     id="example-id"
     name="example-name"
-    placeholder="Placeholder"
     rows="4"
   >
     Hello world!
   </textarea>
-  <div
-    class="ecl-help-block"
-  >
-    Help message
-  </div>
 </div>
 `;
 
@@ -62,20 +60,19 @@ exports[`EC - Text area Default renders correctly with extra attributes 1`] = `
   >
     Label
   </label>
+  <div
+    class="ecl-help-block"
+  >
+    Help message
+  </div>
   <textarea
-    class="ecl-text-area"
+    class="ecl-text-area ecl-text-area--m"
     data-test="data-test-value"
     data-test-1="data-test-value-1"
     id="example-id"
     name="example-name"
-    placeholder="Placeholder"
     rows="4"
   />
-  <div
-    class="ecl-help-block"
-  >
-    Help message
-  </div>
 </div>
 `;
 
@@ -89,18 +86,41 @@ exports[`EC - Text area Default renders correctly with extra class names 1`] = `
   >
     Label
   </label>
+  <div
+    class="ecl-help-block"
+  >
+    Help message
+  </div>
   <textarea
-    class="ecl-text-area custom-class custom-class--test"
+    class="ecl-text-area ecl-text-area--m custom-class custom-class--test"
     id="example-id"
     name="example-name"
-    placeholder="Placeholder"
     rows="4"
   />
+</div>
+`;
+
+exports[`EC - Text area Default renders correctly with extra group class names 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--text-area custom-group-class custom-group-class--test"
+>
+  <label
+    class="ecl-form-label"
+    for="example-id"
+  >
+    Label
+  </label>
   <div
     class="ecl-help-block"
   >
     Help message
   </div>
+  <textarea
+    class="ecl-text-area ecl-text-area--m"
+    id="example-id"
+    name="example-name"
+    rows="4"
+  />
 </div>
 `;
 
@@ -109,24 +129,23 @@ exports[`EC - Text area Disabled renders correctly 1`] = `
   class="ecl-form-group ecl-form-group--text-area"
 >
   <label
-    class="ecl-form-label"
+    class="ecl-form-label ecl-form-label--disabled"
     for="example-id"
   >
     Label
   </label>
+  <div
+    class="ecl-help-block ecl-help-block--disabled"
+  >
+    Help message
+  </div>
   <textarea
-    class="ecl-text-area"
+    class="ecl-text-area ecl-text-area--m"
     disabled=""
     id="example-id"
     name=""
-    placeholder="Placeholder"
     rows="4"
   />
-  <div
-    class="ecl-help-block"
-  >
-    Help message
-  </div>
 </div>
 `;
 
@@ -135,26 +154,25 @@ exports[`EC - Text area Disabled renders correctly with extra attributes 1`] = `
   class="ecl-form-group ecl-form-group--text-area"
 >
   <label
-    class="ecl-form-label"
+    class="ecl-form-label ecl-form-label--disabled"
     for="example-id"
   >
     Label
   </label>
+  <div
+    class="ecl-help-block ecl-help-block--disabled"
+  >
+    Help message
+  </div>
   <textarea
-    class="ecl-text-area"
+    class="ecl-text-area ecl-text-area--m"
     data-test="data-test-value"
     data-test-1="data-test-value-1"
     disabled=""
     id="example-id"
     name=""
-    placeholder="Placeholder"
     rows="4"
   />
-  <div
-    class="ecl-help-block"
-  >
-    Help message
-  </div>
 </div>
 `;
 
@@ -163,24 +181,48 @@ exports[`EC - Text area Disabled renders correctly with extra class names 1`] =
   class="ecl-form-group ecl-form-group--text-area"
 >
   <label
-    class="ecl-form-label"
+    class="ecl-form-label ecl-form-label--disabled"
     for="example-id"
   >
     Label
   </label>
+  <div
+    class="ecl-help-block ecl-help-block--disabled"
+  >
+    Help message
+  </div>
   <textarea
-    class="ecl-text-area custom-class custom-class--test"
+    class="ecl-text-area ecl-text-area--m custom-class custom-class--test"
     disabled=""
     id="example-id"
     name=""
-    placeholder="Placeholder"
     rows="4"
   />
+</div>
+`;
+
+exports[`EC - Text area Disabled renders correctly with extra group class names 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--text-area custom-group-class custom-group-class--test"
+>
+  <label
+    class="ecl-form-label ecl-form-label--disabled"
+    for="example-id"
+  >
+    Label
+  </label>
   <div
-    class="ecl-help-block"
+    class="ecl-help-block ecl-help-block--disabled"
   >
     Help message
   </div>
+  <textarea
+    class="ecl-text-area ecl-text-area--m"
+    disabled=""
+    id="example-id"
+    name=""
+    rows="4"
+  />
 </div>
 `;
 
@@ -194,23 +236,22 @@ exports[`EC - Text area With error renders correctly 1`] = `
   >
     Label
   </label>
-  <textarea
-    class="ecl-text-area ecl-text-area--invalid"
-    id="example-id"
-    name="example-name"
-    placeholder="Placeholder"
-    rows="4"
-  />
   <div
-    class="ecl-feedback-message"
+    class="ecl-help-block"
   >
-    Error message
+    Help message
   </div>
   <div
-    class="ecl-help-block"
+    class="ecl-feedback-message"
   >
-    Help message
+    Error message
   </div>
+  <textarea
+    class="ecl-text-area ecl-text-area--invalid ecl-text-area--m"
+    id="example-id"
+    name="example-name"
+    rows="4"
+  />
 </div>
 `;
 
@@ -224,25 +265,24 @@ exports[`EC - Text area With error renders correctly with extra attributes 1`] =
   >
     Label
   </label>
+  <div
+    class="ecl-help-block"
+  >
+    Help message
+  </div>
+  <div
+    class="ecl-feedback-message"
+  >
+    Error message
+  </div>
   <textarea
-    class="ecl-text-area ecl-text-area--invalid"
+    class="ecl-text-area ecl-text-area--invalid ecl-text-area--m"
     data-test="data-test-value"
     data-test-1="data-test-value-1"
     id="example-id"
     name="example-name"
-    placeholder="Placeholder"
     rows="4"
   />
-  <div
-    class="ecl-feedback-message"
-  >
-    Error message
-  </div>
-  <div
-    class="ecl-help-block"
-  >
-    Help message
-  </div>
 </div>
 `;
 
@@ -256,22 +296,50 @@ exports[`EC - Text area With error renders correctly with extra class names 1`]
   >
     Label
   </label>
+  <div
+    class="ecl-help-block"
+  >
+    Help message
+  </div>
+  <div
+    class="ecl-feedback-message"
+  >
+    Error message
+  </div>
   <textarea
-    class="ecl-text-area ecl-text-area--invalid custom-class custom-class--test"
+    class="ecl-text-area ecl-text-area--invalid ecl-text-area--m custom-class custom-class--test"
     id="example-id"
     name="example-name"
-    placeholder="Placeholder"
     rows="4"
   />
-  <div
-    class="ecl-feedback-message"
+</div>
+`;
+
+exports[`EC - Text area With error renders correctly with extra group class names 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--text-area custom-group-class custom-group-class--test"
+>
+  <label
+    class="ecl-form-label ecl-form-label--invalid"
+    for="example-id"
   >
-    Error message
-  </div>
+    Label
+  </label>
   <div
     class="ecl-help-block"
   >
     Help message
   </div>
+  <div
+    class="ecl-feedback-message"
+  >
+    Error message
+  </div>
+  <textarea
+    class="ecl-text-area ecl-text-area--invalid ecl-text-area--m"
+    id="example-id"
+    name="example-name"
+    rows="4"
+  />
 </div>
 `;
diff --git a/src/ec/packages/ec-component-text-area/docs/text-area.md b/src/ec/packages/ec-component-text-area/docs/text-area.md
index 4698a880d..73cc04637 100644
--- a/src/ec/packages/ec-component-text-area/docs/text-area.md
+++ b/src/ec/packages/ec-component-text-area/docs/text-area.md
@@ -15,9 +15,9 @@ npm install --save @ecl-twig/ec-component-text-area
 - "invalid" (boolean) (default: false)
 - "name" (string) (default: '')
 - "default_value" (string) (default: '')
-- "hide_label" (boolean) (default: '')
-- "placeholder" (string) (default: '')
 - "rows" (int) (default: 4)
+- "width" (string) (default: '') Input width size (s, m or l)
+- "extra_group_classes" (optional) (string) (default: '') Extra classes (space separated) for the text-area group
 - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the text area
 - "extra_attributes" (optional) (array) (default: []) Extra attributes for text area
   - "name" (string) Attribute name, eg. 'data-test'
@@ -27,6 +27,8 @@ npm install --save @ecl-twig/ec-component-text-area
 
 - "helper_text"
 - "invalid_text"
+- "required_text"
+- "optional_text"
 - "label"
 
 ### Example:
@@ -42,6 +44,8 @@ npm install --save @ecl-twig/ec-component-text-area
   name: 'comment', 
   default_value: 'Hello world!',
   rows: 4, 
+  width: 'm', 
+  extra_group_classes: 'my-extra-group-class-1 my-extra-group-class-2', 
   extra_classes: 'my-extra-class-1 my-extra-class-2', 
   extra_attributes: [ 
     { name: 'data-test-1', value: 'data-test-value-1' }, 
diff --git a/src/ec/packages/ec-component-text-area/text-area.html.twig b/src/ec/packages/ec-component-text-area/text-area.html.twig
index af1b90528..02a1c2fa0 100644
--- a/src/ec/packages/ec-component-text-area/text-area.html.twig
+++ b/src/ec/packages/ec-component-text-area/text-area.html.twig
@@ -5,11 +5,12 @@
   - "id" (string) (default: '')
   - "disabled" (boolean) (default: false)
   - "invalid" (boolean) (default: false)
+  - "required" (boolean) (default: false)
   - "name" (string) (default: '')
   - "default_value" (string) (default: '')
-  - "hide_label" (boolean) (default: '')
-  - "placeholder" (string) (default: '')
   - "rows" (int) (default: 4)
+  - "width" (string) (default: '')
+  - "extra_group_classes" (optional) (string) (default: '') Extra classes (space separated) for the text-area group
   - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the text area
   - "extra_attributes" (optional) (array) (default: []) Extra attributes for text area
     - "name" (string) Attribute name, eg. 'data-test'
@@ -17,6 +18,8 @@
   Blocks:
   - "helper_text"
   - "invalid_text"
+  - "required_text"
+  - "optional_text"
   - "label"
 #}
 
@@ -25,26 +28,31 @@
 {% set _id = id|default('') %}
 {% set _disabled = disabled|default(false) %}
 {% set _invalid = invalid|default(false) %}
+{% set _required = required|default(false) %}
 {% set _name = name|default('') %}
 {% set _default_value = default_value|default('') %}
-{% set _hide_label = hide_label|default(false) %}
-{% set _placeholder = placeholder|default('') %}
 {% set _rows = rows|default(4) %}
-
+{% set _width = width|default('m') %}
 {% set _helper_text = helper_text|default('') %}
 {% set _invalid_text = invalid_text|default('') %}
+{% set _required_text = required_text|default('') %}
+{% set _optional_text = optional_text|default('') %}
 {% set _label = label|default('') %}
-
+{% set _css_group_class = 'ecl-form-group ecl-form-group--text-area' %}
 {% set _css_class = ['ecl-text-area'] %}
 {% if _invalid %}
   {% set _css_class = _css_class|merge(['ecl-text-area--invalid']) %}
 {% endif %}
+{% set _css_class = _css_class|merge(['ecl-text-area--' ~ _width]) %}
 {% set _css_class = _css_class|join(' ') %}
-
 {% set _extra_attributes = '' %}
 
 {# Internal logic - Process properties #}
 
+{% if extra_group_classes is defined and extra_group_classes is not empty %}
+  {% set _css_group_class = _css_group_class ~ ' ' ~ extra_group_classes %}
+{% endif %}
+
 {% if extra_classes is defined and extra_classes is not empty %}
   {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
 {% endif %}
@@ -57,33 +65,41 @@
 
 {# Print the result #}
 
-<div class="ecl-form-group ecl-form-group--text-area">
+<div class="{{ _css_group_class }}">
   {% if _label is not empty %}
     <label
-      class="ecl-form-label{{ invalid ? ' ecl-form-label--invalid' }}{{ hide_label ? ' ecl-form-label--hidden' }}"
-      for="{{ _id }}"
+      {{ _id ? 'for="' ~ _id ~ '"' }}
+      class="ecl-form-label
+      {{- _invalid ? ' ecl-form-label--invalid' -}}
+      {{- _disabled ? ' ecl-form-label--disabled' -}}
+      "
     >
       {%- block label _label -%}
+      {%- if _required and _required_text is not empty -%}
+        <span class="ecl-form-label__required">{{ _required_text }}</span>
+      {%- elseif not _required and _optional_text is not empty -%}
+        <span class="ecl-form-label__optional">{{ ' ' ~ _optional_text }}</span>
+      {%- endif -%}
     </label>
   {% endif %}
 
+  {% if _helper_text is not empty %}
+    <div class="ecl-help-block{{ _disabled ? ' ecl-help-block--disabled' }}">{% block helper_text _helper_text %}</div>
+  {% endif %}
+
+  {% if _invalid and _invalid_text is not empty %}
+    <div class="ecl-feedback-message">{% block invalid_text _invalid_text %}</div>
+  {% endif %}
+
   <textarea
+    {{ _id ? 'id="' ~ _id ~ '"' }}
     class="{{ _css_class }}"
-    id="{{ _id }}"
     name="{{ _name }}"
     rows="{{ _rows }}"
-    {% if _placeholder is not empty %}placeholder="{{ _placeholder }}"{% endif %}
     {{ _disabled ? "disabled" }}
     {{ _extra_attributes|raw }}
   >{{ _default_value }}</textarea>
 
-  {% if _invalid and _invalid_text is not empty %}
-    <div class="ecl-feedback-message">{% block invalid_text _invalid_text %}</div>
-  {% endif %}
-
-  {% if _helper_text is not empty %}
-    <div class="ecl-help-block">{% block helper_text _helper_text %}</div>
-  {% endif %}
 </div>
 
 {% endspaceless %}
diff --git a/src/ec/packages/ec-component-text-area/text-area.story.js b/src/ec/packages/ec-component-text-area/text-area.story.js
index 5e55e8a35..e622cb337 100644
--- a/src/ec/packages/ec-component-text-area/text-area.story.js
+++ b/src/ec/packages/ec-component-text-area/text-area.story.js
@@ -1,30 +1,41 @@
 import { storiesOf } from '@storybook/html';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { withNotes } from '@ecl-twig/storybook-addon-notes';
 import withCode from '@ecl-twig/storybook-addon-code';
-
+import specData from '@ecl/ec-specs-text-area/demo/data--default';
 import textAreaDocs from './docs/text-area.md';
-
 import textArea from './text-area.html.twig';
 
+const inputWidthOptions = {
+  small: 's',
+  medium: 'm',
+  large: 'l',
+};
+
 storiesOf('Components/Forms/Text area', module)
   .addDecorator(withKnobs)
   .addDecorator(withNotes)
   .addDecorator(withCode)
   .add(
     'default',
-    () =>
-      textArea({
-        label: text('Label', 'Label'),
-        placeholder: text('Placeholder', 'Placeholder'),
+    () => {
+      const inputWidthSelect = select('Width', inputWidthOptions, 'm');
+
+      return textArea({
+        label: text('Label', specData.label),
+        rows: text('Rows', specData.rows),
+        helper_text: text('Help message', "This is the input's helper text."),
         invalid: boolean('Invalid', false),
-        invalid_text: text('Error message', 'Error message'),
-        helper_text: text('Help message', 'Help message'),
+        invalid_text: text('Invalid text', 'This is the error message'),
         disabled: boolean('Disabled', false),
-        hide_label: boolean('Hide label', false),
+        required: boolean('Required', false),
+        required_text: text('Required Text', '*'),
+        optional_text: text('Optional text', '(optional)'),
+        width: inputWidthSelect,
         id: 'example-id',
         name: 'example-name',
-      }),
+      });
+    },
     {
       notes: { markdown: textAreaDocs },
     }
diff --git a/src/ec/packages/ec-component-text-area/text-area.test.js b/src/ec/packages/ec-component-text-area/text-area.test.js
index 4cabb4692..5d8fe747f 100644
--- a/src/ec/packages/ec-component-text-area/text-area.test.js
+++ b/src/ec/packages/ec-component-text-area/text-area.test.js
@@ -29,6 +29,18 @@ describe('EC - Text area', () => {
       return expect(render(optionsWithDefaultValue)).resolves.toMatchSnapshot();
     });
 
+    test('renders correctly with extra group class names', () => {
+      expect.assertions(1);
+
+      const optionsWithExtraGroupClasses = merge(options, {
+        extra_group_classes: 'custom-group-class custom-group-class--test',
+      });
+
+      return expect(
+        render(optionsWithExtraGroupClasses)
+      ).resolves.toMatchSnapshot();
+    });
+
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
@@ -67,6 +79,18 @@ describe('EC - Text area', () => {
       return expect(render(options)).resolves.toMatchSnapshot();
     });
 
+    test('renders correctly with extra group class names', () => {
+      expect.assertions(1);
+
+      const optionsWithExtraGroupClasses = merge(options, {
+        extra_group_classes: 'custom-group-class custom-group-class--test',
+      });
+
+      return expect(
+        render(optionsWithExtraGroupClasses)
+      ).resolves.toMatchSnapshot();
+    });
+
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
@@ -107,6 +131,18 @@ describe('EC - Text area', () => {
       return expect(render(options)).resolves.toMatchSnapshot();
     });
 
+    test('renders correctly with extra group class names', () => {
+      expect.assertions(1);
+
+      const optionsWithExtraGroupClasses = merge(options, {
+        extra_group_classes: 'custom-group-class custom-group-class--test',
+      });
+
+      return expect(
+        render(optionsWithExtraGroupClasses)
+      ).resolves.toMatchSnapshot();
+    });
+
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
diff --git a/src/ec/packages/ec-component-text-input/text-input.html.twig b/src/ec/packages/ec-component-text-input/text-input.html.twig
index a933e0f23..1c7a88292 100644
--- a/src/ec/packages/ec-component-text-input/text-input.html.twig
+++ b/src/ec/packages/ec-component-text-input/text-input.html.twig
@@ -44,7 +44,7 @@
 {% if _invalid %}
   {% set _css_class = _css_class|merge(['ecl-text-input--invalid']) %}
 {% endif %}
-{% set _css_class = _css_class|merge(['ecl-text-input--' ~ _width ]) %}
+{% set _css_class = _css_class|merge(['ecl-text-input--' ~ _width]) %}
 {% set _css_class = _css_class|join(' ') %}
 
 {% set _extra_attributes = '' %}