Textarea

.c-float-container > .c-textarea

The Textarea represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

See Float Container for details about the wrapper element and placeholder handling.
See Input Groups for combinations of Input Fields, Selects and Buttons or Checkboxes.
See Forms Organism for form validation examples.

Textarea with Predefined Height

The default height of the textarea can be defined by using the rows attribute, e.g. rows="5" and can be adjusted by the user by resizing the textarea.

If no height is defined, the height will be the same as the height equals the height of rows="3".
rows="1" equals the height of Input Fields.

Textarea Without Defined Rows

Textarea With 3 Rows

Textarea With 1 Row

Textarea With 5 Rows

Show Code

html

<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <label class="c-label" for="textarea-example-1">Textarea Without Defined Rows</label>
    <textarea class="c-textarea" name="" id="textarea-example-1" data-placeholder=".. and Placeholder Text" placeholder=""></textarea>
  </div>
  <div class="c-float-container">
    <label class="c-label" for="textarea-example-2">Textarea With 3 Rows</label>
    <textarea class="c-textarea" name="" rows="3" id="textarea-example-2" data-placeholder=".. and Placeholder Text" placeholder=""></textarea>
  </div>
</div>
<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <label class="c-label" for="textarea-example-3">Textarea With 1 Row</label>
    <textarea class="c-textarea" name="" rows="1" id="textarea-example-3" data-placeholder=".. and Placeholder Text" placeholder=""></textarea>
  </div>
  <div class="c-float-container">
    <label class="c-label" for="textarea-example-4">Textarea With 5 Rows</label>
    <textarea class="c-textarea" name="" rows="5" id="textarea-example-4" data-placeholder=".. and Placeholder Text" placeholder=""></textarea>
  </div>
</div>

Textarea with Auto-Height deprecated

Make the textarea adjust its height automatically to fit text by using the autosize plugin (See Autosize)

Add the class .-is-autosize for styling
initialize like this: autosize($('#any-selector'));
or via the class .flexible-textfield inside plausi

Autosize Textarea With Icon

Input field for styling reference

Autosize Textarea Label

Input field for styling reference

Show Code

html


<div class="h-flex h-flex-row h-align-start gap-m">
  <div class="c-float-container">
    <div class="c-float-container__icon">
      <span class="far fa-monkey" aria-hidden="true"></span>
    </div>
    <label class="c-label" for="textarea-autosize">Autosize Textarea With Icon</label>
    <textarea class="c-textarea -is-autosize js-demo-autosize" name="" id="textarea-autosize" data-placeholder=".. and Placeholder Text" placeholder="">Just a single line..</textarea>
  </div>
  <div class="c-float-container -has-input">
    <div class="c-float-container__icon">
      <span class="far fa-monkey" aria-hidden="true"></span>
    </div>
    <label class="c-label" for="input1-test">Input field for styling reference</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" placeholder="" id="input1-test" name="" value="Just a single line.." />
  </div>
</div>

<div class="h-flex h-flex-row h-align-start gap-m">
  <div class="c-float-container">
    <textarea class="c-textarea -is-autosize js-demo-autosize" rows="1" name="" placeholder="Example Placeholder" id="textarea-autosize-nolabel">Just a single line..</textarea>
  </div>
  <div class="c-float-container -has-input">
    <input type="text" class="c-input" id="input1-test-nolabel" name="" placeholder="Example Placeholder" value="Just a single line.." />
  </div>
</div>

<div class="h-flex h-flex-row h-align-start gap-m">
  <div class="c-float-container">
    <label class="c-label" for="textarea-autosize-2">Autosize Textarea Label</label>
    <textarea class="c-textarea -is-autosize js-demo-autosize" name="" id="textarea-autosize-2" data-placeholder=".. and Placeholder Text" placeholder="">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </textarea>
  </div>
  <div class="c-float-container -has-input">
    <label class="c-label" for="input2-test">Input field for styling reference</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" placeholder="" id="input2-test" name="" value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. " />
  </div>
</div>

Autosize Textarea (Web Component) recommended

The <pl-autosize-textarea> web component (AutosizeTextarea.js) is the successor to the autosize plugin above. It needs no initialization — it registers itself as a custom element as soon as main.js is loaded, so any <pl-autosize-textarea> in the markup is upgraded automatically.

Instead of measuring scrollHeight on every keystroke, the visible surface is a contenteditable div, which is intrinsically as tall as its text. The real <textarea> stays in the document, hidden, and keeps doing the form work: submission, reset, labels and constraint validation.

Markup contract

