Version 7.44.0-next.0

📄 Form Component

Usage example

• React Web

const { control, register, formState: { isSubmitSuccessful, errors } } = useForm({
  // progressive: true, optional prop for progressive enhancement
});

<Form action="/api" control={control}>
  <input {...register('name')} />

  {isSubmitSuccessful && <p>Form submit successful.<p>}
  
  {errors?.root?.server && <p>Form submit failed.</p>}

  <button>submit</button>
</Form>

• React Native

const { control, register, formState: { isSubmitSuccessful, errors } } = useForm();

<Form action="/api" control={control} render={({ submit }) => {
  <View>
    {isSubmitSuccessful && <Text>Form submit successful.<Text>}
    
    {errors?.root?.server && <Text>Form submit failed.</Text>}
  
    <Button onPress={() => submit()} />
  </View>
}}/>

Types

• Component props

export type FormProps<
  T extends FieldValues,
  U extends FieldValues | undefined = undefined,
> = Partial<{
  control: Control<T>;
  children?: React.ReactNode | React.ReactNode[];
  render?: (props: {
    submit: (e?: React.FormEvent) => void;
  }) => React.ReactNode | React.ReactNode[];
  onSubmit: U extends FieldValues ? SubmitHandler<U> : SubmitHandler<T>;
  onSuccess: ({ response }: { response: Response }) => void;
  onError: ({
    response,
    error,
  }:
    | {
        response: Response;
        error?: undefined;
      }
    | {
        response?: undefined;
        error: unknown;
      }) => void;
  headers: Record<string, string>;
  validateStatus: (status: number) => boolean;
}> &
  Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onError'>;