diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a07f4f4136..4853f6e1e2d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## May, 27. 2019
+
+- New component in the `dnb-ui-lib`: [Textarea](/uilib/components/textarea). Got also a wider corner radius by `16px (1rem)`.
+
+## May, 27. 2019
+
+- New component in the `dnb-ui-lib`: [Checkbox](/uilib/components/checkbox) and [Radio](/uilib/components/radio) button
+
 ## May, 19. 2019
 
 - New component in the `dnb-ui-lib`: Circular [ProgressIndicator](/uilib/components/progress-indicator) bar (spinner with animation)
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components.md b/packages/dnb-design-system-portal/src/pages/uilib/components.md
index 3e36d64ab2d..dcc1c4f9f75 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components.md
@@ -89,3 +89,7 @@ The `Switch` component (toggle) is a digital on/off switch. Toggle switches are
 ## [Tabs](/uilib/components/tabs)
 
 Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarchy.
+
+## [Textarea](/uilib/components/textarea)
+
+The `Textarea` component has to be used as a multi-line text input control with an unlimited number of characters possible.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js
index 5037a7ecd1a..6ef382b0259 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js
@@ -80,7 +80,7 @@ class Example extends PureComponent {
 />
           `}
         </ComponentBox>
-        <ComponentBox caption="Show FormStatus (Error)">
+        <ComponentBox caption="Show failure status">
           {/* @jsx */ `
 <Input
   label="Show status:"
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/textarea.md b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea.md
new file mode 100644
index 00000000000..29173ff8f13
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea.md
@@ -0,0 +1,26 @@
+---
+title: 'Textarea'
+draft: false
+status: null
+order: 17
+---
+
+import Tabs from 'Tags/Tabs'
+
+import TextareaInfo from 'Pages/uilib/components/textarea/textarea-info'
+import TextareaProperties from 'Pages/uilib/components/textarea/textarea-properties'
+import TextareaEvents from 'Pages/uilib/components/textarea/textarea-events'
+
+# Textarea
+
+<Tabs>
+  <Tabs.Content>
+    <TextareaInfo />
+  </Tabs.Content>
+  <Tabs.Content>
+    <TextareaProperties />
+  </Tabs.Content>
+  <Tabs.Content>
+    <TextareaEvents  />
+  </Tabs.Content>
+</Tabs>
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/Examples.js
new file mode 100644
index 00000000000..d38e5d6f903
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/Examples.js
@@ -0,0 +1,123 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React, { PureComponent, Fragment } from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import styled from '@emotion/styled'
+
+class Example extends PureComponent {
+  render() {
+    return (
+      <Fragment>
+        <ComponentBox
+          caption="Placeholder text"
+          data-dnb-test="textarea-default"
+        >
+          {/* @jsx */ `
+<Textarea
+  label="Default:"
+  rows="2"
+  cols="20"
+  value="Textarea value\\nNewline"
+  on_change={({ value }) => { console.log('on_change', value) }}
+  on_focus={() => { console.log('on_focus') }}
+  on_blur={() => { console.log('on_blur') }}
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox caption="Placeholder text">
+          {/* @jsx */ `
+<FormLabel for_id="text-textarea-1" text="Placeholder:" />
+<Textarea
+  id="text-textarea-1"
+  placeholder="Placeholder text"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox caption="Vertical placed label, using `.dnb-form-group`">
+          {/* @jsx */ `
+<Textarea
+  label="Vertical:"
+  rows="3"
+  cols="33"
+  value="Textarea value with more than 3 lines\\nNewline\\nNewline\\nNewline\\nNewline"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox caption="Horizontal placed label, using `.dnb-form-group`">
+          {/* @jsx */ `
+<Textarea
+  label="Horizontal:"
+  rows="3"
+  value="Nec litora inceptos vestibulum id interdum donec gravida."
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox caption="Max length usage">
+          {/* @jsx */ `
+<Textarea
+  label="Length limit:"
+  rows="3"
+  cols="33"
+  maxLength="20"
+  required
+  value="Nec litora inceptos vestibulum id interdum donec gravida."
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="With FormStatus failure message"
+          data-dnb-test="textarea-error"
+        >
+          {/* @jsx */ `
+<Textarea
+  label="Error Message:"
+  cols="33"
+  value="Nec litora inceptos vestibulum id interdum donec gravida."
+  status="Message to the user"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox caption="Show failure status">
+          {/* @jsx */ `
+<Textarea
+  label="Show status:"
+  status="error"
+  value="Shows status with border only"
+/>
+`}
+        </ComponentBox>
+        <ComponentBox caption="Disabled textarea">
+          {/* @jsx */ `
+<Textarea
+  label="Disabled:"
+  disabled
+  value="Nec litora inceptos vestibulum id interdum donec gravida."
+/>
+          `}
+        </ComponentBox>
+      </Fragment>
+    )
+  }
+}
+
+const Wrapper = styled.div`
+  display: block;
+  width: 100%;
+
+  ${'' /* .dnb-textarea textarea {
+    min-width: 10rem;
+  }
+  .dnb-form-label + .dnb-textarea {
+    margin-top: 0;
+  } */}
+`
+
+export { Example }
+export default () => (
+  <Wrapper>
+    <Example />
+  </Wrapper>
+)
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/textarea.md b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-element.md
similarity index 70%
rename from packages/dnb-design-system-portal/src/pages/uilib/elements/textarea.md
rename to packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-element.md
index d8229834fcb..201cafa486c 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/elements/textarea.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-element.md
@@ -1,17 +1,14 @@
 ---
-title: 'Textarea'
-draft: false
+draft: true
 ---
 
 import CodeBlock from 'Tags/CodeBlock'
 import ComponentBox from 'Tags/ComponentBox'
 
-## Textarea
-
 <CodeBlock reactLive hideCode caption="Default Textarea">
 {`
-<div className="dnb-form-group dnb-form-group__position--vertical" data-dnb-test="textarea-default" >
-  <label htmlFor="textarea-default">
+<div className="dnb-form-group dnb-form-group__position--vertical" >
+  <label className="dnb-label" htmlFor="textarea-default">
     Label:
   </label>
   <textarea id="textarea-default" className="dnb-textarea" rows="2" cols="20" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
@@ -22,7 +19,7 @@ import ComponentBox from 'Tags/ComponentBox'
 <CodeBlock reactLive hideCode caption="Disabled Textarea">
 {`
 <div className="dnb-form-group">
-  <label htmlFor="vestibulum">
+  <label className="dnb-label" htmlFor="vestibulum">
     Label:
   </label>
   <textarea id="vestibulum" className="dnb-textarea" rows="5" cols="33" disabled defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
@@ -33,7 +30,7 @@ import ComponentBox from 'Tags/ComponentBox'
 <ComponentBox hideCode caption="Textarea with status message">
 {`
 <div className="dnb-form-group dnb-form-group__position--vertical">
-  <label htmlFor="vestibulum">
+  <label className="dnb-label" htmlFor="vestibulum">
     Label:
   </label>
   <textarea id="vestibulum" className="dnb-textarea status--error" rows="5" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
@@ -44,14 +41,12 @@ import ComponentBox from 'Tags/ComponentBox'
 
 <ComponentBox hideCode>
 {`
-<div className="dnb-form-group">
-  <label htmlFor="gravida">
+<div className="dnb-form-group dnb-form-group__position--vertical" >
+  <label className="dnb-label" htmlFor="gravida">
     Label:
   </label>
-  <div className="dnb-form-group dnb-form-group__position--vertical" >
-    <textarea id="gravida" className="dnb-textarea" rows="3" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
-    <FormStatus status="info" text="Message to the user" />
-  </div>
+  <textarea id="gravida" className="dnb-textarea" rows="3" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
+  <FormStatus status="info" text="Message to the user" />
 </div>
 `}
 </ComponentBox>
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-events.md b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-events.md
new file mode 100644
index 00000000000..6b39723f836
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-events.md
@@ -0,0 +1,9 @@
+---
+draft: true
+---
+
+| Events      | Description                                                                                  |
+| ----------- | -------------------------------------------------------------------------------------------- |
+| `on_change` | _(optional)_ will be called on value changes made by the user. Returns a string `{ value }`. |
+| `on_focus`  | _(optional)_ will be called on focus set by the user. Returns a string `{ value }`.          |
+| `on_blur`   | _(optional)_ will be called on blur set by the user. Returns a string `{ value }`.           |
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-info.md b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-info.md
new file mode 100644
index 00000000000..db2108f10e0
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-info.md
@@ -0,0 +1,18 @@
+---
+draft: true
+---
+
+import Examples from 'Pages/uilib/components/textarea/Examples'
+import TextareaAsElement from 'Pages/uilib/components/textarea/textarea-element'
+
+## Description
+
+The `Textarea` component has to be used as a multi-line text input control with an unlimited number of characters possible.
+
+## Demos
+
+<Examples />
+
+### Textarea as HTML element only
+
+<TextareaAsElement />
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-properties.md
new file mode 100644
index 00000000000..1b24c7229b7
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/textarea/textarea-properties.md
@@ -0,0 +1,16 @@
+---
+draft: true
+---
+
+| Properties       | Description                                                                                                    |
+| ---------------- | -------------------------------------------------------------------------------------------------------------- |
+| `id`             | _(optional)_ the `id` attribute of the textarea element                                                        |
+| `value`          | _(optional)_ the content value of the textarea.                                                                |
+| `align`          | _(optional)_ defines the `text-align` of the textarea. Defaults to `left`.                                     |
+| `placeholder`    | _(optional)_ the placeholder which shows up once the textarea value is empty                                   |
+| `label`          | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. textarea.        |
+| `status`         | _(optional)_ text with a status message. The style defaults to an error message.                               |
+| `status_state`   | _(optional)_ defines the state of the status. Currently are two statuses `[error, info]`. Defaults to `error`. |
+| `textarea_state` | _(optional)_ to control the visual focus state as a prop, like `focus` or `blur`.                              |
+| `textarea_class` | _(optional)_ in case we have to set a custom textarea class.                                                   |
+| `disabled`       | _(optional)_ to disable the textarea.                                                                          |
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements.md b/packages/dnb-design-system-portal/src/pages/uilib/elements.md
index 74daf83d3b5..072c5269baf 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/elements.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/elements.md
@@ -8,11 +8,9 @@ order: 6
 import CodeBlock from 'Tags/CodeBlock'
 import ComponentBox from 'Tags/ComponentBox'
 import { Link } from 'dnb-ui-lib/src/elements'
-
 import OtherElements from 'Pages/uilib/elements/other'
 import Anchor from 'Pages/uilib/elements/anchor'
 import Blockquote from 'Pages/uilib/elements/blockquote'
-import Textarea from 'Pages/uilib/elements/textarea'
 import Tables from 'Pages/uilib/elements/tables'
 import Lists from 'Pages/uilib/elements/lists'
 import Code from 'Pages/uilib/elements/code'
@@ -71,7 +69,6 @@ render(<StyledLink href="/" target="_blank">Styled Link</StyledLink>)
 - [Blockquote](#blockquote)
 - [Lists](#lists)
 - [Tables](#tables)
-- [Textarea](#textarea)
 - [Select](#missing-html-elements)
 - [Radio](#missing-html-elements)
 - [Checkbox](#missing-html-elements)
@@ -81,7 +78,6 @@ render(<StyledLink href="/" target="_blank">Styled Link</StyledLink>)
 <Blockquote />
 <Lists />
 <Tables />
-<Textarea />
 
 ---
 
diff --git a/packages/dnb-ui-lib/src/components/Textarea.js b/packages/dnb-ui-lib/src/components/Textarea.js
new file mode 100644
index 00000000000..2cd8b686c3d
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/Textarea.js
@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index textarea to autogenerate all the components and patterns
+ * Used by "prepareTextareas"
+ */
+
+import Textarea from './textarea/Textarea'
+export * from './textarea/Textarea'
+export default Textarea
diff --git a/packages/dnb-ui-lib/src/components/index.js b/packages/dnb-ui-lib/src/components/index.js
index 11efa2da18c..9b411751a84 100644
--- a/packages/dnb-ui-lib/src/components/index.js
+++ b/packages/dnb-ui-lib/src/components/index.js
@@ -30,6 +30,7 @@ import Slider from './slider/Slider'
 import StepIndicator from './step-indicator/StepIndicator'
 import Switch from './switch/Switch'
 import Tabs from './tabs/Tabs'
+import Textarea from './textarea/Textarea'
 
 // define / export all the aviable components
 export {
@@ -52,5 +53,6 @@ export {
   Slider,
   StepIndicator,
   Switch,
-  Tabs
+  Tabs,
+  Textarea
 }
diff --git a/packages/dnb-ui-lib/src/components/lib.js b/packages/dnb-ui-lib/src/components/lib.js
index fed9073d610..68f522af080 100644
--- a/packages/dnb-ui-lib/src/components/lib.js
+++ b/packages/dnb-ui-lib/src/components/lib.js
@@ -32,6 +32,7 @@ import Slider from './slider/Slider'
 import StepIndicator from './step-indicator/StepIndicator'
 import Switch from './switch/Switch'
 import Tabs from './tabs/Tabs'
+import Textarea from './textarea/Textarea'
 
 // define / export all the aviable components
 export {
@@ -54,7 +55,8 @@ export {
   Slider,
   StepIndicator,
   Switch,
-  Tabs
+  Tabs,
+  Textarea
 }
 
 export const getComponents = () => {
@@ -78,7 +80,8 @@ export const getComponents = () => {
     Slider,
     StepIndicator,
     Switch,
-    Tabs
+    Tabs,
+    Textarea
   }
 }
 
diff --git a/packages/dnb-ui-lib/src/components/textarea/Textarea.js b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
new file mode 100644
index 00000000000..17f3eeca216
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
@@ -0,0 +1,304 @@
+/**
+ * Web Textarea Component
+ *
+ */
+
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import FormLabel from '../form-label/FormLabel'
+import FormStatus from '../form-status/FormStatus'
+import {
+  registerElement,
+  validateDOMAttributes,
+  processChildren,
+  pickRenderProps,
+  dispatchCustomElementEvent
+} from '../../shared/component-helper'
+
+const renderProps = {
+  on_change: null,
+  on_focus: null,
+  on_blur: null
+}
+
+export const propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  id: PropTypes.string,
+  label: PropTypes.string,
+  status: PropTypes.string,
+  textarea_state: PropTypes.string,
+  status_state: PropTypes.string,
+  status_animation: PropTypes.string,
+  placeholder: PropTypes.string,
+  align: PropTypes.oneOf(['left', 'right']),
+  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  class: PropTypes.string,
+  textarea_class: PropTypes.string,
+  attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  cols: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  // React props
+  className: PropTypes.string,
+  textareaElement: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.func
+  ]),
+
+  // Web Component props
+  custom_element: PropTypes.object,
+  custom_method: PropTypes.func,
+  on_change: PropTypes.func,
+  on_focus: PropTypes.func,
+  on_blur: PropTypes.func
+}
+
+export const defaultProps = {
+  value: null,
+  id: null,
+  label: null,
+  status: null,
+  textarea_state: null,
+  status_state: 'error',
+  status_animation: null,
+  placeholder: null,
+  align: null,
+  disabled: false,
+  textarea_class: null,
+  class: null,
+  attributes: null,
+  readOnly: false,
+  rows: null,
+  cols: null,
+
+  // React props
+  className: null,
+  textareaElement: null,
+  children: null,
+
+  // Web Component props
+  custom_element: null,
+  custom_method: null,
+  ...renderProps
+}
+
+/**
+ * The textarea component is an umbrella component for all textareas which share the same style as the classic `text` textarea field. Radio buttons and other form elements are not included here.
+ */
+export default class Textarea extends PureComponent {
+  static tagName = 'dnb-textarea'
+  static propTypes = propTypes
+  static defaultProps = defaultProps
+  static renderProps = renderProps
+
+  static enableWebComponent() {
+    registerElement(Textarea.tagName, Textarea, defaultProps)
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const value = Textarea.getValue(props)
+    if (
+      state._listenForPropChanges &&
+      value !== null &&
+      value !== state.value
+    ) {
+      state.value = value
+    }
+    if (props.disabled) {
+      state.textareaState = 'disabled'
+    }
+    if (props.textarea_state) {
+      state.textareaState = props.textarea_state
+    }
+    state._listenForPropChanges = true
+    return state
+  }
+
+  static getValue(props) {
+    if (props.value) return props.value
+    return processChildren(props)
+  }
+
+  state = {
+    textareaState: 'virgin',
+    value: null
+  }
+
+  constructor(props) {
+    super(props)
+
+    this._ref = React.createRef()
+    this._id =
+      props.id || `dnb-textarea-${Math.round(Math.random() * 999)}` // cause we need an id anyway
+
+    // pass along all props we wish to have as params
+    this.renderProps = pickRenderProps(props, renderProps)
+
+    // make sure we dont trigger getDerivedStateFromProps on startup
+    this.state._listenForPropChanges = true
+    this.state.value = Textarea.getValue(props)
+    if (props.textarea_state) {
+      this.state.textareaState = props.textarea_state
+    }
+  }
+  onFocusHandler = event => {
+    const { value } = event.target
+    this.setState({
+      value,
+      _listenForPropChanges: false,
+      textareaState: 'focus'
+    })
+    dispatchCustomElementEvent(this, 'on_focus', { value, event })
+  }
+  onBlurHandler = event => {
+    const { value } = event.target
+    this.setState({
+      value,
+      _listenForPropChanges: false,
+      textareaState: String(value || '').length > 0 ? 'dirty' : 'initial'
+    })
+    dispatchCustomElementEvent(this, 'on_blur', { value, event })
+  }
+  onChangeHandler = event => {
+    const { value } = event.target
+    this.setState({ value, _listenForPropChanges: false })
+    dispatchCustomElementEvent(this, 'on_change', { value, event })
+  }
+  render() {
+    const {
+      label,
+      status,
+      status_state,
+      status_animation,
+      disabled,
+      placeholder,
+      align,
+      textarea_class,
+      readOnly,
+      class: _className,
+      className,
+
+      id: _id, //eslint-disable-line
+      children, //eslint-disable-line
+      value: _value, //eslint-disable-line
+      textareaElement: _textareaElement, //eslint-disable-line
+
+      ...attributes
+    } = this.props
+
+    const { value, textareaState } = this.state
+
+    const id = this._id
+    const showStatus = status && status !== 'error'
+
+    const classes = classnames(
+      'dnb-textarea',
+      `dnb-textarea--${textareaState}`,
+      String(value || '').length > 0 && 'dnb-textarea--has-content',
+      align && `dnb-textarea__align--${align}`,
+      showStatus && 'dnb-textarea__form-status',
+      status && `dnb-textarea__status--${status_state}`,
+      _className,
+      className
+    )
+
+    let {
+      textareaElement: TextareaElement,
+      ...renderProps
+    } = this.renderProps
+
+    const textareaParams = {
+      ...renderProps,
+      className: classnames('dnb-textarea__textarea', textarea_class),
+      value: value || '',
+      id,
+      disabled,
+      name: id,
+      ...attributes,
+      onChange: this.onChangeHandler,
+      onFocus: this.onFocusHandler,
+      onBlur: this.onBlurHandler
+    }
+
+    // we may considder using: aria-details
+    if (showStatus) {
+      textareaParams['aria-describedby'] = id + '-status'
+    }
+    if (readOnly) {
+      textareaParams['aria-readonly'] = textareaParams.readOnly = true
+    }
+    if (label) {
+      textareaParams['aria-labelledby'] = id + '-label'
+    }
+
+    const shellParams = {}
+    if (disabled) {
+      shellParams['aria-disabled'] = true
+    }
+
+    // to show the ending dots on a placeholder, if the text is longer
+    const placeholderStyle =
+      parseFloat(this.props.rows) > 0
+        ? {
+            '--textarea-rows': parseFloat(this.props.rows)
+            // '--textarea-cols': parseFloat(this.props.cols)
+          }
+        : null
+
+    // also used for code markup simulation
+    validateDOMAttributes(this.props, textareaParams)
+    validateDOMAttributes(null, shellParams)
+
+    if (TextareaElement && typeof TextareaElement === 'function') {
+      TextareaElement = TextareaElement(textareaParams, this._ref)
+    } else if (!TextareaElement && _textareaElement) {
+      TextareaElement = _textareaElement
+    }
+
+    return (
+      <>
+        {label && (
+          <FormLabel
+            id={id + '-label'}
+            for_id={id}
+            text={label}
+            disabled={disabled}
+          />
+        )}
+        <span className={classes}>
+          <span className="dnb-textarea__shell" {...shellParams}>
+            {TextareaElement || (
+              <textarea ref={this._ref} {...textareaParams} />
+            )}
+
+            {placeholder && (
+              <span
+                aria-hidden
+                className={classnames(
+                  'dnb-textarea__placeholder',
+                  align ? `dnb-textarea__align--${align}` : null
+                )}
+                style={placeholderStyle}
+              >
+                {placeholder}
+              </span>
+            )}
+          </span>
+
+          {showStatus && (
+            <FormStatus
+              text={status}
+              status={status_state}
+              text_id={id + '-status'} // used for "aria-describedby"
+              animation={status_animation}
+            />
+          )}
+        </span>
+      </>
+    )
+  }
+}
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.screenshot.test.js b/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.screenshot.test.js
new file mode 100644
index 00000000000..592e3afc6f7
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.screenshot.test.js
@@ -0,0 +1,52 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we dont require any related files
+ */
+
+import {
+  testPageScreenshot,
+  setupPageScreenshot
+} from '../../../core/jest/jestSetupScreenshots'
+
+describe('Textarea screenshot', () => {
+  const style = {
+    width: '14rem' // make sure our textarea gets an explicit width, because of mac/linux rendering differences
+  }
+  setupPageScreenshot({ url: '/uilib/components/textarea' })
+  it('have to match the "default" textarea style', async () => {
+    const screenshot = await testPageScreenshot({
+      style,
+      selector: '[data-dnb-test="textarea-default"] .dnb-textarea',
+      // Only for screenshot testing - make textarea having same width on linux chromium
+      styleSelector: '[data-dnb-test="textarea-default"] textarea'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  // we do not make a active state, due to the differences of font rendering
+  it('have to match the "focus" textarea style', async () => {
+    const screenshot = await testPageScreenshot({
+      style,
+      selector: '[data-dnb-test="textarea-default"] .dnb-textarea',
+      simulateSelector: '[data-dnb-test="textarea-default"] textarea',
+      simulate: 'focus'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  // we do not make a active state, due to the differences of font rendering
+  it('have to match the "hover" textarea style', async () => {
+    const screenshot = await testPageScreenshot({
+      style,
+      selector: '[data-dnb-test="textarea-default"] .dnb-textarea',
+      simulateSelector: '[data-dnb-test="textarea-default"] textarea',
+      simulate: 'hover'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match the default error textarea style', async () => {
+    const screenshot = await testPageScreenshot({
+      style,
+      selector: '[data-dnb-test="textarea-error"] .dnb-textarea'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js b/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js
new file mode 100644
index 00000000000..1a1856861b3
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js
@@ -0,0 +1,134 @@
+/**
+ * Component Test
+ *
+ */
+
+import React from 'react'
+import {
+  mount,
+  fakeProps,
+  toJson,
+  axeComponent,
+  loadScss
+} from '../../../core/jest/jestSetup'
+import Component from '../Textarea'
+
+// just to make sure we re-run the test in watch mode due to changes in theese files
+import _textarea from '../style/_textarea.scss' // eslint-disable-line
+import dnb_textarea from '../style/dnb-textarea.scss' // eslint-disable-line
+import dnb_textarea_theme_ui from '../style/themes/dnb-textarea-theme-ui.scss' // eslint-disable-line
+
+const props = {
+  ...fakeProps(require.resolve('../Textarea'), {
+    all: true,
+    optional: true
+  }),
+  id: 'textarea',
+  label: null,
+  status: null, // to make sure we don't get aria-details
+  textareaElement: null,
+  disabled: false
+}
+
+describe('Textarea component', () => {
+  // compare the snapshot
+  it('have to match snapshot', () => {
+    const Comp = mount(<Component {...props} value="test" />)
+    expect(toJson(Comp)).toMatchSnapshot()
+  })
+
+  // then test the state management
+  const Comp = mount(
+    <Component {...props} value={null}>
+      {null}
+    </Component>
+  )
+
+  it('has correct state after "focus" trigger', () => {
+    Comp.find('textarea').simulate('focus')
+
+    expect(
+      Comp.find('.dnb-textarea').hasClass('dnb-textarea--focus')
+    ).toBe(true)
+  })
+
+  it('has correct state after "change" trigger', () => {
+    expect(
+      Comp.find('.dnb-textarea').hasClass('dnb-textarea--has-content')
+    ).toBe(false)
+
+    const value = 'new value'
+    Comp.find('textarea').simulate('change', { target: { value } })
+
+    expect(
+      Comp.find('.dnb-textarea').hasClass('dnb-textarea--has-content')
+    ).toBe(true)
+
+    expect(Comp.state().value).toBe(value)
+  })
+
+  // // make sure getDerivedStateFromProps works
+  it('has correct state after changeing "value" prop (set by getDerivedStateFromProps)', () => {
+    const value = 'new prop value'
+    Comp.setProps({
+      value
+    })
+    expect(Comp.state().value).toBe(value)
+  })
+
+  it('has to to have a prop value like value', () => {
+    const value = 'new value'
+    Comp.setProps({
+      value
+    })
+    expect(Comp.find('textarea').props().value).toBe(value)
+  })
+
+  it('has to to have a label value as defined in the prop', () => {
+    const Comp = mount(<Component {...props} label="label" />)
+    expect(Comp.find('label').text()).toBe('label')
+  })
+
+  it('has to to have a status value as defined in the prop', () => {
+    const Comp = mount(
+      <Component {...props} status="status" status_state="error" />
+    )
+    expect(Comp.find('.dnb-form-status').text()).toBe('status')
+  })
+
+  it('has a disabled attribute, once we set disabled to true', () => {
+    const Comp = mount(<Component />)
+    Comp.setProps({
+      disabled: true
+    })
+    expect(
+      Comp.find('textarea')
+        .instance()
+        .hasAttribute('disabled')
+    ).toBe(true)
+  })
+
+  it('should validate with ARIA rules as a textarea with a label', async () => {
+    const LabelComp = mount(<label htmlFor="textarea">text</label>)
+    const TextareaComp = mount(
+      <Component {...props} id="textarea" value="some value" />
+    )
+    expect(
+      await axeComponent(LabelComp, TextareaComp)
+    ).toHaveNoViolations()
+  })
+})
+
+describe('Textarea scss', () => {
+  it('have to match snapshot', () => {
+    const scss = loadScss(require.resolve('../style/dnb-textarea.scss'))
+    expect(scss).toMatchSnapshot()
+  })
+
+  it('have to match default theme snapshot', () => {
+    const scss = loadScss(
+      require.resolve('../style/themes/dnb-textarea-theme-ui.scss')
+    )
+    expect(scss).toMatchSnapshot()
+  })
+})
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
new file mode 100644
index 00000000000..8c3d877aca8
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
@@ -0,0 +1,630 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Textarea component have to match snapshot 1`] = `
+<Textarea
+  0={
+    Object {
+      "displayName": "Textarea",
+      "props": Object {
+        "align": "'left'",
+        "attributes": "attributes",
+        "children": "children",
+        "class": "class",
+        "className": "className",
+        "cols": 1,
+        "custom_element": Object {},
+        "custom_method": [Function],
+        "disabled": "disabled",
+        "id": "id",
+        "label": "label",
+        "on_blur": [Function],
+        "on_change": [Function],
+        "on_focus": [Function],
+        "placeholder": "placeholder",
+        "readOnly": "readOnly",
+        "rows": 1,
+        "status": "status",
+        "status_animation": "status_animation",
+        "status_state": "status_state",
+        "textareaElement": [Function],
+        "textarea_class": "textarea_class",
+        "textarea_state": "textarea_state",
+        "value": "value",
+      },
+    }
+  }
+  align={null}
+  attributes={null}
+  class={null}
+  className={null}
+  cols={null}
+  custom_element={null}
+  custom_method={null}
+  disabled={false}
+  id="textarea"
+  label={null}
+  on_blur={null}
+  on_change={null}
+  on_focus={null}
+  placeholder={null}
+  readOnly={false}
+  rows={null}
+  status={null}
+  status_animation={null}
+  status_state="error"
+  textareaElement={null}
+  textarea_class={null}
+  textarea_state={null}
+  value="test"
+>
+  <span
+    className="dnb-textarea dnb-textarea--virgin dnb-textarea--has-content"
+  >
+    <span
+      className="dnb-textarea__shell"
+    >
+      <textarea
+        className="dnb-textarea__textarea"
+        id="textarea"
+        name="textarea"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        value="test"
+      />
+    </span>
+  </span>
+</Textarea>
+`;
+
+exports[`Textarea scss have to match default theme snapshot 1`] = `
+"/*
+* Textarea theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+:root {
+  --textarea-text-color: var(--color-sea-green);
+  --textarea-text-color--focus: var(--color-sea-green);
+  --textarea-text-color--changed: var(--color-emerald-green);
+  --textarea-text-color--disabled: var(--color-sea-green-alt-30);
+  --textarea-background-color: var(--color-white);
+  --textarea-background-color--focus: var(--color-white);
+  --textarea-background-color--changed: var(--color-white);
+  --textarea-background-color--disabled: var(--color-mint-green-12); }
+
+.dnb-textarea__textarea {
+  border-radius: 0.5rem;
+  /* IE11 fix */ }
+  .dnb-textarea__textarea,
+  .dnb-textarea--virgin .dnb-textarea__textarea,
+  .dnb-textarea--initial .dnb-textarea__textarea {
+    color: var(--textarea-text-color);
+    background-color: var(--textarea-background-color); }
+  .dnb-textarea--dirty .dnb-textarea__textarea {
+    color: var(--textarea-text-color--changed);
+    background-color: var(--textarea-background-color--changed); }
+  .dnb-textarea--focus .dnb-textarea__textarea, .dnb-textarea__textarea:focus, .dnb-textarea__textarea:hover {
+    outline: none; }
+    .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]), .dnb-textarea__textarea:focus:not([disabled]), .dnb-textarea__textarea:hover:not([disabled]) {
+      color: var(--textarea-text-color--focus);
+      background-color: var(--textarea-background-color--focus); }
+      .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not(.status--error), .dnb-textarea__textarea:focus:not([disabled]):not(.status--error), .dnb-textarea__textarea:hover:not([disabled]):not(.status--error) {
+        box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
+        /* IE11 fix */ }
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not(.status--error), .dnb-textarea__textarea:focus:not([disabled]):not(.status--error), .dnb-textarea__textarea:hover:not([disabled]):not(.status--error) {
+            box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+  .dnb-textarea__textarea[disabled],
+  .dnb-textarea--disabled .dnb-textarea__textarea {
+    user-select: none;
+    color: var(--textarea-text-color--disabled);
+    background-color: var(--textarea-background-color--disabled);
+    box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
+    .dnb-textarea__textarea[disabled]::-webkit-scrollbar,
+    .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar {
+      width: 0; }
+  .dnb-textarea__textarea.status--error,
+  .dnb-textarea__textarea .dnb-textarea__status--error {
+    box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
+  .dnb-textarea__textarea ::selection {
+    background-color: var(--color-mint-green);
+    color: var(--textarea-text-color--focus);
+    text-shadow: none; }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .dnb-textarea__textarea {
+      -ms-overflow-style: -ms-autohiding-scrollba;
+      box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }
+
+.dnb-textarea__placeholder {
+  color: var(--textarea-text-color);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--textarea-rows, 2); }
+
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea, .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:hover {
+  box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
+
+.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder,
+.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
+  display: none; }
+
+textarea.dnb-textarea {
+  border-radius: 0.5rem;
+  /* IE11 fix */ }
+  textarea.dnb-textarea,
+  .dnb-textarea--virgin textarea.dnb-textarea,
+  .dnb-textarea--initial textarea.dnb-textarea {
+    color: var(--textarea-text-color);
+    background-color: var(--textarea-background-color); }
+  .dnb-textarea--dirty textarea.dnb-textarea {
+    color: var(--textarea-text-color--changed);
+    background-color: var(--textarea-background-color--changed); }
+  .dnb-textarea--focus textarea.dnb-textarea, textarea.dnb-textarea:focus, textarea.dnb-textarea:hover {
+    outline: none; }
+    .dnb-textarea--focus textarea.dnb-textarea:not([disabled]), textarea.dnb-textarea:focus:not([disabled]), textarea.dnb-textarea:hover:not([disabled]) {
+      color: var(--textarea-text-color--focus);
+      background-color: var(--textarea-background-color--focus); }
+      .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
+        box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
+        /* IE11 fix */ }
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
+            box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+  textarea.dnb-textarea[disabled],
+  .dnb-textarea--disabled textarea.dnb-textarea {
+    user-select: none;
+    color: var(--textarea-text-color--disabled);
+    background-color: var(--textarea-background-color--disabled);
+    box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
+    textarea.dnb-textarea[disabled]::-webkit-scrollbar,
+    .dnb-textarea--disabled textarea.dnb-textarea::-webkit-scrollbar {
+      width: 0; }
+  textarea.dnb-textarea.status--error,
+  textarea.dnb-textarea .dnb-textarea__status--error {
+    box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
+  textarea.dnb-textarea ::selection {
+    background-color: var(--color-mint-green);
+    color: var(--textarea-text-color--focus);
+    text-shadow: none; }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    textarea.dnb-textarea {
+      -ms-overflow-style: -ms-autohiding-scrollba;
+      box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }
+"
+`;
+
+exports[`Textarea scss have to match snapshot 1`] = `
+"/*
+* DNB Textarea
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+/*
+* DNB FormLabel
+*
+*/
+.dnb-form-label {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
+  font-size: 1rem;
+  font-style: normal;
+  line-height: 1.5rem;
+  color: var(--color-black-80, #333);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-variant-numeric: lining-nums;
+  font-feature-settings: \\"lnum\\";
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-form-label *,
+  .dnb-form-label ::before,
+  .dnb-form-label ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */ }
+  .dnb-form-label ::before,
+  .dnb-form-label ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+ * FormLabel component
+ *
+ */
+.dnb-form-label {
+  user-select: none;
+  margin-right: 1rem;
+  display: inline-block;
+  vertical-align: baseline;
+  cursor: pointer;
+  color: inherit;
+  width: auto;
+  white-space: nowrap; }
+  .dnb-form-label--vertical {
+    margin-right: 0;
+    margin-top: 0; }
+  .dnb-form-label[for]:not([disabled]):hover {
+    color: var(--color-sea-green); }
+  .dnb-form-label[disabled] {
+    cursor: not-allowed; }
+
+/*
+* DNB FormStatus
+*
+*/
+.dnb-form-status {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
+  font-size: 1rem;
+  font-style: normal;
+  line-height: 1.5rem;
+  color: var(--color-black-80, #333);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-variant-numeric: lining-nums;
+  font-feature-settings: \\"lnum\\";
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-form-status *,
+  .dnb-form-status ::before,
+  .dnb-form-status ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */ }
+  .dnb-form-status ::before,
+  .dnb-form-status ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+ * FormStatus component
+ *
+ */
+.dnb-form-status {
+  width: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: var(--input-height);
+  border-radius: var(--input-border-radius);
+  line-height: 0.5rem; }
+  .dnb-form-status--text {
+    padding: calc(0.5rem / 2) 1rem;
+    cursor: text;
+    color: var(--color-emerald-green);
+    line-height: 1.5rem; }
+  .dnb-icon + .dnb-form-status--text {
+    padding-left: 0.5rem; }
+  .dnb-form-status > .dnb-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1.5em;
+    height: 1.5em;
+    margin-left: 0.5rem;
+    color: inherit;
+    font-size: 1rem;
+    border-radius: 50%;
+    border: 1px solid;
+    border-color: currentColor; }
+  .dnb-form-status[hidden] {
+    display: none; }
+  .dnb-form-status--fade-in {
+    height: 0;
+    opacity: 0;
+    animation: fade-in 600ms ease-out 1 200ms forwards; }
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    height: 0; }
+  to {
+    opacity: 1;
+    height: var(--input-height); } }
+
+.dnb-textarea {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
+  font-size: 1rem;
+  font-style: normal;
+  line-height: 1.5rem;
+  color: var(--color-black-80, #333);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-variant-numeric: lining-nums;
+  font-feature-settings: \\"lnum\\";
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-textarea *,
+  .dnb-textarea ::before,
+  .dnb-textarea ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    box-sizing: border-box;
+    /* 2 */ }
+  .dnb-textarea ::before,
+  .dnb-textarea ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Textarea component
+*
+*/
+/*
+* Textarea theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+:root {
+  --textarea-text-color: var(--color-sea-green);
+  --textarea-text-color--focus: var(--color-sea-green);
+  --textarea-text-color--changed: var(--color-emerald-green);
+  --textarea-text-color--disabled: var(--color-sea-green-alt-30);
+  --textarea-background-color: var(--color-white);
+  --textarea-background-color--focus: var(--color-white);
+  --textarea-background-color--changed: var(--color-white);
+  --textarea-background-color--disabled: var(--color-mint-green-12); }
+
+.dnb-textarea__textarea {
+  border-radius: 0.5rem;
+  /* IE11 fix */ }
+  .dnb-textarea__textarea,
+  .dnb-textarea--virgin .dnb-textarea__textarea,
+  .dnb-textarea--initial .dnb-textarea__textarea {
+    color: var(--textarea-text-color);
+    background-color: var(--textarea-background-color); }
+  .dnb-textarea--dirty .dnb-textarea__textarea {
+    color: var(--textarea-text-color--changed);
+    background-color: var(--textarea-background-color--changed); }
+  .dnb-textarea--focus .dnb-textarea__textarea, .dnb-textarea__textarea:focus, .dnb-textarea__textarea:hover {
+    outline: none; }
+    .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]), .dnb-textarea__textarea:focus:not([disabled]), .dnb-textarea__textarea:hover:not([disabled]) {
+      color: var(--textarea-text-color--focus);
+      background-color: var(--textarea-background-color--focus); }
+      .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not(.status--error), .dnb-textarea__textarea:focus:not([disabled]):not(.status--error), .dnb-textarea__textarea:hover:not([disabled]):not(.status--error) {
+        box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
+        /* IE11 fix */ }
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not(.status--error), .dnb-textarea__textarea:focus:not([disabled]):not(.status--error), .dnb-textarea__textarea:hover:not([disabled]):not(.status--error) {
+            box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+  .dnb-textarea__textarea[disabled],
+  .dnb-textarea--disabled .dnb-textarea__textarea {
+    user-select: none;
+    color: var(--textarea-text-color--disabled);
+    background-color: var(--textarea-background-color--disabled);
+    box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
+    .dnb-textarea__textarea[disabled]::-webkit-scrollbar,
+    .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar {
+      width: 0; }
+  .dnb-textarea__textarea.status--error,
+  .dnb-textarea__textarea .dnb-textarea__status--error {
+    box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
+  .dnb-textarea__textarea ::selection {
+    background-color: var(--color-mint-green);
+    color: var(--textarea-text-color--focus);
+    text-shadow: none; }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .dnb-textarea__textarea {
+      -ms-overflow-style: -ms-autohiding-scrollba;
+      box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }
+
+.dnb-textarea__placeholder {
+  color: var(--textarea-text-color);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--textarea-rows, 2); }
+
+.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea, .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:hover {
+  box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
+
+.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder,
+.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
+  display: none; }
+
+textarea.dnb-textarea {
+  border-radius: 0.5rem;
+  /* IE11 fix */ }
+  textarea.dnb-textarea,
+  .dnb-textarea--virgin textarea.dnb-textarea,
+  .dnb-textarea--initial textarea.dnb-textarea {
+    color: var(--textarea-text-color);
+    background-color: var(--textarea-background-color); }
+  .dnb-textarea--dirty textarea.dnb-textarea {
+    color: var(--textarea-text-color--changed);
+    background-color: var(--textarea-background-color--changed); }
+  .dnb-textarea--focus textarea.dnb-textarea, textarea.dnb-textarea:focus, textarea.dnb-textarea:hover {
+    outline: none; }
+    .dnb-textarea--focus textarea.dnb-textarea:not([disabled]), textarea.dnb-textarea:focus:not([disabled]), textarea.dnb-textarea:hover:not([disabled]) {
+      color: var(--textarea-text-color--focus);
+      background-color: var(--textarea-background-color--focus); }
+      .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
+        box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
+        /* IE11 fix */ }
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
+            box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+  textarea.dnb-textarea[disabled],
+  .dnb-textarea--disabled textarea.dnb-textarea {
+    user-select: none;
+    color: var(--textarea-text-color--disabled);
+    background-color: var(--textarea-background-color--disabled);
+    box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
+    textarea.dnb-textarea[disabled]::-webkit-scrollbar,
+    .dnb-textarea--disabled textarea.dnb-textarea::-webkit-scrollbar {
+      width: 0; }
+  textarea.dnb-textarea.status--error,
+  textarea.dnb-textarea .dnb-textarea__status--error {
+    box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
+  textarea.dnb-textarea ::selection {
+    background-color: var(--color-mint-green);
+    color: var(--textarea-text-color--focus);
+    text-shadow: none; }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    textarea.dnb-textarea {
+      -ms-overflow-style: -ms-autohiding-scrollba;
+      box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }
+
+:root {
+  --textarea-vertical-correction: 0.25rem;
+  --textarea-padding-width: 0.5rem;
+  --textarea-border-inner: 0 0 0 var(--textarea-padding-width)
+    var(--color-white); }
+
+.dnb-textarea {
+  display: inline-flex;
+  flex-direction: column;
+  margin: var(--textarea-padding-width); }
+  .dnb-textarea__shell {
+    display: inline-flex;
+    position: relative; }
+  .dnb-textarea__placeholder {
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    padding: var(--textarea-padding-width);
+    padding-top: calc( var(--textarea-padding-width) - var(--textarea-vertical-correction));
+    padding-bottom: var(--textarea-vertical-correction);
+    line-height: 1.5rem; }
+  .dnb-textarea__textarea {
+    border: none;
+    border-radius: 1px;
+    box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt);
+    padding: var(--textarea-padding-width);
+    padding-top: calc( var(--textarea-padding-width) - var(--textarea-vertical-correction));
+    padding-bottom: var(--textarea-vertical-correction);
+    line-height: 1.5rem; }
+  .dnb-textarea__placeholder, .dnb-textarea__textarea {
+    text-align: left; }
+  .dnb-textarea__align--right .dnb-textarea__textarea,
+  .dnb-textarea__align--right .dnb-textarea__placeholder {
+    text-align: right; }
+  .dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder,
+  .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
+    opacity: 0.5; }
+  .dnb-textarea__form-status .dnb-form-status {
+    margin: 1rem 0 0 calc(1px - 1px - var(--textarea-padding-width)); }
+
+textarea.dnb-textarea {
+  display: inline-block;
+  margin: var(--textarea-padding-width);
+  border: none;
+  border-radius: 1px;
+  box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt);
+  padding: var(--textarea-padding-width);
+  padding-top: calc( var(--textarea-padding-width) - var(--textarea-vertical-correction));
+  padding-bottom: var(--textarea-vertical-correction);
+  line-height: 1.5rem;
+  border-radius: 0.5rem;
+  /* IE11 fix */ }
+  textarea.dnb-textarea,
+  .dnb-textarea--virgin textarea.dnb-textarea,
+  .dnb-textarea--initial textarea.dnb-textarea {
+    color: var(--textarea-text-color);
+    background-color: var(--textarea-background-color); }
+  .dnb-textarea--dirty textarea.dnb-textarea {
+    color: var(--textarea-text-color--changed);
+    background-color: var(--textarea-background-color--changed); }
+  .dnb-textarea--focus textarea.dnb-textarea, textarea.dnb-textarea:focus, textarea.dnb-textarea:hover {
+    outline: none; }
+    .dnb-textarea--focus textarea.dnb-textarea:not([disabled]), textarea.dnb-textarea:focus:not([disabled]), textarea.dnb-textarea:hover:not([disabled]) {
+      color: var(--textarea-text-color--focus);
+      background-color: var(--textarea-background-color--focus); }
+      .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
+        box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
+        /* IE11 fix */ }
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
+            box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+  textarea.dnb-textarea[disabled],
+  .dnb-textarea--disabled textarea.dnb-textarea {
+    user-select: none;
+    color: var(--textarea-text-color--disabled);
+    background-color: var(--textarea-background-color--disabled);
+    box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
+    textarea.dnb-textarea[disabled]::-webkit-scrollbar,
+    .dnb-textarea--disabled textarea.dnb-textarea::-webkit-scrollbar {
+      width: 0; }
+  textarea.dnb-textarea.status--error,
+  textarea.dnb-textarea .dnb-textarea__status--error {
+    box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
+  textarea.dnb-textarea ::selection {
+    background-color: var(--color-mint-green);
+    color: var(--textarea-text-color--focus);
+    text-shadow: none; }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    textarea.dnb-textarea {
+      -ms-overflow-style: -ms-autohiding-scrollba;
+      box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }
+  label + textarea.dnb-textarea[class*='__form-status'] {
+    vertical-align: baseline; }
+
+.dnb-form-group__position--vertical > .dnb-textarea {
+  transform: translateY(2px); }
+
+.dnb-form-group:not(.dnb-form-group__position--vertical) > .dnb-textarea, .dnb-form-group__position--hoizontal:not(.dnb-form-group__position--vertical) > .dnb-textarea {
+  transform: translateY(calc(1px - 1px - var(--textarea-vertical-correction)));
+  margin-top: 0; }
+"
+`;
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-error-textarea-style-1-355e0.snap.png b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-error-textarea-style-1-355e0.snap.png
new file mode 100644
index 00000000000..ef5b0ae2bcb
Binary files /dev/null and b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-error-textarea-style-1-355e0.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png
new file mode 100644
index 00000000000..b1f4f2714ec
Binary files /dev/null and b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-focus-textarea-style-1-9fcc3.snap.png b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-focus-textarea-style-1-9fcc3.snap.png
new file mode 100644
index 00000000000..0fb98b9594c
Binary files /dev/null and b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-focus-textarea-style-1-9fcc3.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-hover-textarea-style-1-b1419.snap.png b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-hover-textarea-style-1-b1419.snap.png
new file mode 100644
index 00000000000..f025afa905d
Binary files /dev/null and b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-hover-textarea-style-1-b1419.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/textarea/index.js b/packages/dnb-ui-lib/src/components/textarea/index.js
new file mode 100644
index 00000000000..fe8d1af5a8b
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/index.js
@@ -0,0 +1,6 @@
+/**
+ * Component Entry
+ *
+ */
+
+export * from './Textarea'
diff --git a/packages/dnb-ui-lib/src/components/textarea/style.js b/packages/dnb-ui-lib/src/components/textarea/style.js
new file mode 100644
index 00000000000..065d27671e3
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/style.js
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './style/dnb-textarea.scss'
diff --git a/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss b/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
new file mode 100644
index 00000000000..afaeff6e246
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
@@ -0,0 +1,120 @@
+/*
+* Textarea component
+*
+*/
+
+@import './themes/dnb-textarea-theme-ui.scss';
+
+:root {
+  --textarea-vertical-correction: 0.25rem; // for chromium browsers
+  --textarea-padding-width: 0.5rem;
+  --textarea-border-inner: 0 0 0 var(--textarea-padding-width)
+    var(--color-white);
+}
+
+@mixin textareaStyleCommon() {
+  padding: var(--textarea-padding-width);
+  padding-top: calc(
+    var(--textarea-padding-width) - var(--textarea-vertical-correction)
+  );
+  padding-bottom: var(--textarea-vertical-correction);
+
+  line-height: 1.5rem;
+}
+@mixin textareaStyle() {
+  border: none;
+  border-radius: 1px;
+
+  box-shadow: var(--textarea-border-inner),
+    0 0 0 calc(var(--textarea-padding-width) + 0.0625rem)
+      var(--color-sea-green-alt);
+
+  @include textareaStyleCommon();
+}
+
+.dnb-textarea {
+  display: inline-flex;
+  flex-direction: column;
+
+  margin: var(--textarea-padding-width);
+
+  &__shell {
+    display: inline-flex;
+    position: relative;
+  }
+
+  &__placeholder {
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    overflow: hidden;
+    width: 100%; // to get overflow working properly
+    height: 100%; // to get overflow working properly
+
+    @include textareaStyleCommon();
+  }
+
+  &__textarea {
+    @include textareaStyle();
+  }
+
+  &__placeholder,
+  &__textarea {
+    text-align: left;
+  }
+
+  &__align--right &__textarea,
+  &__align--right &__placeholder {
+    text-align: right;
+  }
+
+  // hide placeholder on focus
+  &--has-content &__textarea ~ &__placeholder,
+  &--focus &__textarea:not([disabled]):not([readonly]) ~ &__placeholder {
+    opacity: 0.5;
+  }
+
+  &__form-status .dnb-form-status {
+    margin: 1rem 0 0 calc(1px - 1px - var(--textarea-padding-width));
+  }
+}
+
+textarea.dnb-textarea {
+  display: inline-block;
+  margin: var(--textarea-padding-width);
+
+  @include textareaStyle();
+  @include textareaTheme();
+
+  label + &[class*='__form-status'] {
+    vertical-align: baseline;
+  }
+}
+
+.dnb-form-group {
+  // for vertical labeling
+  &__position--vertical {
+    // To fake, that we actuallyhave 8px between
+    > .dnb-textarea {
+      transform: translateY(2px);
+    }
+  }
+
+  // for hoizontal labeling
+  &,
+  &__position--hoizontal {
+    // To fake, that the first line is aligned with the label
+    &:not(.dnb-form-group__position--vertical) {
+      > .dnb-textarea {
+        transform: translateY(
+          calc(1px - 1px - var(--textarea-vertical-correction))
+        );
+        margin-top: 0;
+      }
+    }
+  }
+}
diff --git a/packages/dnb-ui-lib/src/components/textarea/style/dnb-textarea.scss b/packages/dnb-ui-lib/src/components/textarea/style/dnb-textarea.scss
new file mode 100644
index 00000000000..8082f9ba8f5
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/style/dnb-textarea.scss
@@ -0,0 +1,16 @@
+/*
+* DNB Textarea
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+// import dependencies
+@import '../../form-label/style/dnb-form-label.scss';
+@import '../../form-status/style/dnb-form-status.scss';
+
+.dnb-textarea {
+  @include componentReset();
+}
+
+@import './_textarea.scss';
diff --git a/packages/dnb-ui-lib/src/components/textarea/style/index.js b/packages/dnb-ui-lib/src/components/textarea/style/index.js
new file mode 100644
index 00000000000..ff29f520e0a
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/style/index.js
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-textarea.scss'
diff --git a/packages/dnb-ui-lib/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss b/packages/dnb-ui-lib/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
new file mode 100644
index 00000000000..f39f5606ff4
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
@@ -0,0 +1,133 @@
+/*
+* Textarea theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+
+:root {
+  --textarea-text-color: var(--color-sea-green);
+  --textarea-text-color--focus: var(--color-sea-green);
+  --textarea-text-color--changed: var(--color-emerald-green);
+  --textarea-text-color--disabled: var(--color-sea-green-alt-30);
+  --textarea-background-color: var(--color-white);
+  --textarea-background-color--focus: var(--color-white);
+  --textarea-background-color--changed: var(--color-white);
+  --textarea-background-color--disabled: var(--color-mint-green-12);
+}
+
+@mixin textareaTheme() {
+  border-radius: 0.5rem; // will be actually 1rem/16px
+
+  &,
+  .dnb-textarea--virgin &,
+  .dnb-textarea--initial & {
+    color: var(--textarea-text-color);
+    background-color: var(--textarea-background-color);
+  }
+
+  // content changed
+  .dnb-textarea--dirty & {
+    // Background color of textarea when it has content
+    color: var(--textarea-text-color--changed);
+    background-color: var(--textarea-background-color--changed);
+  }
+
+  // hover and focus
+  .dnb-textarea--focus &,
+  &:focus /* for the HTML element */,
+  &:hover {
+    outline: none;
+    &:not([disabled]):not(#{&}--disabled) {
+      color: var(--textarea-text-color--focus);
+      background-color: var(--textarea-background-color--focus);
+      &:not(.status--error) /* for the HTML element */ {
+        box-shadow: var(--textarea-border-inner),
+          0 0 0 calc(var(--textarea-padding-width) + 0.125rem)
+            var(--color-emerald-green);
+
+        /* IE11 fix */
+        @media screen and (-ms-high-contrast: active),
+          (-ms-high-contrast: none) {
+          box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+        }
+      }
+    }
+  }
+
+  // disabled
+  &[disabled] /* for the HTML element */,
+  .dnb-textarea--disabled & {
+    user-select: none;
+
+    color: var(--textarea-text-color--disabled);
+    background-color: var(--textarea-background-color--disabled);
+
+    box-shadow: 0 0 0 var(--textarea-padding-width)
+        var(--color-mint-green-12),
+      0 0 0 calc(var(--textarea-padding-width) + 0.0625rem)
+        var(--color-sea-green-alt-30);
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+  }
+
+  // only fot the HTML element textarea
+  &.status--error /* for the HTML element */,
+  .dnb-textarea__status--error/* for the HTML element */ {
+    box-shadow: var(--textarea-border-inner),
+      0 0 0 calc(var(--textarea-padding-width) + 0.125rem)
+        var(--color-cherry-red);
+  }
+
+  ::selection {
+    background-color: var(--color-mint-green);
+    color: var(--textarea-text-color--focus);
+    text-shadow: none;
+  }
+
+  /* IE11 fix */
+  @media screen and (-ms-high-contrast: active),
+    (-ms-high-contrast: none) {
+    -ms-overflow-style: -ms-autohiding-scrollba;
+    box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt);
+  }
+}
+
+.dnb-textarea {
+  &__textarea {
+    @include textareaTheme();
+  }
+
+  &__placeholder {
+    color: var(--textarea-text-color);
+
+    // Required for line-clamp
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+
+    // Limit the text block to two lines
+    -webkit-line-clamp: var(--textarea-rows, 2);
+  }
+
+  // with status_state = "error"
+  &__status--error:not(#{&}--focus) &__textarea {
+    &,
+    &:not(#{&}--disabled):hover {
+      box-shadow: var(--textarea-border-inner),
+        0 0 0 calc(var(--textarea-padding-width) + 0.125rem)
+          var(--color-cherry-red);
+    }
+  }
+
+  // hide placeholder on focus
+  &--has-content &__textarea ~ &__placeholder,
+  &--focus &__textarea:not([disabled]):not([readonly]) ~ &__placeholder {
+    display: none;
+  }
+}
+
+textarea.dnb-textarea {
+  @include textareaTheme();
+}
diff --git a/packages/dnb-ui-lib/src/components/textarea/style/themes/ui.js b/packages/dnb-ui-lib/src/components/textarea/style/themes/ui.js
new file mode 100644
index 00000000000..f18017bc590
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/style/themes/ui.js
@@ -0,0 +1,6 @@
+/**
+ * Imports the default theme
+ *
+ */
+
+import './dnb-textarea-theme-ui.scss'
diff --git a/packages/dnb-ui-lib/src/components/textarea/web-component.js b/packages/dnb-ui-lib/src/components/textarea/web-component.js
new file mode 100644
index 00000000000..68737cc2ae4
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/textarea/web-component.js
@@ -0,0 +1,9 @@
+/**
+ * This file is used to enable Web Components
+ *
+ */
+
+export * from './index'
+import { enableWebComponents } from '../index'
+
+enableWebComponents()
diff --git a/packages/dnb-ui-lib/src/elements/Textarea.js b/packages/dnb-ui-lib/src/elements/Textarea.js
deleted file mode 100644
index a671a7af2ed..00000000000
--- a/packages/dnb-ui-lib/src/elements/Textarea.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * HTML Element
- *
- */
-
-import React from 'react'
-import E from './Element'
-
-const Textarea = p => <E is="textarea" {...p} />
-Textarea.tagName = 'dnb-textarea'
-export default Textarea
diff --git a/packages/dnb-ui-lib/src/elements/index.js b/packages/dnb-ui-lib/src/elements/index.js
index 280c07bbc92..0a8540e65f2 100644
--- a/packages/dnb-ui-lib/src/elements/index.js
+++ b/packages/dnb-ui-lib/src/elements/index.js
@@ -28,7 +28,6 @@ import Ol from './Ol'
 import P from './P'
 import Section from './Section'
 import Table from './Table'
-import Textarea from './Textarea'
 import Ul from './Ul'
 
 // define / export all the aviable components
@@ -51,6 +50,5 @@ export {
   P,
   Section,
   Table,
-  Textarea,
   Ul
 }
diff --git a/packages/dnb-ui-lib/src/elements/lib.js b/packages/dnb-ui-lib/src/elements/lib.js
index 49ef63093d2..7375158e08e 100644
--- a/packages/dnb-ui-lib/src/elements/lib.js
+++ b/packages/dnb-ui-lib/src/elements/lib.js
@@ -28,7 +28,6 @@ import Ol from './Ol'
 import P from './P'
 import Section from './Section'
 import Table from './Table'
-import Textarea from './Textarea'
 import Ul from './Ul'
 
 // define / export all the aviable components
@@ -51,7 +50,6 @@ export {
   P,
   Section,
   Table,
-  Textarea,
   Ul
 }
 
@@ -75,7 +73,6 @@ export const getElements = () => {
     P,
     Section,
     Table,
-    Textarea,
     Ul
   }
 }
diff --git a/packages/dnb-ui-lib/src/index.js b/packages/dnb-ui-lib/src/index.js
index 755cc68dd74..b54c09468d5 100644
--- a/packages/dnb-ui-lib/src/index.js
+++ b/packages/dnb-ui-lib/src/index.js
@@ -30,6 +30,7 @@ import Slider from './components/slider/Slider'
 import StepIndicator from './components/step-indicator/StepIndicator'
 import Switch from './components/switch/Switch'
 import Tabs from './components/tabs/Tabs'
+import Textarea from './components/textarea/Textarea'
 import Anchor from './elements/Anchor'
 import Blockquote from './elements/Blockquote'
 import Code from './elements/Code'
@@ -48,7 +49,6 @@ import Ol from './elements/Ol'
 import P from './elements/P'
 import Section from './elements/Section'
 import Table from './elements/Table'
-import Textarea from './elements/Textarea'
 import Ul from './elements/Ul'
 
 // define / export all the aviable components
@@ -73,6 +73,7 @@ export {
   StepIndicator,
   Switch,
   Tabs,
+  Textarea,
   Anchor,
   Blockquote,
   Code,
@@ -91,7 +92,6 @@ export {
   P,
   Section,
   Table,
-  Textarea,
   Ul
 }
 
diff --git a/packages/dnb-ui-lib/src/style/core/helper-classes.scss b/packages/dnb-ui-lib/src/style/core/helper-classes.scss
index f937cd70980..dc1ce0bb3a5 100644
--- a/packages/dnb-ui-lib/src/style/core/helper-classes.scss
+++ b/packages/dnb-ui-lib/src/style/core/helper-classes.scss
@@ -111,11 +111,6 @@
       margin: 0;
       margin-bottom: 0.5rem;
     }
-
-    // To fake, that we actuallyhave 8px between
-    > textarea {
-      transform: translateY(2px);
-    }
   }
 
   // for hoizontal labeling
@@ -126,16 +121,6 @@
       margin: 0;
       margin-right: 1rem;
     }