the inner <textarea> carries name, value, required, maxlength, minlength, placeholder, disabled, readonly and rows (the minimum height, in lines)
add .c-textarea to that inner <textarea> to get the patternlab field styling, or .c-textarea.-old for the legacy plausi look (including its -error / -warning / -success / -notice / -white modifiers)
max-rows on the host caps the growth, after which the field scrolls
vertical-alignment="top|middle|bottom" on the host aligns the content within the field — useful when rows leaves more room than the text needs. Omit it for top.
with no inner <textarea>, one is built from the host's own attributes

Validation messages

Constraint violations are rendered into a .c-float-container__hint below the field and wired up with aria-describedby, and the container gets -has-error. The text comes from the browser, so it is already translated. The message appears only once the field has been submitted or edited-and-left — a pristine required field stays quiet. Any hint you wrote yourself is left untouched.

Equal-height fields

Put the fields in a .h-flex.h-align-stretch row and they all stay as tall as the tallest one, live, as any of them grows. Use .h-align-start instead to let each field size itself independently.

WARNING

wrap="hard" is not supported: it rewrites the submitted value at the wrap points, which a div cannot reproduce. It is treated as wrap="soft" and logs a warning.

Basic Growth

The field starts at rows and grows with the text. Without rows it starts at two.

Autosize Textarea (grows from 2 rows)

Minimum Height Of 5 Rows

Show Code

html

<div class="h-flex h-flex-row h-align-start gap-m">
  <div class="c-float-container">
    <label class="c-label" for="autosize-basic">Autosize Textarea (grows from 2 rows)</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea" name="autosize-basic" id="autosize-basic">Type a few lines — the field grows with the text instead of scrolling.</textarea>
    </pl-autosize-textarea>
  </div>
  <div class="c-float-container">
    <label class="c-label" for="autosize-rows">Minimum Height Of 5 Rows</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea" name="autosize-rows" id="autosize-rows" rows="5"></textarea>
    </pl-autosize-textarea>
  </div>
</div>

With a Container Icon

The text is indented past the icon, as it is for a plain .c-textarea.

With Container Icon

Show Code

html

<div class="c-float-container">
  <label class="c-label" for="autosize-icon">With Container Icon</label>
  <div class="c-float-container__icon">
    <span class="far fa-monkey" aria-hidden="true"></span>
  </div>
  <pl-autosize-textarea>
    <textarea class="c-textarea" name="autosize-icon" id="autosize-icon">Just a single line..</textarea>
  </pl-autosize-textarea>
</div>

Without a Label

With no label the placeholder shows instead. Give the control an aria-label, or the field has no accessible name.

Show Code

html

<div class="c-float-container">
  <pl-autosize-textarea>
    <textarea class="c-textarea" name="autosize-no-label" id="autosize-no-label" aria-label="Note without a visible label" placeholder="No label, so the placeholder shows instead .."></textarea>
  </pl-autosize-textarea>
</div>

Readonly and Disabled

Readonly stays focusable so its content can be selected and copied; disabled leaves the tab order entirely.

Readonly

Readonly: still selectable and copyable, but not editable.

Disabled

Show Code

html

<div class="h-flex h-flex-row h-align-start gap-m">
  <div class="c-float-container">
    <label class="c-label" for="autosize-readonly">Readonly</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea" name="autosize-readonly" id="autosize-readonly" readonly>Readonly: still selectable and copyable, but not editable.</textarea>
    </pl-autosize-textarea>
  </div>
  <div class="c-float-container">
    <label class="c-label" for="autosize-disabled">Disabled</label>
    <pl-autosize-textarea disabled>
      <textarea class="c-textarea" name="autosize-disabled" id="autosize-disabled" disabled>Disabled.</textarea>
    </pl-autosize-textarea>
  </div>
</div>

Built from Host Attributes

With no inner <textarea>, one is built from the host's attributes. This is the form to use in Vue.

Built From Host Attributes

No inner textarea in the markup — the component builds one from the host's own attributes.

Show Code

html

<div class="c-float-container">
  <label class="c-label" for="autosize-attrs">Built From Host Attributes</label>
  <pl-autosize-textarea name="autosize-attrs" aria-label="Built From Host Attributes" rows="2">No inner textarea in the markup — the component builds one from the host's own attributes.</pl-autosize-textarea>
</div>

Constraint Validation

The hidden control does the form work. Submitting while invalid renders the browser's own message into a .c-float-container__hint.

Show Code

html

<form class="h-flex h-flex-row h-align-start gap-m" onsubmit="event.preventDefault(); this.querySelector('.js-autosize-submitted').hidden = false;">
  <div class="c-float-container">
    <label class="c-label" for="autosize-validation">Required, Max. 80 Characters</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea" name="autosize-validation" id="autosize-validation" required maxlength="80"></textarea>
    </pl-autosize-textarea>
  </div>
  <div class="h-flex h-flex-column h-align-start gap-s">
    <button type="submit" class="c-btn">Submit To Validate</button>
    <span class="js-autosize-submitted" hidden>Submitted — the hidden textarea carried the value.</span>
  </div>
