FormContainer

Wires up <form> element, FormProvider and FormErrorProvider components together in a single component.

Import

import { FormContainer } from "@piplup/rhf-core";

Basic usage with FormContainer. It accepts the same options you would normally pass to useForm (for example: defaultValues, resolver, etc.) and handles form registration and submission wiring for you.

"use client";import {  HtmlFormHelperTextElement,  HtmlFormLabelElement,  HtmlInputElement,} from "@piplup/rhf-adapters/html";import { FormContainer } from "@piplup/rhf-core";export default function Page() {  return (    <FormContainer      defaultValues={{ name: "" }}      onSubmit={(values) => alert(JSON.stringify(values, null, 2))}    >      <div>        <HtmlFormLabelElement htmlFor="name" name="name">          Name        </HtmlFormLabelElement>        <HtmlInputElement          id="name"          name="name"          placeholder="Type your name"          required          className="border px-2 block rounded"        />        <HtmlFormHelperTextElement          name="name"          style={({ error }) => ({            ...(error && { color: "red" }),          })}          renderOnError        />      </div>      <button        type="submit"        className="bg-black hover:bg-black/90 px-4 py-1 text-white rounded mt-3"      >        Submit      </button>    </FormContainer>  );}

Props

Prop

Type

FormContainer forwards refs to the underlying <form> element and exposes the onSubmit prop for reading the submitted form data.

Notes

Use useFormContext() inside nested components to access register, watch, setValue, etc.
You can pass any options accepted by useForm directly to FormContainer or formContext returned by useForm hook.
Because FormContainer renders a native <form> with noValidate prop, therefore, browser-level validations are ignored unless explicitly enabled.

FormContainer

Import

Usage

Props

Notes

See also

useForm

useFormContext

On this page