Textarea

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

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

Default

The default Textarea contains an animation effect.

Disabled

Unusable and un-writtable Textarea.

Autosize

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

Types

You can use the same Input types in Textarea.

Status

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. If you want to deep in this topic you can go to the official React documentation for Controlled Components and Uncontrolled Components. The controlled Textarea example is using the hook useInput

APIs

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-
...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';

useInput

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