Tailwind CSS Textarea

Class Name	Type	Description
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).

<div class="relative sm:w-96">
  <textarea class="textarea textarea-floating peer" placeholder="Hello!!!" id="textareaFloating"></textarea>
  <label class="textarea-floating-label" for="textareaFloating">Your bio</label>
</div>

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="relative sm:w-96">
  <textarea class="textarea textarea-filled peer" placeholder="Hello!!!" id="textareaFilled"></textarea>
  <label class="textarea-filled-label" for="textareaFilled">Your bio</label>
  <span class="textarea-filled-focused"></span>
</div>

Validation states

Success state

Success state can be show using is-valid class.

<!-- Basic -->

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

<!-- Floating -->

<div class="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!!!" id="textareaStateSuccessFloating"></textarea>
    <label class="textarea-floating-label" for="textareaStateSuccessFloating">Your bio</label>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</div>

<!-- Filled -->

<div class="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!!!" id="textareaStateSuccessFilled"></textarea>
    <label class="textarea-filled-label" for="textareaStateSuccessFilled">Your bio</label>
    <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>
</div>

Error state

Error state can be show using is-invalid class.

<!-- Basic -->

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

<!-- Floating -->

<div class="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 peer is-invalid" placeholder="Hello!!!" id="textareaStateErrorFloating"></textarea>
    <label class="textarea-floating-label" for="textareaStateErrorFloating">Your bio</label>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</div>

<!-- Filled -->

<div class="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 peer is-invalid" placeholder="Hello!!!" id="textareaStateErrorFilled"></textarea>
    <label class="textarea-filled-label" for="textareaStateErrorFilled">Your bio</label>
    <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>
</div>

Illustrations

Hidden label

label elements hidden using the .sr-only class.

<div class="w-full sm:w-96">
  <label class="label label-text sr-only" for="textareaHiddenLabel"> Your bio </label>
  <textarea class="textarea" placeholder="Hello!!!" id="textareaHiddenLabel"></textarea>
</div>

Disable

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

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

<div class="sm:w-96">
  <textarea class="textarea textarea-floating peer" placeholder="Hello!!!" id="textareaDisabledoating" disabled></textarea>
  <label class="textarea-floating-label" for="textareaDisabledoating">Your bio</label>
</div>

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

Readonly

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

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

Helper text

Basic textarea example with helper text and hints.

<!-- Basic -->
<div class="w-full sm:w-96">
  <label class="label label-text" for="textareaHelperTextDefault"> Full Name </label>
  <textarea class="textarea" placeholder="Hello!!!" id="textareaHelperTextDefault"></textarea>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</div>

<!-- Floating -->
<div class="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 peer" placeholder="Hello!!!" id="textareaHelperTextFloating"></textarea>
    <label class="textarea-floating-label" for="textareaHelperTextFloating">Your bio</label>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</div>

<!-- Filled -->

<div class="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 peer" placeholder="Hello!!!" id="textareaHelperTextFilled"></textarea>
    <label class="textarea-filled-label" for="textareaHelperTextFilled">Your bio</label>
    <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>
</div>

FlyonUI

Tailwind CSS Textarea

Basic example

Default

Label and placeholder

Types