Porsche Design System

Textarea

Table of Contents

Form
Controlled
Slots

Form#

The p-textarea component is a form-associated custom element that integrates seamlessly with forms. Leveraging the ElementInternals API, it functions like a native textarea, ensuring compatibility with form behaviors. However, note that browser support for this API is limited.

Last submitted data:

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<form>
  <p-textarea name="some-name" label="Some Label"></p-textarea>
  <p-button type="submit">Submit</p-button>
  <p-button type="reset">Reset</p-button>
</form>

<p-text>Last submitted data: </p-text>
<script>
  const debugElement = document.querySelector('p-text');
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    debugElement.innerText = `Last submitted data: ${formData.get('some-name')}`;
  });
</script>
</body>
</html>

Controlled#

In the controlled approach, the p-textarea value is externally managed. While the internal value will be updated automatically, you can use the input, change or blur event to update the external state.

Value:

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-textarea name="some-name" label="Some Label"></p-textarea>

<p-text>Value: ''</p-text>
<script>
  const debugElement = document.querySelector('p-text');
  const textarea = document.querySelector('p-textarea');

  textarea.addEventListener('input', (e) => {
    e.target.value = e.detail.target.value;
    setDebugText(e.detail.target.value);
  });

  function setDebugText(value) {
    debugElement.innerText = `Value: ${value}`;
  }
</script>
</body>
</html>

Slots#

Sometimes it's useful to be able to render markup (e.g. an anchor tag) for label or message. Therefore a named slot can be used. Make sure not to define the corresponding property on the host element when a named slot is used (because a property definition is preferred over a named slot). For named slots only phrasing content is allowed.

Some label with a link.Some description with a link.Some error message with a link.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-textarea name="some-name" state="error">
  <span slot="label">
    Some label with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <span slot="description">
    Some description with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <span slot="message">
    Some error message with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
</p-textarea>
<script>

</script>
</body>
</html>