NewsKit Mobile 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.

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.
onSubmit(data: Record<string, string>) => void
Function which processes the submited data. The data parameter consists of an object where the input field names are associated with the input values.
validationModeonSubmit | onValidation = onSubmit
This option allows you to configure when input fields getting validated. Currently 'onSubmit' and 'onBlur' supported.
reValidationModeonSubmit | onValidation = onBlur
This option allows you to configure when input fields getting revalidated. Currently 'onSubmit' and 'onBlur' supported.

Your email

Your username

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

export default () => <Form />;