carbon-react/esm/components/form/form.component.d.ts

A library of reusable React components for easily building user interfaces.

import React from "react";
import { SpaceProps, PaddingProps } from "styled-system";
import { TagProps } from "../../__internal__/utils/helpers/tags";
import { FormButtonAlignment } from "./form.config";
export interface FormProps extends SpaceProps, TagProps {
    /** Alignment of buttons */
    buttonAlignment?: FormButtonAlignment;
    /** Child elements */
    children?: React.ReactNode;
    /** The total number of errors present in the form */
    errorCount?: number;
    /** Spacing between form fields, given number will be multiplied by base spacing unit (8) */
    fieldSpacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
    /** Additional buttons rendered on the left side of the save button */
    leftSideButtons?: React.ReactNode;
    /** Disable HTML5 validation */
    noValidate?: boolean;
    /** Callback passed to the form element */
    onSubmit?: React.FormEventHandler<HTMLFormElement>;
    /** Additional buttons rendered on the right side of the save button */
    rightSideButtons?: React.ReactNode;
    /** Save button to be rendered */
    saveButton?: React.ReactNode;
    /** Custom content to render in the form's footer */
    footerChildren?: React.ReactNode;
    /** Enables the sticky footer. */
    stickyFooter?: boolean;
    /** Background variant for the sticky footer. */
    stickyFooterVariant?: "light" | "grey";
    /** The total number of warnings present in the form */
    warningCount?: number;
    /** Height of the form (any valid CSS value) */
    height?: string;
    /** Applies styling for full width buttons. Please note that you will still need to pass the `fullWidth` prop to the button you compose */
    fullWidthButtons?: boolean;
    /** Padding to be set on the form footer */
    footerPadding?: PaddingProps;
}
export declare const Form: {
    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, footerChildren, stickyFooter, stickyFooterVariant, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, ...rest }: FormProps): React.JSX.Element;
    displayName: string;
};
export default Form;