Tailwind CSS Textarea
Build Tailwind CSS textarea components with labels, placeholders, floating labels, helper text, auto-resizing, modal layouts, chat composer, and validation.
Heads up!
By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!
Textarea with placeholder
Use placeholder text to provide lightweight guidance inside the textarea.
Hidden label textarea
Hide the <label> visually with .sr-only while keeping it available to screen readers.
Floating label
A placeholder is required on each <textarea> because this pattern relies on the :placeholder-shown pseudo-class. Keep the <textarea> before the label so the sibling selector (~) can control the floating state.
Autoheight with default height
Set data-hs-default-height="*" to start from a custom height while still letting the textarea grow automatically. Keep the rows="1" attribute in place as well.
Read-only textarea
Add the readonly attribute to prevent edits while keeping the textarea value visible and selectable.
Disabled textarea
Add the disabled attribute to remove interaction and keep the textarea out of the tab order.
Textarea with helper text
Add helper text below the textarea for extra instructions or context.
Textarea with corner hint
Place a hint in the corner for character limits, counts, or secondary guidance.
Auto-resizing textarea
Automatically expand the textarea to fit its content as the user types.
Textarea in modal
Use the textarea pattern inside modal content without changing its behavior.
Chat composer
A richer chat-style textarea layout with inline actions and a message toolbar.
Validation states
Show valid and invalid textarea states with supporting feedback using HTML form validation.
Destroy and reinitialize
Use the destroy method to remove textarea autoheight behavior before reinitializing it.