</form>

Equal Height and Vertically Centered

.h-align-stretch on the row keeps every field as tall as the tallest, live, as any of them grows, and vertical-alignment="middle" centres the shorter field's text in the height it inherits.

Show Code

html

<div class="h-flex h-flex-row h-align-stretch gap-m">
  <div class="c-float-container">
    <pl-autosize-textarea vertical-alignment="middle">
      <textarea class="c-textarea" name="autosize-equal-left" id="autosize-equal-left" aria-label="First of two equal-height notes">Type here — the field next to this one keeps the same height.</textarea>
    </pl-autosize-textarea>
  </div>
  <div class="c-float-container">
    <pl-autosize-textarea vertical-alignment="middle">
      <textarea class="c-textarea" name="autosize-equal-right" id="autosize-equal-right" aria-label="Second of two equal-height notes">Both fields stay equally tall.</textarea>
    </pl-autosize-textarea>
  </div>
</div>

On a Dark Background

.c-textarea.-light on the inner control, combined here with vertical-alignment="middle".

vertical-alignment="middle" on a dark background

Show Code

html

<div class="p-b-l h-highlight-block">
  <div class="c-float-container">
    <label class="c-label" for="autosize-valign-middle">vertical-alignment="middle" on a dark background</label>
    <pl-autosize-textarea vertical-alignment="middle">
      <textarea class="c-textarea -light" name="autosize-valign-middle" id="autosize-valign-middle" rows="5">Middle.</textarea>
    </pl-autosize-textarea>
  </div>
</div>

Error and Warning States

.-error and .-warning on the inner control colour the field, exactly as for a plain .c-textarea.

Field With Error State

Please describe the problem in more detail.

Field With Warning State

Double-check this before submitting.

Show Code

html

<div class="h-flex h-flex-row h-align-start gap-m">
  <div class="c-float-container">
    <label class="c-label" for="autosize-error">Field With Error State</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea -error" name="autosize-error" id="autosize-error">This value was rejected.</textarea>
    </pl-autosize-textarea>
    <span class="c-float-container__hint">Please describe the problem in more detail.</span>
  </div>
  <div class="c-float-container">
    <label class="c-label" for="autosize-warning">Field With Warning State</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea -warning" name="autosize-warning" id="autosize-warning">This value looks unusual.</textarea>
    </pl-autosize-textarea>
    <span class="c-float-container__hint">Double-check this before submitting.</span>
  </div>
</div>

Old (Plausi) Style

.c-textarea.-old switches to the legacy look, including its own state modifiers.

Old Style (Web Component)

Old Style With Error

Old Style With Warning

Show Code

html

<div class="h-flex h-flex-row h-align-start gap-m m-b-m">
  <div>
    <label class="c-label -old" for="autosize-old">Old Style (Web Component)</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea -old" name="autosize-old" id="autosize-old" rows="3">Grows with the text, from three rows.</textarea>
    </pl-autosize-textarea>
  </div>
</div>

<div class="h-flex h-flex-row h-align-start gap-m">
  <div>
    <label class="c-label -old" for="autosize-old-error">Old Style With Error</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea -old -error" name="autosize-old-error" id="autosize-old-error" rows="3">Rejected value.</textarea>
    </pl-autosize-textarea>
  </div>
  <div>
    <label class="c-label -old" for="autosize-old-warning">Old Style With Warning</label>
    <pl-autosize-textarea>
      <textarea class="c-textarea -old -warning" name="autosize-old-warning" id="autosize-old-warning" rows="3">Unusual value.</textarea>
    </pl-autosize-textarea>
  </div>
</div>

Textarea without Label

Show Code

html

<div class="h-flex h-flex-row h-align-start gap-m">
  <div class="c-float-container">
    <textarea class="c-textarea" rows="1" name="example-textarea-no-label1" placeholder="Type something ...">Just a single line..</textarea>
  </div>
  <div class="c-float-container">
      <textarea class="c-textarea" name="example-textarea-no-label2" placeholder="Type something ...">Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</textarea>
  </div>
</div>

Textarea on Dark Background

.c-float-container > .c-textarea.-light

Floating Label

Show Code

html

<div class="p-b-l h-highlight-block">
    <div class="c-float-container">
        <label class="c-label" for="textarea2">Floating Label</label>
        <textarea class="c-textarea -light" name="" id="textarea2" data-placeholder=".. and Placeholder Text" placeholder="Example Placeholder">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
    </textarea>
    </div>
</div>

.c-float-container > .c-textarea + .c-float-container__icon[.-small]

JS-Tooltip / Icon Left

JS-Tooltip / Icon Right

