rsuite/cjs/Form/Form.d.ts

A suite of react components

import React, { FormHTMLAttributes } from 'react';
import { FormControlComponent } from '../FormControl';
import { FormInstance } from './hooks/useFormRef';
import { Schema } from 'schema-typed';
import type { WithAsProps, CheckTriggerType } from '../internals/types';
import type { Resolver } from './resolvers';
export interface FormProps<V = Record<string, any>, M = any, E = {
    [P in keyof V]?: M;
}> extends WithAsProps, Omit<FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit' | 'onError' | 'onReset'> {
    /**
     * Set the left and right columns of the layout of the elements within the form。
     *
     * @default 'vertical'
     */
    layout?: 'horizontal' | 'vertical' | 'inline';
    /**
     * The fluid property allows the Input 100% of the form to fill the container, valid only in vertical layouts.
     */
    fluid?: boolean;
    /**
     * Current value of the input. Creates a controlled component
     */
    formValue?: V | null;
    /**
     * Initial value
     */
    formDefaultValue?: V | null;
    /**
     * Error message of form
     */
    formError?: E | null;
    /**
     * Trigger the type of form validation.
     *
     * @default 'change'
     */
    checkTrigger?: CheckTriggerType;
    /**
     * SchemaModel object
     *
     * @see https://github.com/rsuite/schema-typed
     */
    model?: Schema;
    /**
     * A resolver function for integrating third-party validation libraries such as
     * Yup, Zod, AJV, Joi, Valibot, etc.
     *
     * When provided, the `resolver` takes precedence over the `model` prop for
     * form-level validation (`check` / `checkAsync`).  Field-level inline `rule`
     * props on `<Form.Control>` components are still respected.
     *
     * The resolver receives the current form values and must return (or resolve to)
     * a `{ errors }` object where each key is a field name and each value is an
     * error message or error object.  An empty `errors` object means the form is valid.
     *
     * **Note:** If the resolver is asynchronous, form-level sync validation
     * (`check()`) will return `false` and log a warning. Use `checkAsync()` or
     * rely on the `onSubmit` callback (which always awaits the resolver).
     *
     * @example
     * ```tsx
     * import * as yup from 'yup';
     *
     * const schema = yup.object({ name: yup.string().email().required() });
     * const resolver = async (formValue) => {
     *   try {
     *     await schema.validate(formValue, { abortEarly: false });
     *     return { errors: {} };
     *   } catch (e) {
     *     const errors = {};
     *     e.inner.forEach(err => { if (err.path) errors[err.path] = err.message; });
     *     return { errors };
     *   }
     * };
     *
     * <Form resolver={resolver} onSubmit={handleSubmit}>…</Form>
     * ```
     */
    resolver?: Resolver<V>;
    /**
     * Make the form readonly
     */
    readOnly?: boolean;
    /**
     * Render the form as plain text
     */
    plaintext?: boolean;
    /**
     * Disable the form
     */
    disabled?: boolean;
    /**
     * The error message comes from context
     */
    errorFromContext?: boolean;
    /**
     * The form data is nested.
     * You may now nest fields with "dot syntax" (e.g. address.city).
     *
     * @default false
     * @version v5.51.0
     * @example
     * ```jsx
     * <Form formValue={{ address: { city: 'Shanghai' } }} nestedField>
     *  <FormControl name="address.city" />
     * </Form>
     * ```
     */
    nestedField?: boolean;
    /**
     * Callback fired when data changing
     */
    onChange?: (formValue: V, event?: React.SyntheticEvent) => void;
    /**
     * Callback fired when error checking
     */
    onError?: (formError: E) => void;
    /**
     * Callback fired when data cheking
     */
    onCheck?: (formError: E) => void;
    /**
     * Callback fired when form submit，only when the form data is validated will trigger
     */
    onSubmit?: (formValue: V | null, event?: React.FormEvent<HTMLFormElement>) => void;
    /**
     * Callback fired when form reset
     */
    onReset?: (formValue: V | null, event?: React.FormEvent<HTMLFormElement>) => void;
}
/**
 * The `Form` component is a form interface for collecting and validating user input.
 * @see https://rsuitejs.com/components/form
 */
declare const Form: import("../internals/types").InternalRefForwardingComponent<"form", FormProps<Record<string, any>, any, {
    [x: string]: any;
}> & {
    ref?: React.Ref<FormInstance>;
}, never> & {
    Stack: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormStack").FormStackProps, never> & Record<string, never>;
    Control: FormControlComponent;
    Label: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
    ErrorMessage: import("../internals/types").InternalRefForwardingComponent<"div", import("../FormErrorMessage").FormErrorMessageProps, never> & Record<string, never>;
    Group: import("../internals/types").InternalRefForwardingComponent<"div", import("../FormGroup").FormGroupProps, never> & Record<string, never>;
    Text: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormHelpText").FormHelpTextProps, never> & Record<string, never>;
    /**
     * @deprecated Use `Form.Label` instead
     */
    ControlLabel: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
    /**
     * @deprecated Use `Form.Text` instead
     */
    HelpText: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormHelpText").FormHelpTextProps, never> & Record<string, never>;
};
export default Form;