search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
    • Overview
    • API

    Textarea

    Tailwind CSS React Textarea

    Use responsive Textarea component with helper examples for Tailwind CSS React Textarea with a default height & border, and a resize option. Easy to customize.


    Basic example

    Text fields allow users to enter text into the user interface. They typically appear in forms and dialog boxes. TETextarea component extended user TEInput so that more of the text is visible.

    Loading...
    • JSX
            
                
          import React from "react";
          import { TETextarea } from "tw-elements-react";
          
          export default function TextareaBasicExample(): JSX.Element {
            return (
              <div className="flex justify-center">
                <div className="relative mb-3 xl:w-96">
                  <TETextarea id="textareaExample" label="Message" rows={4}></TETextarea>
                </div>
              </div>
            );
          }      
          
            
        

    Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!


    Related resources

    Typography Paragraphs Inputs Icons Login Form Registration form Form templates

    If you are looking for more advanced options, try Bootstrap Textarea from MDBootstrap.

    • Basic example
    • Related resources

    Textarea - API


    Import

    • javascript
            
                
            import { TETextarea } from "tw-elements-react";
            
            
        

    Properties

    TETextarea

    Name Type Default Description
    defaultValue string - Default value of the TETextarea
    disabled boolean false Makes the TETextarea disabled
    id string - Defines an id for the TETextarea
    ref React.RefObject - If present, changes the color of ripple in dark mode
    label React.ReactNode - Defines a label text for the TETextarea
    labelID string - Defines an id for the label
    labelRef React.RefObject - Reference to label element
    name string - Specifies the name for the TETextarea
    readOnly boolean false Makes the TETextarea read only
    size string base Sets the size of the TETextarea
    value string - Sets the value for the TETextarea
    counter boolean false Creates a character counter
    maxLength number - Sets the maximum length of character counter
    formWhite boolean false Changes notches colors to white.
    theme Object {} Allows to change the Tailwind classes used in the component

    Classes

    Custom classes can be passed via theme prop. Create an object with classes like below and pass it to the prop.

    Note: TETextarea component extends the TEInput component so they have the same classes.
    Name Default Description
    activeInput placeholder:opacity-100 Sets classes when the textarea element is active.
    activeLabel scale-[0.8] Sets classes of the label when textarea element is active.
    activeNotchLeading border-r-0 Sets stylesof leading notch when textarea element is active.
    activeNotchMiddle border-x-0 border-t border-solid border-t-transparent dark:border-t-transparent Sets styles of middle notch when the textarea element is active.
    activeNotchTrailing border-l-0 Sets styles of trailing notch when the textarea element is active.
    activelabelSizeBase -translate-y-[0.9rem] Sets label translate styles when TETextarea size="base"and is active.
    activelabelSizeLg -translate-y-[1.15rem] Sets label translate styles when TETextarea size="lg" and is active.
    activelabelSizeSm -translate-y-[0.75rem] Sets label translate styles when TETextarea size="sm" and is active.
    counter text-right leading-[1.6] Sets text alignment and line height of textarea counter wrapper.
    focusedNotchLeading border-r-0 Sets stylesof the leading notch when textarea element is focused.
    focusedNotchLeadingDefault shadow-[-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca] border-primary dark:border-primary Sets styles of default leading notch when textarea element is focused.
    focusedNotchLeadingWhite shadow-[-1px_0_0_#ffffff,_0_1px_0_0_#ffffff,_0_-1px_0_0_#ffffff] border-white Sets styles of white leading notch when the textarea element is focused.
    focusedNotchMiddle border-x-0 border-t border-solid border-t-transparent dark:border-t-transparent Sets styles of middle notch when the textarea element is focused.
    focusedNotchMiddleDefault shadow-[0_1px_0_0_#3b71ca] border-primary dark:border-primary Sets styles of default middle notch when the textarea element is focused.
    focusedNotchMiddleWhite shadow-[0_1px_0_0_#ffffff] border-white Sets styles of white middle notch when the textarea element is focused.
    focusedNotchTrailing border-l-0 Sets styles of trailing notch when the textarea element is focused.
    focusedNotchTrailingDefault shadow-[1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca] border-primary dark:border-primary Sets styles of default trailing notch when the textarea element is focused.
    focusedNotchTrailingWhite shadow-[1px_0_0_#ffffff,_0_-1px_0_0_#ffffff,_0_1px_0_0_#ffffff] border-white Sets styles of white trailing notch when the textarea element is focused.
    input peer block min-h-[auto] w-full rounded border-0 bg-transparent outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary motion-reduce:transition-none placeholder:opacity-0 disabled:bg-neutral-100 read-only:bg-neutral-100 dark:disabled:bg-neutral-700 dark:read-only:bg-neutral-700 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary Sets classes the to the textarea element.
    inputDefault text-neutral-800 dark:text-neutral-200 Sets classes the to the input element when formWhite was set to false.
    inputWhite text-white Sets classes the to the input element when formWhite was set to true.
    inputSizeBase px-3 py-[0.32rem] leading-[1.6] Sets textarea padding and leading styles when TETextarea size="base".
    inputSizeLg px-3 py-[0.32rem] leading-[2.15] Sets textarea padding and leading styles when TETextarea size="lg".
    inputSizeSm px-3 py-[0.33rem] text-xs leading-[1.5] Sets textarea padding, text and leading styles when TETextarea size="sm.
    label pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate transition-all duration-200 ease-out peer-focus:scale-[0.8] motion-reduce:transition-none Sets classes to the label element.
    labelDefault text-neutral-500 dark:text-neutral-200 peer-focus:text-primary dark:peer-focus:text-primary Adds color classes to the label.
    labelWhite text-white Adds color classes to the label when formWhite prop was added.
    labelSizeBase pt-[0.30rem] leading-[1.6] peer-focus:-translate-y-[0.9rem] Sets label styles when TETextarea size="base".
    labelSizeLg pt-[0.36rem] leading-[2.15] peer-focus:-translate-y-[1.15rem] Sets label styles when TETextarea size="lg".
    labelSizeSm pt-[0.36rem] text-xs leading-[1.5] peer-focus:-translate-y-[0.75rem] Sets label styles when TETextarea size="sm".
    notch group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none Sets classes of notches wrapper.
    notchLeading pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-r-0 rounded-l-[0.25rem] Sets main styles of the leading notch.
    notchLeadingDefault border-neutral-300 dark:border-neutral-600 Sets styles of default leading notch.
    notchLeadingWhite border-neutral-200 Sets styles of white leading notch.
    notchMiddle pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow-0 shrink-0 basis-auto w-auto max-w-[calc(100%-1rem)] h-full border-r-0 border-l-0 Sets styles of middle notch.
    notchMiddleDefault border-neutral-300 dark:border-neutral-600 Sets styles of default middle notch.
    notchMiddleWhite border-neutral-200 Sets styles of white middle notch.
    notchTrailing pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-l-0 rounded-r-[0.25rem] Sets styles of trailing notch.
    notchTrailingDefault border-neutral-300 dark:border-neutral-600 Sets styles of default trailing notch.
    notchTrailingWhite border-neutral-200 Sets styles of white trailing notch.
    wrapper relative Adds classes to the textarea wrapper.

    Events

    Name Description
    onChange A callback fired when the TETextarea changed.
    onBlur A callback fired when the TETextarea lost focus.
    • JSX
            
                
            import React from "react";
            import { TETextarea } from "tw-elements-react";
            
            export default function TextareaEventsExample(): JSX.Element {
              return (
                <div className="flex justify-center">
                  <div className="relative mb-3 md:w-96 pt-5">
                    <TETextarea
                      id="textareaExample"
                      label="Message"
                      rows={4}
                      onChange={() => console.log("change")}
                    ></TETextarea>
                  </div>
                </div>
              );
            }        
            
            
        
    • Import
    • Properties
    • Classes
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com