@atlaskit/form/dist/types/form.d.ts

A form allows people to input information.

import React, { type ReactNode } from 'react';
import { type FormState } from 'final-form';
import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
import { type OnSubmitHandler } from './types';
interface FormChildrenProps {
    ref: React.RefObject<HTMLFormElement> | ((value: HTMLFormElement | null) => void);
    onSubmit: (event?: React.FormEvent<HTMLFormElement> | React.SyntheticEvent<HTMLElement>) => void;
    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
}
type FormChildrenArgs<FormValues> = {
    formProps: FormChildrenProps;
    disabled: boolean;
    dirty: boolean;
    submitting: boolean;
    getState: () => FormState<FormValues>;
    getValues: () => FormValues;
    setFieldValue: (name: string, value: any) => void;
    resetFieldState?: (name: string) => void;
    reset: (initialValues?: FormValues) => void;
};
type ExcludeReservedFormProps = {
    autocomplete?: never;
    id?: never;
    label?: never;
    labelId?: never;
    onKeyDown?: never;
    onSubmit?: never;
    name?: never;
    noValidate?: never;
    ref?: never;
    xcss?: never;
};
export interface FormProps<FormValues> {
    /**
     * Indicates whether the value of the form's controls can be automatically completed by the browser. It is `on` by default.
     */
    autocomplete?: 'off' | 'on';
    /**
     * The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.
     * You can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).
     *
     * If you are only spreading `formProps` onto the HTML `<form>` element and not using any of the other props (like `submitting`, etc.), `children` can be plain JSX. All of the children will be wrapped within an HTML `<form>` element that includes all necessary props, including those provided on the form component.
     */
    children: ((args: FormChildrenArgs<FormValues>) => ReactNode) | (() => void) | ReactNode;
    /**
     * When `Form` renders JSX children directly and not using a function to
     * spread `formProps` manually, the properties in this `formProps` prop will
     * be spread on an internally rendered  HTML `form` element.
     */
    formProps?: {
        [x: string]: any;
    } & ExcludeReservedFormProps;
    /**
     * `id` attribute applied to the `form` element.
     */
    id?: string;
    /**
     * Accessible name to be applied to the form element. Maps to the `aria-label` attribute.
     */
    label?: string;
    /**
     * ID of the element that has the accessible name to be applied to the form element. Maps to the `aria-labelledby` attribute.
     */
    labelId?: string;
    /**
     * Event handler called when the form is submitted. Fields must be free of validation errors.
     */
    onSubmit: OnSubmitHandler<FormValues>;
    /**
     * Sets the form and its fields as disabled. Users cannot edit or focus on the fields.
     */
    isDisabled?: boolean;
    /**
     * `name` attribute applied to the `form` element.
     */
    name?: string;
    /**
     * Indicates if the inputs within the form will bypass HTML5 constraint
     * validation when submitted. This is not recommended to be used because it
     * can cause experiences to be inaccessible. It is `false` by default but will
     * be set to `true` in the future to increase accessibility, so it is **not recommended**.
     */
    noValidate?: boolean;
    /**
     * A test identifier for the form element. This will be applied as `data-testid` attribute.
     */
    testId?: string;
    /**
     * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
     */
    xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
}
/**
 * __Form__
 *
 * A form allows users to input information.
 *
 * - [Examples](https://atlassian.design/components/form/examples)
 * - [Code](https://atlassian.design/components/form/code)
 * - [Usage](https://atlassian.design/components/form/usage)
 */
declare const Form: <FormValues extends Record<string, any>>(props: FormProps<FormValues> & React.RefAttributes<HTMLFormElement>) => React.ReactElement | null;
export default Form;