Tailwind CSS Textarea

Label

Basic input example with label.

Hidden label

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

Basic

Basic input example.

Underline input

Underline textarea variant.

Floating label

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

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.

Sizes

Inputs stacked small to large sizes.

Readonly

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

Disabled

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

Helper text

Basic input example with helper text.

Corner hint

Basic input example with corner-hint.

Autoheight

Autoheight example.

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

Destroy and Reinitialize New

Provides destroy method that helps to destroy a textarea autoheight.