Tailwind CSS React Textarea

Import

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.

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>
  );
}

Textarea

Basic example

Textarea - API

Import

Properties

TETextarea

Classes

Events

Textarea

Tailwind CSS React Textarea

Basic example

Related resources

Textarea - API

Import

Properties

TETextarea

Classes

Events