@piplup/rhf-adaptershtmlComponents
HtmlTextareaElement
A pre-integrated textarea component for native multi-line input with React Hook Form value and validation wiring.
HtmlTextareaElement connects a native <textarea> to React Hook Form while preserving the ergonomics of a regular textarea component.
Import
import { HtmlTextareaElement } from "@piplup/rhf-adapters/html";Usage
"use client";import { useForm } from "react-hook-form";import { HtmlTextareaElement } from "@piplup/rhf-adapters/html";export default function Page() { const { control, handleSubmit } = useForm(); return ( <form noValidate onSubmit={handleSubmit((data) => { alert(JSON.stringify(data, null, 2)); })} > <HtmlTextareaElement control={control} rows={4} defaultValue="" name="description" placeholder="Enter a description" className="border px-2 block rounded w-full" /> <input type="submit" value="Submit" className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3" /> </form> );}"use client";import { FormContainer } from "@piplup/rhf-core";import { HtmlTextareaElement } from "@piplup/rhf-adapters/html";export default function Page() { return ( <FormContainer onSubmit={(data) => { alert(JSON.stringify(data, null, 2)); }} onError={(error) => { alert(JSON.stringify(error, null, 2)); }} > <HtmlTextareaElement rows={4} defaultValue="" name="description" placeholder="Enter a description" className="border px-2 block rounded w-full" /> <input type="submit" value="Submit" className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3" /> </FormContainer> );}Props
Prop
Type
HtmlTextareaElement accepts textarea props together with adapter props such as control, rules, messages, and transform.
The
refis forwarded to the underlying<textarea>element.
Notes
- Use this component when a field should behave like a regular textarea but still participate in React Hook Form validation and state.
- The component is built on top of
useHtmlTextareaAdapter. - For custom multiline inputs, compose directly with
useHtmlTextareaAdapter.