<Form>

The <Form> component is the alternative way to initialize a @per-form/react form (it uses useForm and <FormProvider> internally).

Props

<Form> takes the following props:

Property	Type	Default	Description
children	ReactNode | ((data: IFormContext) => ReactNode)		The <Form> children. Can be used as a render props to get the form context
defaultValues	Record<string, unknown>		Form default values (see default values guide for more information)
filterLocalErrors	boolean	true	Filter local errors from the global form errors (see local fields guide for more information)
focusOnError	boolean	true	Focus the first field error or not
form	HTMLFormElement	null	Form ref
messages	Record<string, string>		Custom messages (see messages guide for more information)
mode	'all' | 'blur' | 'change' | 'submit'	'submit'	Validation strategy (see mode guide for more information)
onBlurOptOut	string[] | string		Opt-out for native onBlur event
onChangeOptOut	string[] | string		Opt-out for native onChange event (see controlled components guide for more information)
onReset	IResetHandler		Reset callback
onSubmit	ISubmitHandler		Submit callback
onSubmitError	ISubmitErrorHandler		Submit error callback (only when useNativeValidation=false)
revalidateMode	'blur' | 'change' | 'submit'	'submit'	Re-validation strategy (see mode guide for more information)
transformers	Record<string, (value: unknown) => unknown>		Transformers for type casting see type casting guide for more information)
useNativeValidation	boolean		Use native browser validation or use error state
validators	Record<string, IValidator | IValidatorObject>		Custom field validators (see validation guide for more information)
...rest	unknown[]		All other props are forwarded to the <form> element

See here for the types.

Usage

0

useNativeValidation

mode

revalidateMode

values

errors

import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { Form, type IFormContext, type IFormValues } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  return (
    <Form {...props} onSubmit={handleSubmit}>
      {({ errors }: IFormContext) => (
        <>
          <input name="text" required />
          {errors.all.text && <div className="error">{errors.all.text}</div>}
          <button type="submit">Submit</button>
        </>
      )}
    </Form>
  );
}