Textarea component is a multi-line Input which allows you to write large texts.

import { Textarea } from '@nextui-org/react';


The default Textarea contains an animation effect.


Unusable and un-writable Textarea.


Unless the rows prop is set, the height of the text field dynamically matches its content. You can use the minRows and maxRows props to bound it. This functionality has been based on React Textarea Autosize


You can use the same Input types in Textarea.


You can change the color of the entire Textarea with the property status.

Helper text

As well as with Input you can set the prop helperText and customise its color with the helperColor prop in Textarea to show a helper text.

Controlled vs Uncontrolled

As well as the Input component, Textarea component can be controlled or uncontrolled. The controlled Textarea example is using the hook useInput

Note: See React's documentation on uncontrolled components for more info.


Textarea Props

AttributeTypeAccepted valuesDescriptionDefault
valuestring-Textarea value-
initialValuestring-Textarea default value-
placeholderstring-The short hint displayed in the textarea-
sizeNormalSizesNormalSizesChange textarea sizemedium
colorSimpleColorsSimpleColorsChange textarea text, border and label colordefault
statusSimpleColorsSimpleColorsChange textarea status colordefault
rowsnumber-Textarea rows count-
minRowsnumber-Minimum number of rows to show for textarea3
maxRowsnumber-Maximum number of rows up to which the textarea can grow6
cacheMeasurementsboolean-Reuse previously computed measurements when computing height of textarea.true
helperColorSimpleColorsSimpleColorsChange helper text colordefault
requiredbooleantrue/falseRequired textarea propfalse
readOnlybooleantrue/falseIt prevents the user from changing the value of the fieldfalse
disabledbooleantrue/falseDisable textareafalse
borderedbooleantrue/falseBordered textareafalse
underlinedbooleantrue/falseUnderlined textareafalse
shadowbooleantrue/falseEnable or disable the textarea shadowtrue
animatedbooleantrue/falseEnable or disable the textarea animationtrue
autoCompletestring-HTML textarea autocomplete attributeoff
borderWeightNormalWeightsNormalWeightsBorder weight for bordered textareanormal
fullWidthboolean-If true, the textarea will take up the full width of its container.false
widthstring-Textarea widthinitial
labelstring-Text label for textarea-
labelPlaceholderstring-The placeholder becomes a label-
helperTextstring-Add a helper text to textarea-
onHeightChange(height: number, meta: {rowHeight: number}) => void-Callback fired whenthe textarea height change-
onChange(e: React.ChangeEvent<HTMLTextAreaElement>) => void-Callback fired when the value is changed-
onFocus(e: React.FocusEvent<HTMLTextAreaElement>) => void-Callback fired when the textarea is focused.-
onBlur(e: React.FocusEvent<HTMLTextAreaElement>) => void-Callback fired when the textarea is blurred.-
refRef<HTMLTextAreaElement | null>-forwardRef-
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsinput
...TextareaHTMLAttributes'className', ...Textarea native props-

Textarea types

Simple Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold';


type useInput = (initialValue: string) => {
  value: string;
  setValue: Dispatch<SetStateAction<string>>;
  currentRef: MutableRefObject<string>;
  reset: () => void;
  bindings: {
    value: string;
    onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
gradient blue backgroundgradient violet background