Backstage
    Preparing search index...

    Interface ScaffolderRJSFFormProps<T, S, F>

    The properties that are passed to the Form

    interface ScaffolderRJSFFormProps<
        T = any,
        S extends StrictRJSFSchema = RJSFSchema,
        F extends FormContextType = any,
    > {
        _internalFormWrapper?: ElementType;
        acceptcharset?: string;
        action?: string;
        autoComplete?: string;
        children?: ReactNode;
        className?: string;
        customValidate?: CustomValidator<T, S, F>;
        disabled?: boolean;
        enctype?: string;
        experimental_defaultFormStateBehavior?: Experimental_DefaultFormStateBehavior;
        extraErrors?: ErrorSchema<T>;
        fields?: ScaffolderRJSFRegistryFieldsType<T, S, F>;
        focusOnFirstError?: boolean | ((error: RJSFValidationError) => void);
        formContext?: F;
        formData?: T;
        id?: string;
        idPrefix?: string;
        idSeparator?: string;
        liveOmit?: boolean;
        liveValidate?: boolean;
        method?: string;
        name?: string;
        noHtml5Validate?: boolean;
        noValidate?: boolean;
        omitExtraData?: boolean;
        onBlur?: (id: string, data: any) => void;
        onChange?: (data: IChangeEvent<T, S, F>, id?: string) => void;
        onError?: (errors: RJSFValidationError[]) => void;
        onFocus?: (id: string, data: any) => void;
        onSubmit?: (data: IChangeEvent<T, S, F>, event: FormEvent<any>) => void;
        readonly?: boolean;
        ref?: Ref<Form<T, S, F>>;
        schema: S;
        showErrorList?: false | "top" | "bottom";
        tagName?: ElementType;
        target?: string;
        templates?: Partial<Omit<TemplatesType<T, S, F>, "ButtonTemplates">> & {
            ButtonTemplates?: Partial<
                {
                    AddButton: ComponentType<IconButtonProps<T, S, F>>;
                    CopyButton: ComponentType<IconButtonProps<T, S, F>>;
                    MoveDownButton: ComponentType<IconButtonProps<T, S, F>>;
                    MoveUpButton: ComponentType<IconButtonProps<T, S, F>>;
                    RemoveButton: ComponentType<IconButtonProps<T, S, F>>;
                    SubmitButton: ComponentType<SubmitButtonProps<T, S, F>>;
                },
            >;
        };
        transformErrors?: ErrorTransformer<T, S, F>;
        translateString?: (
            stringKey: TranslatableString,
            params?: string[],
        ) => string;
        uiSchema?: UiSchema<T, S, F>;
        validator: ValidatorType<T, S, F>;
        widgets?: RegistryWidgetsType<T, S, F>;
    }

    Type Parameters

    • T = any
    • S extends StrictRJSFSchema = RJSFSchema
    • F extends FormContextType = any
    Index

    Properties

    _internalFormWrapper?: ElementType

    _internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around <Form /> that supports the proper rendering of those themes. To use this prop, one must pass a component that takes two props: children and as. That component, at minimum, should render the children inside of a

    tag unless as is provided, in which case, use the as prop in place of <form />. i.e.:

    export default function InternalForm({ children, as }) {
    const FormTag = as || 'form';
    return <FormTag>{children}</FormTag>;
    }

    Use at your own risk as this prop is private and may change at any time without notice.

    acceptcharset?: string

    The value of this prop will be passed to the accept-charset HTML attribute on the form

    action?: string

    The value of this prop will be passed to the action HTML attribute on the form

    NOTE: this just renders the action attribute in the HTML markup. There is no real network request being sent to this action on submit. Instead, react-jsonschema-form catches the submit event with event.preventDefault() and then calls the onSubmit function, where you could send a request programmatically with fetch or similar.

    autoComplete?: string

    The value of this prop will be passed to the autocomplete HTML attribute on the form

    children?: ReactNode

    The optional children for the form, if provided, it will replace the default SubmitButton

    className?: string

    The value of this prop will be passed to the class HTML attribute on the form

    customValidate?: CustomValidator<T, S, F>

    Formerly the validate prop; Takes a function that specifies custom validation rules for the form

    disabled?: boolean

    It's possible to disable the whole form by setting the disabled prop. The disabled prop is then forwarded down to each field of the form. If you just want to disable some fields, see the ui:disabled parameter in uiSchema

    enctype?: string

    The value of this prop will be passed to the enctype HTML attribute on the form

    experimental_defaultFormStateBehavior?: Experimental_DefaultFormStateBehavior

    Optional configuration object with flags, if provided, allows users to override default form state behavior Currently only affecting minItems on array fields and handling of setting defaults based on the value of emptyObjectFields

    extraErrors?: ErrorSchema<T>

    This prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it can be used to implement asynchronous validation

    The dictionary of registered fields in the form

    focusOnFirstError?: boolean | ((error: RJSFValidationError) => void)

    If set to true, then the first field with an error will receive the focus when the form is submitted with errors

    formContext?: F

    You can provide a formContext object to the form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.

    NOTE: Setting {readonlyAsDisabled: false} on the formContext will make the antd theme treat readOnly fields as disabled.

    formData?: T

    The data for the form, used to prefill a form with existing data

    id?: string

    The value of this prop will be passed to the id HTML attribute on the form

    idPrefix?: string

    To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids; Default is root

    idSeparator?: string

    To avoid using a path separator that is present in field names, it is possible to change the separator used for ids (Default is _)

    liveOmit?: boolean

    If omitExtraData and liveOmit are both set to true, then extra form data values that are not in any form field will be removed whenever onChange is called. Set to false by default

    liveValidate?: boolean

    If set to true, the form will perform validation and show any validation errors whenever the form data is changed, rather than just on submit

    method?: string

    The value of this prop will be passed to the method HTML attribute on the form

    name?: string

    The value of this prop will be passed to the name HTML attribute on the form

    noHtml5Validate?: boolean

    If set to true, turns off HTML5 validation on the form; Set to false by default

    noValidate?: boolean

    If set to true, turns off all validation. Set to false by default

    • In a future release, this switch may be replaced by making validator prop optional
    omitExtraData?: boolean

    If set to true, then extra form data values that are not in any form field will be removed whenever onSubmit is called. Set to false by default.

    onBlur?: (id: string, data: any) => void

    Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an onBlur handler, which will receive the id of the input that was blurred and the field value

    onChange?: (data: IChangeEvent<T, S, F>, id?: string) => void

    If you plan on being notified every time the form data are updated, you can pass an onChange handler, which will receive the same args as onSubmit any time a value is updated in the form. Can also return the id of the field that caused the change

    onError?: (errors: RJSFValidationError[]) => void

    To react when submitted form data are invalid, pass an onError handler. It will be passed the list of encountered errors

    onFocus?: (id: string, data: any) => void

    Sometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an onFocus handler, which will receive the id of the input that is focused and the field value

    onSubmit?: (data: IChangeEvent<T, S, F>, event: FormEvent<any>) => void

    You can pass a function as the onSubmit prop of your Form component to listen to when the form is submitted and its data are valid. It will be passed a result object having a formData attribute, which is the valid form data you're usually after. The original event will also be passed as a second parameter

    readonly?: boolean

    It's possible to make the whole form read-only by setting the readonly prop. The readonly prop is then forwarded down to each field of the form. If you just want to make some fields read-only, see the ui:readonly parameter in uiSchema

    ref?: Ref<Form<T, S, F>>

    Support receiving a React ref to the Form

    schema: S

    The JSON schema object for the form

    showErrorList?: false | "top" | "bottom"

    When this prop is set to top or 'bottom', a list of errors (or the custom error list defined in the ErrorList) will also show. When set to false, only inline input validation errors will be shown. Set to top by default

    tagName?: ElementType

    It's possible to change the default form tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the Enter key is pressed, may no longer work

    target?: string

    The value of this prop will be passed to the target HTML attribute on the form

    templates?: Partial<Omit<TemplatesType<T, S, F>, "ButtonTemplates">> & {
        ButtonTemplates?: Partial<
            {
                AddButton: ComponentType<IconButtonProps<T, S, F>>;
                CopyButton: ComponentType<IconButtonProps<T, S, F>>;
                MoveDownButton: ComponentType<IconButtonProps<T, S, F>>;
                MoveUpButton: ComponentType<IconButtonProps<T, S, F>>;
                RemoveButton: ComponentType<IconButtonProps<T, S, F>>;
                SubmitButton: ComponentType<SubmitButtonProps<T, S, F>>;
            },
        >;
    }

    The dictionary of registered templates in the form; Partial allows a subset to be provided beyond the defaults

    transformErrors?: ErrorTransformer<T, S, F>

    A function can be passed to this prop in order to make modifications to the default errors resulting from JSON Schema validation

    translateString?: (stringKey: TranslatableString, params?: string[]) => string

    Optional string translation function, if provided, allows users to change the translation of the RJSF internal strings. Some strings contain replaceable parameter values as indicated by %1, %2, etc. The number after the % indicates the order of the parameter. The ordering of parameters is important because some languages may choose to put the second parameter before the first in its translation.

    uiSchema?: UiSchema<T, S, F>

    The uiSchema for the form

    validator: ValidatorType<T, S, F>

    An implementation of the ValidatorType interface that is needed for form validation to work

    widgets?: RegistryWidgetsType<T, S, F>

    The dictionary of registered widgets in the form