-
-    // To fake, that the first line is aligned with the label
-    &:not(.dnb-form-group__position--vertical) {
-      > textarea {
-        transform: translateY(
-          calc(1px - 1px - var(--textarea-vertical-correction))
-        );
-        margin-top: 0;
-      }
-    }
   }
 }
 .dnb-form-row {
diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
index 8e8c65e156e..d844de8a76e 100644
--- a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
+++ b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
@@ -24,3 +24,4 @@
 @import '../components/step-indicator/style/_step-indicator.scss';
 @import '../components/switch/style/_switch.scss';
 @import '../components/tabs/style/_tabs.scss';
+@import '../components/textarea/style/_textarea.scss';
diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/Textarea.screenshot.test.js b/packages/dnb-ui-lib/src/style/elements/__tests__/Textarea.screenshot.test.js
deleted file mode 100644
index 88abc9a8ac7..00000000000
--- a/packages/dnb-ui-lib/src/style/elements/__tests__/Textarea.screenshot.test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Screenshot Test
- * This file will not run on "test:staged" because we dont require any related files
- */
-
-import {
-  testPageScreenshot,
-  setupPageScreenshot
-} from '../../../core/jest/jestSetupScreenshots'
-
-describe('Textarea screenshot', () => {
-  setupPageScreenshot({ url: '/uilib/elements/textarea' })
-  it('have to match the "default" textarea style', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: '[data-dnb-test="textarea-default"]',
-      // Only for screenshot testing - make textarea having same width on linux chromium
-      styleSelector: '[data-dnb-test="textarea-default"] textarea',
-      style: { width: '14rem' }
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-  // we do not make a active state, due to the differences of font rendering
-})
diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png
deleted file mode 100644
index ed715f89ff1..00000000000
Binary files a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png and /dev/null differ
diff --git a/packages/dnb-ui-lib/src/style/elements/textarea.scss b/packages/dnb-ui-lib/src/style/elements/textarea.scss
deleted file mode 100644
index bb646bc474a..00000000000
--- a/packages/dnb-ui-lib/src/style/elements/textarea.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Textarea
- *
- */
-
-:root {
-  --textarea-vertical-correction: 0.25rem; // for chromium browsers
-  --textarea-padding-width: 0.5rem;
-  --textarea-border-inner: 0 0 0 var(--textarea-padding-width)
-    var(--color-white);
-}
-
-@mixin textareaStyle() {
-  display: block;
-
-  margin: var(--textarea-padding-width);
-  padding: var(--textarea-padding-width);
-  padding-top: calc(
-    var(--textarea-padding-width) - var(--textarea-vertical-correction)
-  );
-  padding-bottom: var(--textarea-vertical-correction);
-
-  border: none;
-  border-radius: 1px;
-
-  line-height: 1.5rem;
-
-  box-shadow: var(--textarea-border-inner),
-    0 0 0 calc(var(--textarea-padding-width) + 0.0625rem)
-      var(--color-sea-green-alt);
-
-  /* IE11 fix */
-  @media screen and (-ms-high-contrast: active),
-    (-ms-high-contrast: none) {
-    -ms-overflow-style: -ms-autohiding-scrollba;
-    box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt);
-  }
-
-  &.status--error,
-  .dnb-textarea__status--error {
-    box-shadow: var(--textarea-border-inner),
-      0 0 0 calc(var(--textarea-padding-width) + 0.125rem)
-        var(--color-cherry-red);
-  }
-  @include hover(true) {
-    &:not(.status--error) {
-      box-shadow: var(--textarea-border-inner),
-        0 0 0 calc(var(--textarea-padding-width) + 0.125rem)
-          var(--color-emerald-green);
-
-      /* IE11 fix */
-      @media screen and (-ms-high-contrast: active),
-        (-ms-high-contrast: none) {
-        box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-      }
-    }
-  }
-  &:focus {
-    outline: none;
-    box-shadow: var(--textarea-border-inner),
-      0 0 0 calc(var(--textarea-padding-width) + 0.125rem)
-        var(--color-emerald-green);
-
-    /* IE11 fix */
-    @media screen and (-ms-high-contrast: active),
-      (-ms-high-contrast: none) {
-      box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-    }
-  }
-  &[disabled] {
-    user-select: none;
-
-    color: var(--color-sea-green-alt-30);
-    background-color: var(--color-mint-green-12);
-    box-shadow: 0 0 0 var(--textarea-padding-width)
-        var(--color-mint-green-12),
-      0 0 0 calc(var(--textarea-padding-width) + 0.0625rem)
-        var(--color-sea-green-alt-30);
-
-    &::-webkit-scrollbar {
-      width: 0;
-    }
-  }
-}
-@mixin textareaTag() {
-  textarea {
-    @include textareaStyle();
-  }
-}
-
-.dnb-textarea {
-  @include textareaStyle();
-}
diff --git a/packages/dnb-ui-lib/src/style/elements/ui-elements.scss b/packages/dnb-ui-lib/src/style/elements/ui-elements.scss
index a8969bd0c94..8b09ef8a2a5 100644
--- a/packages/dnb-ui-lib/src/style/elements/ui-elements.scss
+++ b/packages/dnb-ui-lib/src/style/elements/ui-elements.scss
@@ -12,7 +12,7 @@
 @import './lists.scss';
 @import './table.scss';
 @import './label.scss';
-@import './textarea.scss';
+// @import './textarea.scss'; // Moved over to be a part of components since v3.23.0
 @import './form.scss';
 @import './code.scss';
 @import './image.scss';
diff --git a/packages/dnb-ui-lib/src/style/elements/ui-tags.scss b/packages/dnb-ui-lib/src/style/elements/ui-tags.scss
index 5e401657fbb..8a4e7d6a115 100644
--- a/packages/dnb-ui-lib/src/style/elements/ui-tags.scss
+++ b/packages/dnb-ui-lib/src/style/elements/ui-tags.scss
@@ -26,7 +26,7 @@
   // form
   @include formTag();
   @include labelTag();
-  @include textareaTag();
+  // @include textareaTag(); // Deprecated sice v. 3.23.0
 
   // additional
   @include codeTag();
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
index f9612176544..df0ac969df9 100644
--- a/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
@@ -37,3 +37,4 @@
 @import '../../../components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss';
 @import '../../../components/switch/style/themes/dnb-switch-theme-ui.scss';
 @import '../../../components/tabs/style/themes/dnb-tabs-theme-ui.scss';
+@import '../../../components/textarea/style/themes/dnb-textarea-theme-ui.scss';
diff --git a/packages/dnb-ui-lib/stories/components/Textarea.js b/packages/dnb-ui-lib/stories/components/Textarea.js
new file mode 100644
index 00000000000..0282f197604
--- /dev/null
+++ b/packages/dnb-ui-lib/stories/components/Textarea.js
@@ -0,0 +1,87 @@
+/**
+ * dnb-ui-lib Component Story
+ *
+ */
+
+import React /* , { useState, useEffect } */ from 'react'
+import { Wrapper, Box } from '../helpers'
+// import styled from '@emotion/styled'
+
+import { Textarea } from '../../src/components'
+
+export default [
+  'Textarea',
+  () => (
+    <Wrapper className="dnb-spacing">
+      <Box>
+        <Textarea
+          label="Label:"
+          rows="5"
+          cols="33"
+          value="Nec litora inceptos vestibulum id interdum donec gravida
+              nostra lacinia bibendum hendrerit porttitor volutpat nam duis
+              nisl scelerisque sapien erat"
+          on_change={({ value }) => {
+            console.log('on_change', value)
+          }}
+          on_focus={() => {
+            console.log('on_focus')
+          }}
+          on_blur={() => {
+            console.log('on_blur')
+          }}
+        />
+        <p className="dnb-p">I have still to be on the grid!</p>
+      </Box>
+      <Box>
+        <Textarea
+          label="Placeholder:"
+          rows="3"
+          align="right"
+          placeholder="Nec litora inceptos vestibulum id interdum donec gravida nostra
+              lacinia bibendum hendrerit porttitor volutpat nam duis nisl
+              scelerisque sapien erat"
+          description="Nec litora inceptos vestibulum id interdum donec gravida nostra
+              lacinia bibendum hendrerit porttitor volutpat nam duis nisl
+              scelerisque sapien erat"
+        />
+        <p className="dnb-p">I have still to be on the grid!</p>
+      </Box>
+      <Box>
+        <Textarea
+          label="Max Length 20:"
+          label_position="vertical"
+          rows="5"
+          cols="33"
+          maxLength="20"
+          required
+          value="Nec litora inceptos vestibulum id interdum donec gravida nostra
+              lacinia bibendum hendrerit porttitor volutpat nam duis nisl
+              scelerisque sapien erat"
+        />
+        <p className="dnb-p">I have still to be on the grid!</p>
+      </Box>
+      <Box>
+        <Textarea
+          label="Error Message:"
+          cols="33"
+          value="Nec litora inceptos vestibulum id interdum donec gravida nostra
+              lacinia bibendum hendrerit porttitor volutpat nam duis nisl
+              scelerisque sapien erat"
+          status="Message to the user"
+        />
+        <p className="dnb-p">I have still to be on the grid!</p>
+      </Box>
+      <Box>
+        <Textarea
+          label="Disabled:"
+          disabled
+          value="Nec litora inceptos vestibulum id interdum donec gravida nostra
+              lacinia bibendum hendrerit porttitor volutpat nam duis nisl
+              scelerisque sapien erat"
+        />
+        <p className="dnb-p">I have still to be on the grid!</p>
+      </Box>
+    </Wrapper>
+  )
+]
diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
index 5080871ef68..3bdcf124190 100644
--- a/packages/dnb-ui-lib/stories/componentsStories.js
+++ b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -10,6 +10,7 @@ import styled from '@emotion/styled'
 // UI Components
 import Radio from './components/Radio'
 import DatePicker from './components/DatePicker'
+import Textarea from './components/Textarea'
 import {
   Button,
   Tabs,
@@ -33,6 +34,7 @@ export default stories
 
 stories.push(Radio)
 stories.push(DatePicker)
+stories.push(Textarea)
 
 const CustomStyle = styled.div`
   p {
diff --git a/packages/dnb-ui-lib/stories/elementsStories.js b/packages/dnb-ui-lib/stories/elementsStories.js
index 9d623810038..f763f190c9d 100644
--- a/packages/dnb-ui-lib/stories/elementsStories.js
+++ b/packages/dnb-ui-lib/stories/elementsStories.js
@@ -24,10 +24,6 @@ const CustomStyles = styled.div`
     }
   }
 
