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.

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. The controlled Textarea example is using the hook useInput

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

APIs

Textarea Props

Attribute	Type	Accepted values	Description	Default
value	`string`	-	Textarea value	-
initialValue	`string`	-	Textarea default value	-
placeholder	`string`	-	The short hint displayed in the textarea	-
size	`NormalSizes`	NormalSizes	Change textarea size	`medium`
color	`SimpleColors`	SimpleColors	Change textarea text, border and label color	`default`
status	`SimpleColors`	SimpleColors	Change textarea status color	`default`
rows	`number`	-	Textarea rows count	-
minRows	`number`	-	Minimum number of rows to show for textarea	`3`
maxRows	`number`	-	Maximum number of rows up to which the textarea can grow	`6`
cacheMeasurements	`boolean`	-	Reuse previously computed measurements when computing height of textarea.	`true`
helperColor	`SimpleColors`	SimpleColors	Change helper text color	`default`
required	`boolean`	`true/false`	Required textarea prop	`false`
readOnly	`boolean`	`true/false`	It prevents the user from changing the value of the field	`false`
disabled	`boolean`	`true/false`	Disable textarea	`false`
bordered	`boolean`	`true/false`	Bordered textarea	`false`
underlined	`boolean`	`true/false`	Underlined textarea	`false`
shadow	`boolean`	`true/false`	Enable or disable the textarea shadow	`true`
animated	`boolean`	`true/false`	Enable or disable the textarea animation	`true`
autoComplete	`string`	-	HTML textarea autocomplete attribute	`off`
borderWeight	`NormalWeights`	NormalWeights	Border weight for `bordered` textarea	`normal`
fullWidth	`boolean`	-	If `true`, the textarea will take up the full width of its container.	`false`
width	`string`	-	Textarea width	`initial`
label	`string`	-	Text label for textarea	-
labelPlaceholder	`string`	-	The placeholder becomes a label	-
helperText	`string`	-	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.	-
ref	`Ref<HTMLTextAreaElement \| null>`	-	forwardRef	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`input`
...	`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;
  };
};