Function: TextareaField()

TextareaField<TFieldValues>(props): Element

Defined in: fields/TextareaField.tsx:103

A textarea field component that integrates React Hook Form with HeroUI Textarea.

This component provides a type-safe textarea field with validation support, error handling, and accessibility features. Use this for multi-line text input.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

TextareaFieldProps<TFieldValues>

The textarea field props

Returns

Element

The rendered textarea field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  message: z.string().min(10, "Message must be at least 10 characters"),
  feedback: z.string().max(500, "Feedback must be less than 500 characters"),
});
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.textarea("message", "Message", "Enter your message"),
          FormFieldHelpers.textarea("feedback", "Feedback"),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With custom styling and min/max rows
<TextareaField
  control={form.control}
  name="message"
  label="Message"
  textareaProps={{
    minRows: 3,
    maxRows: 10,
    variant: "bordered",
  }}
/>