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

<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 (recommended)

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 IconJust a single line..

Input field for styling reference

Just a single line..

Autosize Textarea LabelLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Input field for styling reference

Show Code

<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>

Textarea without Label

Just a single line..

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.

Show Code

<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 LabelLorem 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.

Show Code

<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>

Textarea with Info-Tooltip

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

JS-Tooltip / Icon LeftLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Weitere Informationen

JS-Tooltip / Icon RightLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Weitere Informationen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Tooltip / Icon LeftLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

CSS-Tooltip / Icon RightLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Weitere Informationen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Show Code

<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

<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 TextareaLorem 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.

Show Code

<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>