Components
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 usage

Placeholder

Basic input example with placeholder.

Label

Basic input example with label.

Comment

Hidden label

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

Basic

Basic input example.

Types

Gray input

Gray textarea variant.

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., ~).

Comment

Comment

Comment

<script>
                        (function () {
                          function textareaAutoHeight(el, offsetTop = 0) {
                            el.style.height = 'auto';
                            el.style.height = `${el.scrollHeight + offsetTop}px`;
                          }
                    
                          (function () {
                            const textareas = [
                              '#hs-floating-textarea',
                              '#hs-floating-textarea-gray',
                              '#hs-floating-textarea-underline'
                            ];
                    
                            textareas.forEach((el) => {
                              const textarea = document.querySelector(el);
                              const overlay = textarea.closest('.hs-overlay');
                    
                              if (overlay) {
                                const { element } = HSOverlay.getInstance(overlay, true);
                    
                                element.on('open', () => textareaAutoHeight(textarea, 3));
                              } else textareaAutoHeight(textarea, 3);
                    
                              textarea.addEventListener('input', () => {
                                textareaAutoHeight(textarea, 3);
                              });
                            });
                          })();
                        })()
                      </script>

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.

Leave your question

We'll get back to you soon.

Corner hint

Basic input example with corner-hint.

Contact us 100 characters

Autoheight

Autoheight example.

Contact us

<script>
                        (function () {
                          function textareaAutoHeight(el, offsetTop = 0) {
                            el.style.height = 'auto';
                            el.style.height = `${el.scrollHeight + offsetTop}px`;
                          }
                    
                          (function () {
                            const textareas = [
                              '#hs-autoheight-textarea'
                            ];
                    
                            textareas.forEach((el) => {
                              const textarea = document.querySelector(el);
                              const overlay = textarea.closest('.hs-overlay');
                    
                              if (overlay) {
                                const { element } = HSOverlay.getInstance(overlay, true);
                    
                                element.on('open', () => textareaAutoHeight(textarea, 3));
                              } else textareaAutoHeight(textarea, 3);
                    
                              textarea.addEventListener('input', () => {
                                textareaAutoHeight(textarea, 3);
                              });
                            });
                          })();
                        })()
                      </script>

Basic usage in modal window.

<script>
                        (function () {
                          function textareaAutoHeight(el, offsetTop = 0) {
                            el.style.height = 'auto';
                            el.style.height = `${el.scrollHeight + offsetTop}px`;
                          }
                    
                          (function () {
                            const textareas = [
                              '#hs-autoheight-modal-example-textarea'
                            ];
                    
                            textareas.forEach((el) => {
                              const textarea = document.querySelector(el);
                              const overlay = textarea.closest('.hs-overlay');
                    
                              if (overlay) {
                                const { element } = HSOverlay.getInstance(overlay, true);
                    
                                element.on('open', () => textareaAutoHeight(textarea, 3));
                              } else textareaAutoHeight(textarea, 3);
                    
                              textarea.addEventListener('input', () => {
                                textareaAutoHeight(textarea, 3);
                              });
                            });
                          })();
                        })()
                      </script>

Textarea examples

Advanced custom examples.

<script>
                        (function () {
                          function textareaAutoHeight(el, offsetTop = 0) {
                            el.style.height = 'auto';
                            el.style.height = `${el.scrollHeight + offsetTop}px`;
                          }
                    
                          (function () {
                            const textareas = [
                              '#hs-textarea-ex-1'
                            ];
                    
                            textareas.forEach((el) => {
                              const textarea = document.querySelector(el);
                              const overlay = textarea.closest('.hs-overlay');
                    
                              if (overlay) {
                                const { element } = HSOverlay.getInstance(overlay, true);
                    
                                element.on('open', () => textareaAutoHeight(textarea, 3));
                              } else textareaAutoHeight(textarea, 3);
                    
                              textarea.addEventListener('input', () => {
                                textareaAutoHeight(textarea, 3);
                              });
                            });
                          })();
                        })()
                      </script>

Gray style example.

<script>
                        (function () {
                          function textareaAutoHeight(el, offsetTop = 0) {
                            el.style.height = 'auto';
                            el.style.height = `${el.scrollHeight + offsetTop}px`;
                          }
                    
                          (function () {
                            const textareas = [
                              '#hs-textarea-ex-2'
                            ];
                    
                            textareas.forEach((el) => {
                              const textarea = document.querySelector(el);
                              const overlay = textarea.closest('.hs-overlay');
                    
                              if (overlay) {
                                const { element } = HSOverlay.getInstance(overlay, true);
                    
                                element.on('open', () => textareaAutoHeight(textarea, 3));
                              } else textareaAutoHeight(textarea, 3);
                    
                              textarea.addEventListener('input', () => {
                                textareaAutoHeight(textarea, 3);
                              });
                            });
                          })();
                        })()
                      </script>

Validation states

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

Comment

Your message should be at least 10 characters long.

Comment

Looks good!