CSS-Tooltip / Icon Left

CSS-Tooltip / Icon Right

Show Code

html

<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <label class="c-label" for="textarea-icon-ex-1-info">JS-Tooltip / Icon Left</label>
    <textarea class="c-textarea" name="" id="textarea-icon-ex-1-info" data-placeholder=".. and Placeholder Text" placeholder="">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
    </textarea>
    <div class="c-float-container__icon js-tooltip -small" data-title="Short Tooltip" data-placement="top">
      <span class="far fa-info-circle" aria-hidden="true"></span>
      <span class="h-sr-only">Weitere Informationen</span>
    </div>
  </div>

  <div class="c-float-container">
    <label class="c-label" for="textarea-icon-ex-2-info">JS-Tooltip / Icon Right</label>
    <textarea class="c-textarea" name="" id="textarea-icon-ex-2-info" data-placeholder=".. and Placeholder Text" placeholder="">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
    </textarea>
    <div class="c-float-container__icon -small -right js-tooltip" data-placement="top">
      <span class="far fa-info-circle" aria-hidden="true"></span>
    </div>
    <div class="c-tooltip__content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </div>
</div>


<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <div class="c-float-container__icon -small c-tooltip__trigger -open-top" tabindex="0">
      <span class="far fa-info-circle" aria-hidden="true"></span>
      <span class="h-sr-only">Weitere Informationen</span>
      <div class="c-tooltip m-t-xxs -large m-r-m" role="tooltip">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
    </div>
    <label class="c-label" for="textarea-icon-ex-3-info">CSS-Tooltip / Icon Left</label>
    <textarea class="c-textarea" name="" rows="3" id="textarea-icon-ex-3-info" data-placeholder=".. and Placeholder Text" placeholder="">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
    </textarea>
  </div>
  <div class="c-float-container">
    <label class="c-label" for="textarea-icon-ex-4">CSS-Tooltip / Icon Right</label>
    <textarea class="c-textarea" name="" rows="3" id="textarea-icon-ex-4" data-placeholder=".. and Placeholder Text" placeholder="">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
    </textarea>
    <div class="c-float-container__icon -small c-tooltip__trigger -open-left -open-top -right" tabindex="0">
      <span class="far fa-info-circle" aria-hidden="true"></span>
      <span class="h-sr-only">Weitere Informationen</span>
      <div class="c-tooltip m-t-xxs -large m-r-xs" role="tooltip">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
    </div>
  </div>
</div>

Textarea "Old-Style"

Default Plausi-Textarea

.c-textarea.-old

Label

html

<label class="c-label -old" for="example-old-textarea">Label</label>
<textarea class="c-textarea -old" id="example-old-textarea" name="" value=""  placeholder="Placeholder Text ..."></textarea>

Autosize Example

Autosize Textarea

Show Code

html

<label class="c-label -old" for="demo-autosize">Autosize Textarea</label>
<textarea rows="1" cols="40" class="flexible-textfield c-textarea -old js-demo-autosize" id="demo-autosize">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</textarea>

Utilities

Atoms

Molecules

Organisms

Templates

Vue Components

Logger

Textarea

Textarea with Predefined Height

Textarea with Auto-Height deprecated

Autosize Textarea (Web Component) recommended

Basic Growth

With a Container Icon

Without a Label

Readonly and Disabled

Built from Host Attributes

Constraint Validation

Equal Height and Vertically Centered

On a Dark Background

Error and Warning States

Old (Plausi) Style

Textarea without Label

Textarea on Dark Background

Textarea with Info-Tooltip

Textarea "Old-Style"

Default Plausi-Textarea

Autosize Example

Textarea ​

Textarea with Predefined Height ​

Textarea with Auto-Height deprecated ​

Autosize Textarea (Web Component) recommended ​

Basic Growth ​

With a Container Icon ​

Without a Label ​

Readonly and Disabled ​

Built from Host Attributes ​

Constraint Validation ​

Equal Height and Vertically Centered ​

On a Dark Background ​

Error and Warning States ​

Old (Plausi) Style ​

Textarea without Label ​

Textarea on Dark Background ​

Textarea with Info-Tooltip ​

Textarea "Old-Style" ​

Default Plausi-Textarea ​

Autosize Example ​

Textarea

Textarea with Predefined Height

Textarea with Auto-Height deprecated

Autosize Textarea (Web Component) recommended

Basic Growth

With a Container Icon

Without a Label

Readonly and Disabled

Built from Host Attributes

Constraint Validation

Equal Height and Vertically Centered

On a Dark Background

Error and Warning States

Old (Plausi) Style

Textarea without Label

Textarea on Dark Background

Textarea with Info-Tooltip

Textarea "Old-Style"

Default Plausi-Textarea

Autosize Example