diff --git a/src/components/Form/Textarea.tsx b/src/components/Form/Textarea.tsx
deleted file mode 100644
index 01d66ecb1..000000000
--- a/src/components/Form/Textarea.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { Component, ChangeEvent, FocusEvent } from 'react';
-import {
-  HtmlLabel,
-  HtmlTextarea,
-  HtmlTextareaProps,
-  HtmlSpan,
-  HtmlDiv,
-} from '../../reset';
-import { VisuallyHidden } from '../Visually-hidden/Visually-hidden';
-import { Paragraph } from '../Paragraph/Paragraph';
-import classnames from 'classnames';
-import { idGenerator } from '../../utils/uuid';
-
-const baseClassName = 'fi-textarea';
-const textareaClassNames = {
-  label: `${baseClassName}_label`,
-  optionalText: `${baseClassName}_optionalText`,
-  textareaContainer: `${baseClassName}_textarea-element-container`,
-  textarea: `${baseClassName}_textarea`,
-  hintText: `${baseClassName}_hintText`,
-  statusText: `${baseClassName}_statusText`,
-};
-
-export interface TextareaProps extends HtmlTextareaProps {
-  /** Custom classname to extend or customize */
-  className?: string;
-  /** Disable usage */
-  disabled?: boolean;
-  /** Event handler to execute when clicked */
-  onClick?: () => void;
-  /** To execute on textarea text change */
-  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
-  /** To execute on textarea text onBlur */
-  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
-  /** Label */
-  labelText: string;
-  /** Hide or show label. Label element is always present, but can be visually hidden.
-   * @default visible
-   */
-  labelMode?: 'hidden' | 'visible';
-  /** Placeholder text for input. Use only as visual aid, not for instructions. */
-  visualPlaceholder?: string;
-  /** Text content for textarea */
-  children?: string;
-  /** Hint text to be shown below the component */
-  hintText?: string;
-  /**
-   * 'default' | 'error'
-   * @default default
-   */
-  status?: 'default' | 'error';
-  /** Status text to be shown below the component and hint text. Use e.g. for validation error */
-  statusText?: string;
-  /** Resize mode of the textarea
-      'both' | 'vertical' | 'horizontal' | 'none'
-      @default 'vertical' 
-   */
-  resize?: 'both' | 'vertical' | 'horizontal' | 'none';
-  /** Optional text that is shown after labelText. Will be wrapped in parentheses. */
-  optionalText?: string;
-  /** Unique id
-   * @default uuidV4
-   */
-  id?: string;
-  /** Input name */
-  name?: string;
-}
-
-export class Textarea extends Component<TextareaProps> {
-  labelText = (forId: string) => {
-    const { labelMode, labelText, optionalText } = this.props;
-    const hideLabel = labelMode === 'hidden';
-
-    return hideLabel ? (
-      <HtmlLabel htmlFor={forId}>
-        <VisuallyHidden>
-          {labelText}
-          {optionalText && `(${optionalText})`}
-        </VisuallyHidden>
-      </HtmlLabel>
-    ) : (
-      <HtmlLabel htmlFor={forId}>
-        <Paragraph>
-          <HtmlSpan className={textareaClassNames.label}>{labelText}</HtmlSpan>
-          {optionalText && (
-            <HtmlSpan className={textareaClassNames.optionalText}>
-              {` (${optionalText})`}
-            </HtmlSpan>
-          )}
-        </Paragraph>
-      </HtmlLabel>
-    );
-  };
-
-  hintText = (id: string) => {
-    const { hintText } = this.props;
-
-    return (
-      hintText && (
-        <HtmlSpan className={textareaClassNames.hintText} id={id}>
-          {hintText}
-        </HtmlSpan>
-      )
-    );
-  };
-
-  statusText = (id: string) => {
-    const { statusText, disabled } = this.props;
-    return (
-      statusText &&
-      !disabled && (
-        <HtmlSpan className={textareaClassNames.statusText} id={id}>
-          {statusText}
-        </HtmlSpan>
-      )
-    );
-  };
-
-  render() {
-    const {
-      id: propId,
-      className,
-      disabled = false,
-      children,
-      onClick,
-      labelMode,
-      labelText,
-      hintText,
-      status,
-      statusText,
-      visualPlaceholder,
-      resize: dismissResize,
-      optionalText,
-      ...passProps
-    } = this.props;
-
-    const onClickProps = !!disabled ? {} : { onMouseDown: onClick };
-    const id = idGenerator(propId);
-    const statusTextId = `${id}-statusText`;
-    const hintTextId = `${id}-hintText`;
-
-    const getDescribedBy = () => {
-      if (statusText || hintText || this.props['aria-describedby']) {
-        return {
-          'aria-describedby': [
-            ...(statusText ? [statusTextId] : []),
-            ...(hintText ? [hintTextId] : []),
-            this.props['aria-describedby'],
-          ].join(' '),
-        };
-      }
-      return {};
-    };
-
-    return (
-      <HtmlDiv className={classnames(baseClassName, className, {})}>
-        {this.labelText(id)}
-        {this.hintText(hintTextId)}
-        <HtmlDiv className={textareaClassNames.textareaContainer}>
-          <HtmlTextarea
-            id={id}
-            className={textareaClassNames.textarea}
-            disabled={disabled}
-            defaultValue={children}
-            placeholder={visualPlaceholder}
-            {...{ 'aria-invalid': status === 'error' }}
-            {...getDescribedBy()}
-            {...passProps}
-            {...onClickProps}
-          />
-        </HtmlDiv>
-        {this.statusText(statusTextId)}
-      </HtmlDiv>
-    );
-  }
-}
diff --git a/src/components/index.ts b/src/components/index.ts
index f5822ddda..702537451 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -28,7 +28,6 @@ export {
 export { Expander, ExpanderProps } from './Expander/Expander';
 export { Paragraph, ParagraphProps } from './Paragraph/Paragraph';
 export { Text, TextProps } from './Text/Text';
-export { Textarea, TextareaProps } from './Form/Textarea';
 export { VisuallyHidden } from './Visually-hidden/Visually-hidden';
 export { RadioButton, RadioButtonProps } from './Form/RadioButton';
 export {
diff --git a/src/components/utils/aria.ts b/src/components/utils/aria.ts
deleted file mode 100644
index 39e406322..000000000
--- a/src/components/utils/aria.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-const ifAriaNoLabel = (ariaLabel?: string) => !!ariaLabel || ariaLabel === '';
-
-export const ariaLabelOrHidden = (ariaLabel?: string) => {
-  return ifAriaNoLabel(ariaLabel)
-    ? { 'aria-label': ariaLabel, role: 'img' }
-    : { 'aria-hidden': true };
-};
-
-/**
- * Set element ability to be focusable based on aria-label
- * @param {String} ariaLabel optional aria-label
- */
-export const ariaFocusableNoLabel = (ariaLabel?: string) => {
-  return ifAriaNoLabel(ariaLabel) ? {} : { focusable: false };
-};
diff --git a/src/core/Form/Textarea/Textarea.baseStyles.tsx b/src/core/Form/Textarea/Textarea.baseStyles.tsx
index a981afc6c..7f0a9cca5 100644
--- a/src/core/Form/Textarea/Textarea.baseStyles.tsx
+++ b/src/core/Form/Textarea/Textarea.baseStyles.tsx
@@ -15,21 +15,14 @@ export const baseStyles = withSuomifiTheme(
       display: flex;
       flex-direction: column;
       color: ${theme.colors.blackBase};
+      width: 290px;
 
-      & .fi-textarea_label {
-        ${font({ theme })('actionElementInnerTextBold')};
-        color: ${theme.colors.blackBase};
+      & .fi-label-text_label-span {
+        margin-bottom: 0;
       }
 
-      & .fi-textarea_optionalText {
-        ${theme.typography.bodyTextSmall};
-      }
-
-      & .fi-textarea_hintText {
-        display: block;
-        color: ${theme.colors.blackBase};
-        ${theme.typography.bodyTextSmall};
-        word-break: break-word;
+      & .fi-hint-text {
+        margin-bottom: 0;
       }
 
       & .fi-textarea_textarea-element-container {
@@ -65,13 +58,9 @@ export const baseStyles = withSuomifiTheme(
         }
       }
 
-      & .fi-textarea_statusText {
+      & .fi-status-text {
         display: block;
-        margin-top: ${theme.spacing.xxs};
-        font-size: 14px;
         line-height: 18px;
-        font-weight: 600;
-        word-break: break-word;
       }
 
       &.fi-textarea--disabled {
@@ -87,11 +76,11 @@ export const baseStyles = withSuomifiTheme(
         & .fi-textarea_textarea {
           border: 2px solid ${theme.colors.alertBase};
         }
-
-        & .fi-textarea_statusText {
-          color: ${theme.colors.alertBase};
-        }
       }
     }
+
+    &.fi-textarea--full-width {
+      width: 100%;
+    }
   `,
 );
diff --git a/src/core/Form/Textarea/Textarea.md b/src/core/Form/Textarea/Textarea.md
index e7b1fbab2..0f185457f 100644
--- a/src/core/Form/Textarea/Textarea.md
+++ b/src/core/Form/Textarea/Textarea.md
@@ -55,3 +55,22 @@ import { Textarea } from 'suomifi-ui-components';
   </Textarea>
 </>;
 ```
+
+```js
+import { Textarea } from 'suomifi-ui-components';
+
+<>
+  <Textarea labelText="Textarea with 100% width" fullWidth>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+    vestibulum iaculis augue, sit amet tincidunt ipsum.
+  </Textarea>
+
+  <Textarea
+    labelText="Textarea with fixed width of 250px"
+    containerProps={{ style: { width: '250px' } }}
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+    vestibulum iaculis augue, sit amet tincidunt ipsum.
+  </Textarea>
+</>;
+```
diff --git a/src/core/Form/Textarea/Textarea.test.tsx b/src/core/Form/Textarea/Textarea.test.tsx
index 329552a7b..ba7f4479e 100644
--- a/src/core/Form/Textarea/Textarea.test.tsx
+++ b/src/core/Form/Textarea/Textarea.test.tsx
@@ -31,7 +31,20 @@ describe('props', () => {
     it('should have label text with correct class', () => {
       const { getByText } = render(DefaultTextareaComponent);
       const label = getByText('Label here');
-      expect(label).toHaveClass('fi-textarea_label');
+      expect(label).toHaveClass('fi-label-text_label-span');
+    });
+
+    it('has user given aria-describedby on textarea', () => {
+      const { getByRole } = render(
+        <Textarea
+          labelText="Label here"
+          aria-describedby="external-component-id"
+        />,
+      );
+      expect(getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        'external-component-id',
+      );
     });
 
     it(
@@ -109,7 +122,7 @@ describe('props', () => {
   });
 
   describe('labelMode', () => {
-    it('hidden: should hide visually-hidden classname   ', () => {
+    it('hidden: should hide label; label to have visually-hidden classname', () => {
       const { getByText } = render(
         <Textarea labelText="To be hidden" labelMode="hidden" />,
       );
@@ -147,7 +160,17 @@ describe('props', () => {
         <Textarea labelText="label" hintText="Example hint text" />,
       );
       const hintText = getByText('Example hint text');
-      expect(hintText).toHaveClass('fi-textarea_hintText');
+      expect(hintText).toHaveClass('fi-hint-text');
+    });
+
+    it('will be added to input aria-describedby', () => {
+      const { getByRole } = render(
+        <Textarea id="123" labelText="label" hintText="Example hint text" />,
+      );
+      expect(getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        '123-hintText',
+      );
     });
   });
 
@@ -157,7 +180,21 @@ describe('props', () => {
         <Textarea labelText="label" statusText="EROR EROR" />,
       );
       const statusText = getByText('EROR EROR');
-      expect(statusText).toHaveClass('fi-textarea_statusText');
+      expect(statusText).toHaveClass('fi-status-text');
+    });
+
+    it('will be added to input aria-describedby', () => {
+      const { getByRole } = render(
+        <Textarea
+          id="123"
+          labelText="label"
+          statusText="Example status text"
+        />,
+      );
+      expect(getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        '123-statusText',
+      );
     });
   });
 
@@ -176,7 +213,7 @@ describe('props', () => {
         <Textarea labelText="label" optionalText="Optional" />,
       );
       const optionalText = getByText('(Optional)');
-      expect(optionalText).toHaveClass('fi-textarea_optionalText');
+      expect(optionalText).toHaveClass('fi-label-text_optionalText');
     });
   });
 
@@ -213,6 +250,7 @@ describe('props', () => {
       expect(textarea).toHaveStyle('resize: none');
     });
   });
+
   describe('name', () => {
     it('has the given name attribute', () => {
       const { getByRole } = render(
@@ -222,4 +260,32 @@ describe('props', () => {
       expect(textarea.name).toBe('test-name');
     });
   });
+
+  describe('id', () => {
+    it('has the given id', () => {
+      const { getByRole } = render(
+        <Textarea labelText="label" id="custom-id" />,
+      );
+      expect(getByRole('textbox')).toHaveAttribute('id', 'custom-id');
+    });
+  });
+
+  describe('fullWidth', () => {
+    it('has the required classname', () => {
+      const { container } = render(<Textarea labelText="label" fullWidth />);
+      expect(container.firstChild).toHaveClass('fi-textarea--full-width');
+    });
+  });
+
+  describe('containerProps', () => {
+    it('has the given props on the container', () => {
+      const { container } = render(
+        <Textarea
+          labelText="label"
+          containerProps={{ style: { width: '100px' } }}
+        />,
+      );
+      expect(container.firstChild).toHaveAttribute('style', 'width: 100px;');
+    });
+  });
 });
diff --git a/src/core/Form/Textarea/Textarea.tsx b/src/core/Form/Textarea/Textarea.tsx
index f8d77f99e..596556412 100644
--- a/src/core/Form/Textarea/Textarea.tsx
+++ b/src/core/Form/Textarea/Textarea.tsx
@@ -1,52 +1,170 @@
-import React, { Component } from 'react';
+import React, { Component, ChangeEvent, FocusEvent } from 'react';
 import { default as styled } from 'styled-components';
+import classnames from 'classnames';
 import { TokensProp, InternalTokensProp } from '../../theme';
-import {
-  Textarea as CompTextarea,
-  TextareaProps as CompTextareaProps,
-} from '../../../components/Form/Textarea';
 import { baseStyles } from './Textarea.baseStyles';
 import { withSuomifiDefaultProps } from '../../theme/utils';
-import classnames from 'classnames';
+import {
+  HtmlTextarea,
+  HtmlTextareaProps,
+  HtmlDiv,
+  HtmlDivProps,
+} from '../../../reset';
+import { AutoId } from '../../../utils/AutoId';
+import { LabelText } from '../LabelText/LabelText';
+import { HintText } from '../HintText/HintText';
+import { StatusText } from '../StatusText/StatusText';
+import { InputStatus } from '../types';
+import { getAriaDescribedByProp } from '../../../utils/aria';
 
 const baseClassName = 'fi-textarea';
-
 const textareaClassNames = {
+  fullWidth: `${baseClassName}--full-width`,
+  textareaContainer: `${baseClassName}_textarea-element-container`,
+  textarea: `${baseClassName}_textarea`,
   disabled: `${baseClassName}--disabled`,
   error: `${baseClassName}--error`,
 };
 
-export interface TextareaProps extends CompTextareaProps, TokensProp {}
+type TextareaStatus = Exclude<InputStatus, 'success'>;
 
-const StyledTextarea = styled(
-  ({ tokens, ...passProps }: TextareaProps & InternalTokensProp) => (
-    <CompTextarea {...passProps} />
-  ),
-)`
-  ${(props) => baseStyles(props)}
-`;
+export interface TextareaProps
+  extends Omit<HtmlTextareaProps, 'placeholder'>,
+    TokensProp {
+  /** Custom classname to extend or customize */
+  className?: string;
+  /** Disable usage */
+  disabled?: boolean;
+  /** Event handler to execute when clicked */
+  onClick?: () => void;
+  /** To execute on textarea text change */
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  /** To execute on textarea text onBlur */
+  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+  /** Label */
+  labelText: string;
+  /** Hide or show label. Label element is always present, but can be visually hidden.
+   * @default visible
+   */
+  labelMode?: 'hidden' | 'visible';
+  /** Placeholder text for input. Use only as visual aid, not for instructions. */
+  visualPlaceholder?: string;
+  /** Text content for textarea */
+  children?: string;
+  /** Hint text to be shown below the component */
+  hintText?: string;
+  /**
+   * 'default' | 'error'
+   * @default default
+   */
+  status?: TextareaStatus;
+  /** Status text to be shown below the component and hint text. Use e.g. for validation error */
+  statusText?: string;
+  /** Resize mode of the textarea
+      'both' | 'vertical' | 'horizontal' | 'none'
+      @default 'vertical' 
+   */
+  resize?: 'both' | 'vertical' | 'horizontal' | 'none';
+  /** Optional text that is shown after labelText. Will be wrapped in parentheses. */
+  optionalText?: string;
+  /**
+   * Unique id
+   * If no id is specified, one will be generated automatically
+   */
+  id?: string;
+  /** Input name */
+  name?: string;
+  /** Set components width to 100% */
+  fullWidth?: boolean;
+  /** Textarea container div props */
+  containerProps?: Omit<HtmlDivProps, 'className'>;
+}
 
-export class Textarea extends Component<TextareaProps> {
+class BaseTextarea extends Component<TextareaProps> {
   render() {
     const {
-      children,
+      id,
+      className,
       disabled = false,
+      children,
+      onClick,
+      labelMode,
+      labelText,
+      hintText,
       status,
-      className,
+      statusText,
+      visualPlaceholder,
+      resize,
+      optionalText,
+      'aria-describedby': ariaDescribedBy,
+      fullWidth,
+      containerProps,
       ...passProps
-    } = withSuomifiDefaultProps(this.props);
+    } = this.props;
+
+    const onClickProps = !!disabled ? {} : { onMouseDown: onClick };
+    const statusTextId = statusText ? `${id}-statusText` : undefined;
+    const hintTextId = hintText ? `${id}-hintText` : undefined;
+
     return (
-      <StyledTextarea
-        disabled={disabled}
-        className={classnames(className, {
+      <HtmlDiv
+        {...containerProps}
+        className={classnames(baseClassName, className, {
           [textareaClassNames.disabled]: !!disabled,
           [textareaClassNames.error]: status === 'error' && !disabled,
+          [textareaClassNames.fullWidth]: fullWidth,
         })}
-        status={status}
-        {...passProps}
       >
-        {children}
-      </StyledTextarea>
+        <LabelText
+          htmlFor={id}
+          labelMode={labelMode}
+          as="label"
+          optionalText={optionalText}
+        >
+          {labelText}
+        </LabelText>
+        <HintText id={hintTextId}>{hintText}</HintText>
+        <HtmlDiv className={textareaClassNames.textareaContainer}>
+          <HtmlTextarea
+            id={id}
+            className={textareaClassNames.textarea}
+            disabled={disabled}
+            defaultValue={children}
+            placeholder={visualPlaceholder}
+            {...{ 'aria-invalid': status === 'error' }}
+            {...getAriaDescribedByProp([
+              statusTextId,
+              hintTextId,
+              ariaDescribedBy,
+            ])}
+            {...passProps}
+            {...onClickProps}
+          />
+        </HtmlDiv>
+        <StatusText id={statusTextId} status={status}>
+          {statusText}
+        </StatusText>
+      </HtmlDiv>
     );
   }
 }
+
+const StyledTextarea = styled(
+  ({
+    tokens,
+    id: propId,
+    ...passProps
+  }: TextareaProps & InternalTokensProp) => (
+    <AutoId id={propId}>
+      {(id) => <BaseTextarea id={id} {...passProps} />}
+    </AutoId>
+  ),
+)`
+  ${(props) => baseStyles(props)}
+`;
+
+export class Textarea extends Component<TextareaProps> {
+  render() {
+    return <StyledTextarea {...withSuomifiDefaultProps(this.props)} />;
+  }
+}
diff --git a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
index 245497e44..38d01171a 100644
--- a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
+++ b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
@@ -25,27 +25,7 @@ exports[`snapshot default structure should match snapshot 1`] = `
   white-space: normal;
 }
 
-.c2 {
-  line-height: 1.15;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  box-sizing: border-box;
-  font: 100% inherit;
-  line-height: 1;
-  text-align: left;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  vertical-align: baseline;
-  color: inherit;
-  background: none;
-  cursor: inherit;
-  max-width: 100%;
-}
-
-.c4 {
+.c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -69,7 +49,7 @@ exports[`snapshot default structure should match snapshot 1`] = `
   white-space: normal;
 }
 
-.c5 {
+.c4 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -92,33 +72,35 @@ exports[`snapshot default structure should match snapshot 1`] = `
   max-width: 100%;
 }
 
-.c5::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   color: inherit;
   opacity: 0.54;
 }
 
-.c3 {
-  line-height: 1.15;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  box-sizing: border-box;
-  font: 100% inherit;
-  line-height: 1;
-  text-align: left;
+.c2.fi-label-text .fi-label-text_label-span {
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
-  vertical-align: baseline;
-  color: inherit;
-  background: none;
-  cursor: inherit;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 600;
   display: block;
-  max-width: 100%;
-  word-wrap: normal;
-  word-break: normal;
-  white-space: normal;
+  margin-bottom: 10px;
+  color: hsl(0,0%,16%);
+}
+
+.c2.fi-label-text .fi-label-text_label-span .fi-label-text_optionalText {
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
 }
 
 .c1 {
@@ -147,40 +129,15 @@ exports[`snapshot default structure should match snapshot 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: hsl(0,0%,16%);
+  width: 290px;
 }
 
-.c1.fi-textarea .fi-textarea_label {
-  -webkit-letter-spacing: 0;
-  -moz-letter-spacing: 0;
-  -ms-letter-spacing: 0;
-  letter-spacing: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  -webkit-font-smoothing: antialiased;
-  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  font-weight: 600;
-  color: hsl(0,0%,16%);
-}
-
-.c1.fi-textarea .fi-textarea_optionalText {
-  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  font-weight: 400;
+.c1.fi-textarea .fi-label-text_label-span {
+  margin-bottom: 0;
 }
 
-.c1.fi-textarea .fi-textarea_hintText {
-  display: block;
-  color: hsl(0,0%,16%);
-  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  font-weight: 400;
-  word-break: break-word;
+.c1.fi-textarea .fi-hint-text {
+  margin-bottom: 0;
 }
 
 .c1.fi-textarea .fi-textarea_textarea-element-container {
@@ -250,13 +207,9 @@ exports[`snapshot default structure should match snapshot 1`] = `
   opacity: 1;
 }
 
-.c1.fi-textarea .fi-textarea_statusText {
+.c1.fi-textarea .fi-status-text {
   display: block;
-  margin-top: 5px;
-  font-size: 14px;
   line-height: 18px;
-  font-weight: 600;
-  word-break: break-word;
 }
 
 .c1.fi-textarea.fi-textarea--disabled {
@@ -272,33 +225,29 @@ exports[`snapshot default structure should match snapshot 1`] = `
   border: 2px solid hsl(3,59%,48%);
 }
 
-.c1.fi-textarea.fi-textarea--error .fi-textarea_statusText {
-  color: hsl(3,59%,48%);
+.c1.fi-textarea--full-width {
+  width: 100%;
 }
 
 <div
   class="c0 fi-textarea c1"
 >
   <label
-    class="c2"
+    class="c0 c2 fi-label-text"
     for="just-for-snapshot-to-be-same"
   >
-    <p
-      class="c3 fi-paragraph"
+    <span
+      class="c3 fi-label-text_label-span"
     >
-      <span
-        class="c4 fi-textarea_label"
-      >
-        Label text
-      </span>
-    </p>
+      Label text
+    </span>
   </label>
   <div
     class="c0 fi-textarea_textarea-element-container"
   >
     <textarea
       aria-invalid="false"
-      class="c5 fi-textarea_textarea"
+      class="c4 fi-textarea_textarea"
       id="just-for-snapshot-to-be-same"
     />
   </div>
diff --git a/src/core/Icon/Icon.tsx b/src/core/Icon/Icon.tsx
index 1678a7a5c..5b54b03a0 100644
--- a/src/core/Icon/Icon.tsx
+++ b/src/core/Icon/Icon.tsx
@@ -4,10 +4,7 @@ import classnames from 'classnames';
 import { iconBaseStyles } from './Icon.baseStyles';
 import { withSuomifiDefaultProps } from '../theme/utils';
 import { TokensProp } from '../theme';
-import {
-  ariaLabelOrHidden,
-  ariaFocusableNoLabel,
-} from '../../components/utils/aria';
+import { ariaLabelOrHidden, ariaFocusableNoLabel } from '../../utils/aria';
 import { SuomifiIcon, SuomifiIconInterface } from 'suomifi-icons';
 import { logger } from '../../utils/logger';
 export { BaseIconKeys } from 'suomifi-icons';
diff --git a/src/core/StaticIcon/StaticIcon.tsx b/src/core/StaticIcon/StaticIcon.tsx
index e1a728cbf..8d3e85bd8 100644
--- a/src/core/StaticIcon/StaticIcon.tsx
+++ b/src/core/StaticIcon/StaticIcon.tsx
@@ -8,10 +8,7 @@ import {
   SuomifiComponentIconInterface,
   SuomifiComponentIcon,
 } from 'suomifi-icons';
-import {
-  ariaLabelOrHidden,
-  ariaFocusableNoLabel,
-} from '../../components/utils/aria';
+import { ariaLabelOrHidden, ariaFocusableNoLabel } from '../../utils/aria';
 import { IconBaseProps, iconLogger } from '../Icon/Icon';
 export { IllustrativeIconKeys, DoctypeIconKeys } from 'suomifi-icons';
 
diff --git a/src/core/theme/colors.ts b/src/core/theme/colors.ts
index fa97dec92..f732dbfcd 100644
--- a/src/core/theme/colors.ts
+++ b/src/core/theme/colors.ts
@@ -13,6 +13,8 @@ const {
   blackLight1,
   brandBase,
   depthDark1,
+  depthDark2,
+  depthDark3,
   depthBase,
   depthLight3,
   depthLight2,
@@ -47,6 +49,8 @@ export const colorTokens = {
   },
   depth: {
     depthDark1,
+    depthDark2,
+    depthDark3,
     depthBase,
     depthLight3,
     depthLight2,
diff --git a/src/utils/aria.test.ts b/src/utils/aria.test.ts
new file mode 100644
index 000000000..4bdeb1cbe
--- /dev/null
+++ b/src/utils/aria.test.ts
@@ -0,0 +1,34 @@
+import { getAriaDescribedByProp } from './aria';
+
+describe('getAriaDescribedByProp', () => {
+  it('is empty when empty array was given', () => {
+    const data = getAriaDescribedByProp([]);
+    const expectation = {};
+    expect(expectation).toEqual(data);
+  });
+
+  it('has the given id', () => {
+    const data = getAriaDescribedByProp(['other-id']);
+    const expectation = { 'aria-describedby': 'other-id' };
+    expect(expectation).toEqual(data);
+  });
+
+  it('has all the given ids', () => {
+    const data = getAriaDescribedByProp([
+      'other-id',
+      'another-id',
+      undefined,
+      'example-id',
+    ]);
+    const expectation = {
+      'aria-describedby': 'other-id another-id example-id',
+    };
+    expect(expectation).toEqual(data);
+  });
+
+  it('is empty because condition was falsey', () => {
+    const data = getAriaDescribedByProp([undefined]);
+    const expectation = {};
+    expect(expectation).toEqual(data);
+  });
+});
diff --git a/src/utils/aria.ts b/src/utils/aria.ts
new file mode 100644
index 000000000..29ff744c7
--- /dev/null
+++ b/src/utils/aria.ts
@@ -0,0 +1,45 @@
+const ifAriaNoLabel = (ariaLabel?: string) => !!ariaLabel || ariaLabel === '';
+
+export const ariaLabelOrHidden = (ariaLabel?: string) => {
+  return ifAriaNoLabel(ariaLabel)
+    ? { 'aria-label': ariaLabel, role: 'img' }
+    : { 'aria-hidden': true };
+};
+
+/**
+ * Set element ability to be focusable based on aria-label
+ * @param {String} ariaLabel optional aria-label
+ */
+export const ariaFocusableNoLabel = (ariaLabel?: string) => {
+  return ifAriaNoLabel(ariaLabel) ? {} : { focusable: false };
+};
+
+/**
+ * Returns object with 'aria-describedby' which can be spread to props.
+ * E.g:
+ * @example
+ * <Component
+ *   {...getAriaDescribedBy([
+ *      describingElement ? "id-of-describing-element" : undefined,
+ *      otherDescribingElement ? "id-of-other-describing-element" : undefined,
+ *   ])}
+ * />
+ * @param describedByIds Array of id-strings
+ * @returns Object with 'aria-describedby' if there is atleast one value that is not undefined. Otherwise returns empty Object.
+ */
+export const getAriaDescribedByProp = (
+  describedByIds: (string | undefined)[],
+):
+  | { 'aria-describedby': string }
+  | {
+      'aria-describedby'?: undefined;
+    } => {
+  const existing = describedByIds.filter((id) => !!id);
+  if (existing.length > 0) {
+    const ariaDescribedBy = existing.join(' ').trim();
+    return {
+      'aria-describedby': ariaDescribedBy,
+    };
+  }
+  return {};
+};