Newskit Logo

Form

Overview

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

Usage

The Form component is used by wrapping around form fields, such as the TextInput. 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.

Validation

The Form component handles validation. This only works with the TextInput. 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

Props

childrenExclude<React.ReactNode, 'undefined'>
The form requires to have at least a TextInput and a submit button.
onSubmitSubmitHandler
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
onSubmitInvalidSubmitErrorHandler
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.

Your email

Your username

Validation Mode
ReValidation Mode
import React from 'react';
import { Form } from 'newskit';

export default () => <Form />;