Docs
Text Area Field

Text Area Field

Allows a user to enter a plain text value with a keyboard.

Reference
This is a description
Error Message

Copy and paste the following code into your project.

"use client";
 
import { TextField as RaTextField } from "react-aria-components";
 
import type { FormComponentBaseProps } from "@/components/ui/form";
import {
  Description,
  ErrorMessage,
  formVariants,
  handleOnKeyDown,
  Label,
  TextArea,
} from "@/components/ui/form";
import { useFormFieldContext } from "@/lib/form/context";
import { autoRef, cn, withRenderProps } from "@/lib/utils";
 
export type TextAreaFieldProps = FormComponentBaseProps &
  React.ComponentPropsWithRef<typeof RaTextField> &
  Pick<React.ComponentPropsWithoutRef<typeof TextArea>, "rows"> & {
    placeholder?: string;
  };
 
export const TextAreaField = autoRef(
  ({
    onKeyDown,
    onPressEnter,
    label,
    description,
    errorMessage,
    className,
    isInvalid,
    placeholder,
    id,
    rows,
    ...props
  }: TextAreaFieldProps) => {
    const formField = useFormFieldContext();
 
    return (
      <RaTextField
        onKeyDown={handleOnKeyDown(onKeyDown, onPressEnter)}
        className={(values) =>
          cn(formVariants.wrapper(), withRenderProps(className)(values))
        }
        isInvalid={formField?.invalid ?? isInvalid}
        {...props}
      >
        <Label>{label}</Label>
        <TextArea rows={rows} id={id} placeholder={placeholder} />
        <Description>{description}</Description>
        <ErrorMessage>{errorMessage}</ErrorMessage>
      </RaTextField>
    );
  },
);

Update the import paths to match your project setup.