Textarea

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


Installation

npx nextui-cli@latest add input
The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Disabled

Read Only

Required

If you pass the isRequired property to the input, it will have a danger asterisk at the end of the label and the textarea will be required.

Autosize

Textarea grows automatically based on the content, but you can also set a min and max height to it using the minRows and maxRows properties. It is based on react-textarea-autosize.

Without Autosize

In case you want to disable the autosize feature, you can use the disableAutosize property.

Variants

With Error Message

You can combine the isInvalid and errorMessage properties to show an invalid textarea.

Description

Controlled

You can use the value and onValueChange properties to control the input value.

Note: NextUI Textarea also supports native events like onChange, useful for form libraries such as Formik and React Hook Form.

Slots

  • base: Input wrapper, it handles alignment, placement, and general appearance.
  • label: Label of the textarea, it is the one that is displayed above, inside or left of the textarea.
  • inputWrapper: Wraps the label (when it is inside) and the innerWrapper.
  • input: The textarea input element.
  • description: The description of the textarea.
  • errorMessage: The error message of the textarea.

Data Attributes

Textarea has the following attributes on the base element:

  • data-invalid: When the textarea is invalid. Based on isInvalid prop.
  • data-required: When the textarea is required. Based on isRequired prop.
  • data-readonly: When the textarea is readonly. Based on isReadOnly prop.
  • data-hover: When the textarea is being hovered. Based on useHover
  • data-focus: When the textarea is being focused. Based on useFocusRing.
  • data-focus-visible: When the textarea is being focused with the keyboard. Based on useFocusRing.
  • data-disabled: When the textarea is disabled. Based on isDisabled prop.

Accessibility

  • Built with a native <input> element.
  • Visual and ARIA labeling support.
  • Change, clipboard, composition, selection, and input event support.
  • Required and invalid states exposed to assistive technology via ARIA.
  • Support for description and error message help text linked to the input via ARIA.

API

Textarea Props

AttributeTypeDescriptionDefault
childrenReactNodeThe content of the textarea.-
minRowsnumberThe minimum number of rows to display.3
maxRowsnumberMaximum number of rows up to which the textarea can grow.8
cacheMeasurementsbooleanReuse previously computed measurements when computing height of textarea.false
variantflat | bordered | faded | underlinedThe variant of the textarea.flat
colordefault | primary | secondary | success | warning | dangerThe color of the textarea.default
sizesm|md|lgThe size of the textarea.md
radiusnone | sm | md | lg | fullThe radius of the textarea.-
labelReactNodeThe content to display as the label.-
valuestringThe current value of the textarea (controlled).-
defaultValuestringThe default value of the textarea (uncontrolled).-
placeholderstringThe placeholder of the textarea.-
startContentReactNodeElement to be rendered in the left side of the input.-
endContentReactNodeElement to be rendered in the right side of the input.-
descriptionReactNodeA description for the textarea. Provides a hint such as specific requirements for what to choose.-
errorMessageReactNode | ((v: ValidationResult) => ReactNode)An error message for the textarea.-
validate(value: string) => ValidationError | true | null | undefinedValidate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if validationBehavior is set to native. For real-time validation, use the isInvalid prop.-
validationBehaviornative | ariaWhether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.aria
labelPlacementinside | outside | outside-leftThe position of the label.inside
fullWidthbooleanWhether the textarea should take up the width of its parent.true
isRequiredbooleanWhether user input is required on the textarea before form submission.false
isReadOnlybooleanWhether the textarea can be selected but not changed by the user.
isDisabledbooleanWhether the textarea is disabled.false
isInvalidbooleanWhether the textarea is invalid.false
validationStatevalid | invalidWhether the textarea should display its "valid" or "invalid" visual styling. (Deprecated) use isInvalid instead.-
disableAutosizebooleanWhether the textarea auto vertically resize should be disabled.false
disableAnimationbooleanWhether the textarea should be animated.false
classNamesRecord<"base"| "label"| "inputWrapper"| "innerWrapper" | "input" | "description" | "errorMessage", string>Allows to set custom class names for the checkbox slots.-

Input Events

AttributeTypeDescription
onChangeReact.ChangeEvent <HTMLInputElement>Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).
onValueChange(value: string) => voidHandler that is called when the element's value changes.
onClear() => voidHandler that is called when the clear button is clicked.
onHeightChange(height: number, meta: { rowHeight: number }) => voidHandler that is called when the height of the textarea changes.