@piplup/rhf-adaptershtmlComponents
HtmlFormHelperTextElement
A helper text component for rendering hints and validation messages from React Hook Form field state.
HtmlFormHelperTextElement renders helper content for a field and can switch naturally into error messaging based on React Hook Form state.
Import
import { HtmlFormHelperTextElement } from "@piplup/rhf-adapters/html";Usage
"use client";import { useForm } from "react-hook-form";import { HtmlFormHelperTextElement, HtmlInputElement,} from "@piplup/rhf-adapters/html";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { email: "", }, }); return ( <form noValidate onSubmit={handleSubmit((data) => { alert(JSON.stringify(data)); })} > <div> <HtmlInputElement control={control} name="email" required messages={{ required: "Email is required", }} aria-describedby="email-help" placeholder="Enter your email address" className="border px-2 block rounded" /> <HtmlFormHelperTextElement id="email-help" name="email" control={control} style={({ error }) => ({ ...(error && { color: "red" }), })} > "e.g. test@gmail.com" </HtmlFormHelperTextElement> </div> <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 { HtmlFormHelperTextElement, HtmlInputElement,} from "@piplup/rhf-adapters/html";import { FormContainer } from "@piplup/rhf-core";export default function Page() { return ( <FormContainer onSubmit={(data) => { alert(JSON.stringify(data, null, 2)); }} onError={(error) => { alert(JSON.stringify(error, null, 2)); }} defaultValues={{ email: "", }} > <div> <HtmlInputElement name="email" required messages={{ required: "Email is required", }} aria-describedby="email-help" placeholder="Enter your email address" className="border px-2 block rounded" /> <HtmlFormHelperTextElement id="email-help" name="email" style={({ error }) => ({ ...(error && { color: "red" }), })} > "e.g. test@gmail.com" </HtmlFormHelperTextElement> </div> <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
HtmlFormHelperTextElement accepts paragraph props together with adapter props such as name, control, and renderOnError.
The
refis forwarded to the underlying<p>element.
Notes
- Use
renderOnErrorwhen helper text should only appear for validation failures. - Pair the helper text
idwith an input'saria-describedbyfor better accessibility. - For bespoke helper text UIs, build on
useHtmlFormHelperTextAdapter.