1. Components
  2. Textarea

Basic Forms

Tailwind CSS Textarea

A textarea is an element on a webpage that you can type into.

Attention needed

By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!


Basic input example with placeholder.


Basic input example with label.

Hidden label

<label> elements hidden using the .sr-only class


Basic input example.

Gray input New

Gray textarea variant.

Underline input New

Underline textarea variant.

Floating label New

A placeholder is required on each <input> as our method uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

Default height with autoheight script New

Use data-hs-default-height="*" to set the height of the textarea while maintaining the auto-height feature. Ensure to include the rows="1" attribute as well.


Inputs stacked small to large sizes.


Add the readonly boolean attribute on an input to prevent modification of the input’s value.


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

Helper text

Basic input example with helper text.

We'll get back to you soon.

Corner hint

Basic input example with corner-hint.

100 characters


Autoheight example.

Basic usage in modal window.

Textarea examples

Advanced custom examples.

Gray style example.

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Your message should be at least 10 characters long.

Looks good!