TextareaField

Description

A multi-line text input field component that integrates with React Hook Form. Supports validation, error display, required fields, and helper text tooltips.

Import

import { TextareaField } from '@components/common/form/TextareaField';

Usage

import { Form } from '@components/common/form/Form';
import { TextareaField } from '@components/common/form/TextareaField';

function MyForm() {
  return (
    <Form action="/api/save">
      <TextareaField
        name="description"
        label="Description"
        rows={6}
        required
      />
    </Form>
  );
}

Props

Name	Type	Default	Description
name	FieldPath<T>	-	Field name (required)
label	string	-	Label text displayed above the textarea
rows	number	4	Number of visible text rows
error	string	-	Custom error message
helperText	string	-	Helper text shown in a tooltip
required	boolean	false	Makes the field required
validation	RegisterOptions<T>	-	React Hook Form validation rules
wrapperClassName	string	-	CSS class for the wrapper div
className	string	-	CSS class for the textarea element
...props	TextareaHTMLAttributes	-	All standard HTML textarea attributes

Example: With Validation

import { Form } from '@components/common/form/Form';
import { TextareaField } from '@components/common/form/TextareaField';

function CommentForm() {
  return (
    <Form action="/api/comments">
      <TextareaField
        name="comment"
        label="Comment"
        placeholder="Enter your comment..."
        rows={5}
        required
        validation={{
          minLength: {
            value: 10,
            message: 'Comment must be at least 10 characters'
          },
          maxLength: {
            value: 500,
            message: 'Comment must not exceed 500 characters'
          }
        }}
      />
    </Form>
  );
}

Related Components

• Form - Parent form component
• InputField - Single-line text input