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
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