Tailwind CSS Textarea

Class Name	Type	Description
form-control	Component	Container element.
label	Component	For helper text.
textarea	Component	Basic textarea field.
textarea-floating	Component	Floating textarea field.
textarea-filled	Component	textarea with background color and floating label.
textarea-floating-label	Component	Floats the label to the top.
textarea-filled-label	Component	Floats the label at the top.
textarea-filled-focused	Component	Adds animation to the bottom border of a floating filled textarea.
is-valid	Modifier	Adds success style to the textarea.
is-invalid	Modifier	Adds error style to the textarea.

Basic example

The textarea-floating style is used to define the appearance of the textarea, while the textarea-floating-label is the container for the label text. To handle cases where the content exceeds the initial size, we applied the field-sizing: content; CSS rule, allowing the textarea to expand when the content exceeds the set maximum height of 5rem (m-h-20).

Filled textarea

The textarea-filled style is applied to the textarea, with textarea-filled-label for the label and textarea-filled-focused for focus animations. The textarea auto-expands beyond a 5rem max height using field-sizing: content;.

<div class="form-control sm:w-96">
  <textarea class="textarea textarea-filled peer" placeholder="Hello!!!"></textarea>
  <span class="textarea-filled-label">Your bio</span>
  <span class="textarea-filled-focused"></span>
</div>

Validation states

Success state

Success state can be show using is-valid class.

<!-- Basic -->

<label class="form-control sm:w-96">
  <div class="label">
    <span class="label-text">Full Name</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <textarea class="textarea is-valid" placeholder="Hello!!!"></textarea>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<!-- Floating -->

<label class="form-control sm:w-96">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <textarea class="textarea textarea-floating is-valid peer" placeholder="Hello!!!"></textarea>
    <span class="textarea-floating-label">Your bio</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<!-- Filled -->

<label class="form-control sm:w-96">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <textarea class="textarea textarea-filled is-valid peer" placeholder="Hello!!!"></textarea>
    <span class="textarea-filled-label">Your bio</span>
    <span class="textarea-filled-focused"></span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

Error state

Error state can be show using is-invalid class.

<!-- Basic -->

<label class="form-control sm:w-96">
  <div class="label">
    <span class="label-text">Full Name</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <textarea class="textarea is-invalid" placeholder="Hello!!!"></textarea>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<!-- Floating -->

<label class="form-control sm:w-96">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <textarea class="textarea textarea-floating is-invalid peer" placeholder="Hello!!!"></textarea>
    <span class="textarea-floating-label">Your bio</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<!-- Filled -->

<label class="form-control sm:w-96">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <textarea class="textarea textarea-filled is-invalid peer" placeholder="Hello!!!"></textarea>
    <span class="textarea-filled-label">Your bio</span>
    <span class="textarea-filled-focused"></span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

Illustrations

Hidden label

label elements hidden using the .sr-only class.

<label class="form-control w-full sm:w-96">
  <div class="label sr-only">
    <span class="label-text">Your bio</span>
  </div>
  <textarea class="textarea" placeholder="Hello!!!"></textarea>
</label>

Disable

Add the disabled boolean attribute on an textarea to remove pointer events, and prevent focusing.

<label class="form-control w-full sm:w-96">
  <div class="label sr-only">
    <span class="label-text">Your bio</span>
  </div>
  <textarea class="textarea" placeholder="Hello!!!" disabled></textarea>
</label>

<div class="form-control sm:w-96">
  <textarea class="textarea textarea-floating peer" placeholder="Hello!!!" disabled></textarea>
  <span class="textarea-floating-label">Your bio</span>
</div>

<div class="form-control sm:w-96">
  <textarea class="textarea textarea-filled peer" placeholder="Hello!!!" disabled></textarea>
  <span class="textarea-filled-label">Your bio</span>
  <span class="textarea-filled-focused"></span>
</div>

Readonly

Add the readonly boolean attribute on an textarea to prevent modification of the textarea value.

<label class="form-control w-full sm:w-96">
  <div class="label sr-only">
    <span class="label-text">Your bio</span>
  </div>
  <textarea class="textarea" placeholder="Hello!!!" readonly></textarea>
</label>

Helper text

Basic textarea example with helper text and hints.

<label class="form-control w-full sm:w-96">
  <div class="label">
    <span class="label-text">Full Name</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <textarea class="textarea" placeholder="Hello!!!"></textarea>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

FlyonUI

Tailwind CSS Textarea

Basic example

Default

Label and placeholder

Types