---
tags: zeta-dom-react
---

# `Form` component

==Since `v0.3.2`==

The `FormContextProvider` component is used by `<Form>` by default.

import { Form, useFormContext } from "zeta-dom-react";

function Component() {
    const form = useFormContext();
    return (
        <Form context={form} className="my-form">
            {...}
        </Form>
    );
}

## Wrap with common customization

In scenario where common customization is wanted, the `Form` component can easily by wrapped.

import { forwardRef } from "react";
import { Form as WrappedForm, FormProps } from "zeta-dom-react";

export const Form = forwardRef<HTMLFormElement, FormProps>((props, ref) => {
    return <WrappedForm {...props} ref={ref} />
});