Options API

Here is a full list of options you can use with React Browser Form.

Options combinations that could potentially break your application or might be severe oversights are also verified at runtime. Errors are thrown from the hook if problematic setup occurs, so pay attention to this document.

You can find all of these explanations as inline comments (JSDoc) when using React Browser Form in your code.

Key	Type	Explanation
Required
name(required)	string	Form DOM name attribute - must be unique. Used to access inputs through `document.forms`, to read all events and hydrate the form data and the DOM inputs.
defaultValues(required)	Schema	Default values need to match your schema. Do not change these - it will result in incorrect behavior.
Optional
onSubmit	(data: Schema) => void	A callback for when the form is submitted. Will not trigger if there are errors during validation!
onChange	(data: Schema) => void	This method is useful when using `onChange` mode, live fields, setting or resetting values, etc.
mode	"onSubmitUnlessError" \| "onSubmit" \| "onBlurUnlessError" \| "onBlur" \| "onChange"	`onSubmitUnlessError`: Hydrate and validate upon form submit event. Inputs with errors re-validate on input change until the error is resolved. `onSubmit`: Hydrate and validate upon form submit event. The fastest option if not validating, reliant on browser handling and keeping inputs mounted. `onBlurUnlessError`: Hydrate and validate the form on every input blur. Inputs with errors re-validate on input change until the error is resolved. `onBlur`: Hydrate and validate the form on every input blur. Recommended for forms with more complex validation logic. `onChange`: The React way of handling forms. - the slowest method. Only good for live data handling. It is recommended to use live fields instead. Example Default: `onSubmitUnlessError`
liveFields	Array<keyof Schema>	A subset of fields that will trigger update and validation of specified fields on every input change. Useful for conditional operations within forms, dependent fields, etc. Example
validationSchema	ValidationSchema<Schema>	A dead-simple validation with a validator schema that has access to single field and all form data. Throw `ValidationError` with an error message if field validation fails. Documentation Examples
revalidationStrategy	"onChange" \| "onBlur"	A revalidation strategy for inputs with errors. To be used with any unlessError mode. Choose `onBlur` if your validation is demanding. Example Default: `onChange`*
transformationSchema	TransformationSchema<Schema>	A dead-simple type and value transformation schema. Useful when you need easy data processing, input masking or just recast types. Documentation Example
validateAfterInit	boolean	Whether to perform validation right after mounting the form - before the first render.

Options API

Required

Optional