Newskit Logo



The Form component is used for processing form data; it's based on React Hook Form


The Form component is used by wrapping around form fields, such as the Email Input and Text Input. On submission, it passes the form data to the provided callback function. The inputs don't need to be direct children of the Form component and can be nested inside other elements. A submit button is required to be passed to the Form component, and the name property is required on the input.

On form submission, if there are validation errors present, the onSubmitInvalid callback function is called with the validation errors. Note that the onSubmit callback will not be called when there are validation errors.


The Form component handles validation. This only works with the Email Input and Text Input. The validation rules need to be passed to the TextInput. For more information about the validation rules: React Hook Form, apply validation and React Hook Form, register

The Form component also supports schema validation. To use an external validation library, for example Yup, you can pass yupResolver(schema) to the resolver prop. For more information about schema validation with React Hook Form: React Hook Form, schema validation


childrenExclude<React.ReactNode, 'undefined'>
The form requires to have at least a TextInput or EmailInput and a submit button.
Function called when form is submitted without validation errors. The data parameter consists of an object where the input field names are associated with the input values. For more information about the type 'SubmitHandler', please visit  React Hook Form's documentation
When submitting the form clicking on a button, is suggested to keep the whole logic in the `onSubmit` event rather than split it in both an onClick and onSubmit event, for avoiding issues at runtime.
Similar to onSubmit, this function is called when submission is attempted but fails with validation errors. It receives an object of form element names as keys, with FormError objects as values. FormError objects consist of the type and message of the error, along with a ref to the offending form field element. Type "SubmitErrorHandler" is similar to type "SubmitHandler" except that it accepts the errors parameter rather than data.
validationModeonSubmit | onValidation = onSubmit
This option allows you to configure when input fields getting validated. Currently 'onSubmit' and 'onBlur' are supported.
reValidationModeonSubmit | onValidation = onBlur
This option allows you to configure when input fields getting revalidated. Currently 'onSubmit' and 'onBlur' are supported.
defaultValuesRecord<string, string>
The defaultValue for an input is used as the initial value when a component is first rendered, before a user interacts with it. The defaultValues object uses the form element names as keys.
resolverResolver<Record<string, string>, object>
The resolver will validate your input data against the schema and return with either errors or a valid result.
Validation Mode
ReValidation Mode
1import React from 'react';
2import { Form } from 'newskit';
4export default () => <Form />;