Find me on GitHub
Breadcrumbs Button Buttongroup Caption Checkbox Datepicker Definition-list Expandable Footer Icons Infochip Inputfield List Loading Media Navbar Pagination Progressbar Progresscircle Radiobutton Select Sidebar Slider Subnav Switch Table Table-expandable Tabs Tag Textarea Tile

Textarea

In groundhog since v0.1.1

Examples


<label for="i0" class="label">Textarea</label>
<textarea rows="4" cols="50" class="textarea" id="i0"></textarea>

    

<label for="i1" class="label">Textarea</label>
<textarea rows="4" cols="50" class="textarea" placeholder="Start typing..." id="i1"></textarea>

    

<label for="i2" class="label">Textarea</label>
<textarea disabled rows="4" cols="50" class="textarea" id="i2"></textarea>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


<label for="i3" class="label">Textarea</label>
<textarea rows="4" cols="50" class="textarea" id="i3" aria-describedby="i3"></textarea>
<p class="hint" id="i3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Introduction

The Groundhog textarea component visually enhances the standard html <textarea> element. It is used to handle user input. It is typically accompanied by a label above. Additionally, there can be a hint text underneath the input.

Including a textarea

  1. To include a Groundhog textarea add a <textarea> and a <label> element. Include the necessary text content.
    <label>Name</label>
<textarea></textarea>
  2. Add the necessary Groundhog classes, ids and type to the elements.
    <label for="i0" class="label">Name</label>
<textarea class="textarea" id="i0" rows="4" cols="50" ></textarea>
  3. Add a hint text (optional)
    <label for="i1" class="label">Name</label>
<textarea class="textarea" id="i1" aria-describedby="i0" rows="4" cols="50" ></textarea>
<p class="hint" id="i1">Hint text</p>