@piplup/rhf-adaptershtmlComponents
HtmlFormLabelElement
A form label component that reads React Hook Form field state for styling and error-aware labeling.
HtmlFormLabelElement wraps the native <label> element and exposes field-state-aware styling without requiring manual state plumbing.
Import
import { HtmlFormLabelElement } from "@piplup/rhf-adapters/html";Usage
"use client";import { useForm } from "react-hook-form";import { HtmlFormHelperTextElement, HtmlFormLabelElement, 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> <HtmlFormLabelElement id="email-label" htmlFor="email" control={control} name="email" className="block" style={({ error }) => ({ ...(error && { color: "red" }), })} > Email </HtmlFormLabelElement> <HtmlInputElement control={control} name="email" required messages={{ required: "Email is required", }} aria-describedby="email-help" placeholder="Enter your email address" aria-labelledby="email-label" className="border px-2 block rounded" /> <HtmlFormHelperTextElement id="email-help" name="email" control={control} > "e.g. test@gmail.co" </HtmlFormHelperTextElement> </div> <input type="submit" value="Submit" className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3" /> </form> );}Props
Prop
Type
HtmlFormLabelElement accepts standard label attributes together with adapter props such as name, control, and custom state-driven styling.
The
refis forwarded to the underlying<label>element.
Notes
- Use
htmlForto associate the label with an inputid. - The adapter exposes
error,disabled, and helper-text-aware styling composition through field state. - For custom label components, build on
useHtmlFormLabelAdapter.