FormProvider

FormProvider exposes form metadata such as field errors to descendants through form context.

tsx

import { FormProvider } from "@arkyn/components";

Basic Usage

Form fields

tsx

<FormProvider fieldErrors={{ email: "Invalid email" }}>
    <MyFormFields />
</FormProvider>

Field Errors Distribution

Use a single error object and consume errors from any child component with useForm().

Children can read fieldErrors

tsx

function UsernameField() {
    const { fieldErrors } = useForm();

    return (
        <div>
            <input name="username" />
            {fieldErrors?.username && <span>{fieldErrors.username}</span>}
        </div>
    );
}

Optional Form Wrapper

Provide the form prop when you need Provider to clone and wrap children with a custom <form> element.

tsx

<FormProvider fieldErrors={errors} form={<form onSubmit={handleSubmit} />}>
    <Input name="email" />
    <button type="submit">Submit</button>
</FormProvider>

Notes

Hook dependency

The useForm hook reads values from FormProvider context. Wrap all form-aware components with this provider.

Properties

children - ReactNode React subtree that can consume form context.

fieldErrors - any Validation errors object indexed by field name.

form - React.ReactElement Optional form element used to wrap children via cloneElement.

On this page