-  textarea {
-    position: relative;
-  }
-
   blockquote {
     max-width: 220px;
   }
@@ -62,10 +58,10 @@ const CustomStyles = styled.div`
   p {
     background-color: rgba(0, 0, 0, 0.15);
   }
-  .dnb-form-group + p,
+  ${'' /* .dnb-form-group + p,
   textarea + p {
     margin-top: 1rem;
-  }
+  } */}
 `
 
 stories.push([
@@ -296,7 +292,9 @@ stories.push([
       <CustomStyles>
         <Box>
           <div className="dnb-form-group dnb-form-group__position--vertical">
-            <label htmlFor="hendrerit">Label for the textarea:</label>
+            <label className="dnb-label" htmlFor="hendrerit">
+              Label for the textarea:
+            </label>
             <textarea
               className="dnb-textarea"
               id="hendrerit"
@@ -311,10 +309,13 @@ stories.push([
         </Box>
         <Box>
           <div className="dnb-form-group">
-            <label htmlFor="litora">Label for the textarea:</label>
+            <label className="dnb-label" htmlFor="litora">
+              Label for the textarea:
+            </label>
             <textarea
               className="dnb-textarea"
               id="litora"
+              rows="3"
               placeholder="Nec litora inceptos vestibulum id interdum donec gravida nostra
             lacinia bibendum hendrerit porttitor volutpat nam duis nisl
             scelerisque sapien erat"
@@ -338,7 +339,9 @@ stories.push([
         </Box>
         <Box>
           <div className="dnb-form-group dnb-form-group__position--vertical">
-            <label htmlFor="vestibulum">Label:</label>
+            <label className="dnb-label" htmlFor="vestibulum">
+              Label:
+            </label>
             <textarea
               id="vestibulum"
               className="dnb-textarea status--error"
@@ -353,12 +356,14 @@ stories.push([
         </Box>
         <Box>
           <div className="dnb-form-group">
-            <label htmlFor="volutpat">Label:</label>
+            <label className="dnb-label" htmlFor="volutpat">
+              Label:
+            </label>
             <textarea
               className="dnb-textarea"
               id="volutpat"
               disabled
-              readOnly
+              // readOnly
               cols="33"
               defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra
             lacinia bibendum hendrerit porttitor volutpat nam duis nisl