Form

A set of components and models that process form data.

<Form> Define a form.
<FormControl> Define form-control.
<FormGroup> Define form groups, used for form layout.
<ControlLabel> title of form-control.
<HelpBlock> help infomation of form-controll

Usage

import { Form, FormGroup, FormControl, ControlLabel, HelpBlock } from 'rsuite';

Layouts

Default

The default is the vertical layout

Fluid

The fluid property allows the Input 100% of the form to fill the container, valid only in vertical layouts.

Horizontal layout

Inline Layout

Layout In Modal

Status

Help Block

<HelpBlock> A help description can be defined below the form component. If the tooltip property is set, an icon will be displayed on the form component and the help description information will be displayed as <Tooltip>.

Error Message

Error message can be set in 2 ways:

The <FormControl> component passes an errorMessage property setting error message, and errorPlacement sets the location of the error message display.
Customize a prompt message.

Disabled and read only

Validations

Default check

The form will automatically trigger the data check after the submit event is triggered.

Schema Model

Form Check needs to be used <Form>, <FormControl> and Schema.Model 。

<Form> To define a form, you can set value and model for the form, and model is the data model created by Schema.Model.
<FormControl> Define a Filed that corresponds to the key of the Schema.Model object via the name property. For detailed reference: Custom Form Components.
Schema.Model Define a data model, using the reference schema.
Custom trigger check: <Form> instance provides check and checkForField methods, used to trigger form checksum field validation

Asynchronous check

Under certain conditions, we need to perform asynchronous verification on the data, such as verifying whether the username is duplicated. The following example will illustrate the processing of asynchronous verification.

Set the checkAsync property on <FormControl> that requires asynchronous validation.
The validation rules for asynchronous validation add an object with a return value of Promise via the addRule method of schema.
The check can be triggered manually by calling checkAsync and checkForFieldAsync of <Form>.

Custom FormControl

All Data Entry-related components can be used in forms such as Checkbox, SelectPicker, Slider, and so on. But you need to use the FormControl component for data management and data association with the Form component.

FormControl used to bind data fields in a Form, passing the name attribute to the key of the Schema.Model object.
FormControl the default is an Input component, which can be set through the ʻaccepter` component.

For example: <FormControl accepter={CheckboxGroup} /> , FormControl renders a <CheckboxGroup> component and binds to the Schema.Model instance in the Form. The rich text editor in the following example, using react-quill

Third-Party Libraries

Take text-mask as an example:

Custom trigger verification

In some cases, there is no need for real-time validation of the form data. You can customize the way the control is validated and configure the checkTrigger parameter.

The default value of checkTrigger is 'change', options includes:

'change' : trigger verification when data change
'blur' : trigger verification when component blur
'none' : Only valid when calling the check() method of <Form>

There are checkTrigger properties on the <Form> and <FormControl> components. You can define the entire form's validation method in <Form>. If there is a form component that needs to handle the validation independently, you can Set it on <FormControl>.

You can also set the check delay time checkDelay, the default value is 500 milliseconds.

Props

`<Form>`

Property	Type `(default)`	Description
checkDelay	number `(500)`	Delayed processing when data check, unit: millisecond
checkTrigger	enum: 'change','blur','none' `('change')`	Trigger the type of form validation
classPrefix	string `('form')`	The prefix of the component CSS class
errorFromContext	boolean `(true)`	Error reminders in FormControl are defaulted from Context
fluid	boolean	The fluid property allows the Input 100% of the form to fill the container, valid only in vertical layouts
formDefaultValue	Object	Default value of form
formError	Object	Error message of form
formValue	Object	Value of form (Controlled)
layout	enum: 'horizontal', 'vertical', 'inline' `('vertical')`	Set the left and right columns of the layout of the elements within the form
model	Schema	SchemaModel Object
onChange	(formValue:Object, event:Object) => void	Callback fired when data changing
onCheck	(formError:Object) => void	Callback fired when data cheking
onError	(formError:Object) => void	Callback fired when error checking

Form methods

check

Verify form data.

check: (callback?: (formError: E) => void) => boolean;

checkAsync

Asynchronously check form data

checkAsync: () => Promise<any>;

checkForField

Checklist single field value.

checkForField: (
    fieldName: keyof T,
    callback?: (checkResult: CheckResult<errorMsg>) => void
  ) => boolean;

checkForFieldAsync

Asynchronous check form single field value

checkForFieldAsync: (fieldName: keyof T) => Promise<CheckResult>;

cleanErrors

Clean error message.

cleanErrors(callback: () => void) => void

cleanErrorForFiled

Clear single field error message

cleanErrorForFiled: (fieldName: keyof E, callback?: () => void) => void;

`<FormControl>`

Property	Type`(default)`	Description
accepter	React.ElementType `(Input)`	Proxied components
checkAsync	boolean	Asynchronous check value
checkTrigger	enum: 'change','blur','none'	The data validation trigger type, and it wiill overrides the setting on `<Form>`
classPrefix	string `('form-control')`	The prefix of the component CSS class
errorMessage	React.Node	Show error messages
errorPlacement	enum: Placement8 `('bottomStart')`	The placement of error messages
name *	string	The name of form-control
readOnly	boolean	Make the control readonly
plaintext	boolean	Make the control plaintext

`<FormGroup>`

Property	Type`(default)`	Description
classPrefix	string `('form-group')`	The prefix of the component CSS class
controlId	string	Sets id for controlled component

`<ControlLabel>`

Property	Type`(default)`	Description
classPrefix	string `('control-label')`	The prefix of the component CSS class
htmlFor	string	Attribute of the html label tag, defaults to the controlId of the FormGroup
srOnly	boolean	Screen reader only

`<HelpBlock>`

Property	Type`(default)`	Description
classPrefix	string `('help-block')`	The prefix of the component CSS class
htmlFor	string	Attribute of the html label tag, defaults to the controlId of the FormGroup
tooltip	boolean	Whether to show through the Tooltip component