Skip to main content

# Form()

    function Form<TFieldValues, TContext>(props: FormProps<TFieldValues, TContext>): Element;

Form component with integrated React Hook Form state management and validation. Provides form context to all child form fields and handles submission.

## Type Parameters​

### TFieldValues​

`TFieldValues` extends `FieldValues` = `FieldValues`

Type of form field values

### TContext​

`TContext` extends `object` = `object`

Additional context type

## Parameters​

### props​

`FormProps`<`TFieldValues`, `TContext`>

Form component props

## Returns​

`Element`

## Example​

    import { Form, TextBox, FormSubmitButton } from '@elliemae/pui-app-sdk';

    function MyForm() {
      const handleSubmit = (data) => {
        console.log('Form data:', data);
      };

      return (
        <Form onSubmit={handleSubmit}>
          <TextBox
            name="email"
            label="Email"
            rules={{ required: 'Email is required' }}
          />
          <FormSubmitButton>Submit</FormSubmitButton>
        </Form>
      );
    }