Porsche Design System

Textarea Wrapper

Table of Contents

Counter
Slots

Counter#

If the maxlength attribute is present on the textarea element, a counter will be displayed in the corner. To hide it you can set showCounter to false.

Open in Stackblitz

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

<p-textarea-wrapper label="Some label">
  <textarea name="some-name" maxlength="200"></textarea>
</p-textarea-wrapper>

<p-textarea-wrapper label="Some label" show-counter="false">
  <textarea name="some-name" maxlength="200"></textarea>
</p-textarea-wrapper>
<script>

</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-wrapper state="error">
  <span slot="label" id="some-label-id">
    Some label with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <span slot="description" id="some-description-id">
    Some description with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <textarea name="some-name" aria-labelledby="some-label-id" aria-describedby="some-description-id some-message-id"></textarea>
  <span slot="message" id="some-message-id">
    Some error message with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
</p-textarea-wrapper>
<script>

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