or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cards.mddescriptions.mdfield-rendering.mdform-components.mdindex.mdlayout.mdproviders.mdskeleton.mdtable-list.mdutilities.md
tile.json

form-components.mddocs/

Form Components

Complete form solution with advanced form layouts, 25+ specialized field components, validation, dependencies, and enhanced user experience features.

Capabilities

ProForm - Main Form Component

Enhanced form component with automatic submission handling, loading states, and integrated validation.

/**
 * Enhanced form component with automatic submission handling
 * @param props - ProForm configuration props
 * @returns JSX.Element
 */
function ProForm(props: ProFormProps): JSX.Element;

interface ProFormProps extends Omit<FormProps, 'onFinish'> {
  /** Form submission handler that returns success status */
  onFinish?: (values: Record<string, any>) => Promise<boolean | void> | boolean | void;
  /** Custom submitter configuration or false to hide */
  submitter?: SubmitterProps | false;
  /** Form instance for programmatic control */
  form?: ProFormInstance;
  /** Initial form values */
  initialValues?: Record<string, any>;
  /** Form layout direction */
  layout?: 'horizontal' | 'vertical' | 'inline';
  /** Automatic submission on value change */
  autoFocusFirstInput?: boolean;
  /** Form submission loading state */
  submitting?: boolean;
  /** Date format for date fields */
  dateFormatter?: 'string' | false;
  /** Sync URL with form values */
  syncToUrl?: boolean;
  /** Sync initial values to URL */
  syncToInitialValues?: boolean;
  /** Preserve form values in URL */
  preserve?: boolean;
  /** Form container width */
  size?: 'small' | 'middle' | 'large';
}

interface SubmitterProps {
  /** Reset button configuration */
  resetButtonProps?: ButtonProps | false;
  /** Submit button configuration */
  submitButtonProps?: ButtonProps | false;
  /** Custom render function for submitter */
  render?: (props: SubmitterProps, dom: React.ReactNode[]) => React.ReactNode[];
  /** Search form specific configurations */
  searchConfig?: {
    resetText?: string;
    submitText?: string;
  };
}

Usage Examples:

import { ProForm, ProFormText } from "@ant-design/pro-components";

// Basic form
const BasicForm = () => {
  return (
    <ProForm
      onFinish={async (values) => {
        console.log('Form values:', values);
        // API call here
        return true; // Return true for success
      }}
      initialValues={{ username: 'admin' }}
    >
      <ProFormText
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Username is required' }]}
      />
      <ProFormText.Password
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Password is required' }]}
      />
    </ProForm>
  );
};

// Form with custom submitter
const CustomForm = () => {
  return (
    <ProForm
      submitter={{
        searchConfig: {
          resetText: 'Clear',
          submitText: 'Save Changes',
        },
        resetButtonProps: {
          style: { display: 'none' }, // Hide reset button
        },
      }}
      onFinish={async (values) => {
        // Handle form submission
        return true;
      }}
    >
      {/* Form fields */}
    </ProForm>
  );
};

Modal and Drawer Forms

Form components that render within modals and drawers with integrated trigger buttons.

/**
 * Form component rendered within a modal dialog
 * @param props - ModalForm configuration props
 * @returns JSX.Element
 */
function ModalForm(props: ModalFormProps): JSX.Element;

/**
 * Form component rendered within a drawer panel
 * @param props - DrawerForm configuration props
 * @returns JSX.Element
 */
function DrawerForm(props: DrawerFormProps): JSX.Element;

interface ModalFormProps extends ProFormProps {
  /** Modal title */
  title?: React.ReactNode;
  /** Modal width */
  width?: string | number;
  /** Trigger element to open modal */
  trigger?: React.ReactNode;
  /** Modal visibility state */
  visible?: boolean;
  /** Modal visibility change handler */
  onVisibleChange?: (visible: boolean) => void;
  /** Modal properties */
  modalProps?: ModalProps;
  /** Auto-reset form on successful submission */
  autoResetForm?: boolean;
  /** Auto-focus first input */
  autoFocusFirstInput?: boolean;
}

interface DrawerFormProps extends ProFormProps {
  /** Drawer title */
  title?: React.ReactNode;
  /** Drawer width */
  width?: string | number;
  /** Trigger element to open drawer */
  trigger?: React.ReactNode;
  /** Drawer visibility state */
  visible?: boolean;
  /** Drawer visibility change handler */
  onVisibleChange?: (visible: boolean) => void;
  /** Drawer properties */
  drawerProps?: DrawerProps;
  /** Drawer placement */
  placement?: 'top' | 'right' | 'bottom' | 'left';
}

Multi-Step Forms

Step-by-step form wizard with navigation and validation.

/**
 * Multi-step form wizard component
 * @param props - StepsForm configuration props
 * @returns JSX.Element
 */
function StepsForm(props: StepsFormProps): JSX.Element;

/**
 * Individual step in a StepsForm
 * @param props - StepForm configuration props
 * @returns JSX.Element
 */
function StepsForm.StepForm(props: StepFormProps): JSX.Element;

interface StepsFormProps extends Omit<ProFormProps, 'onFinish'> {
  /** Current active step */
  current?: number;
  /** Step change handler */
  onCurrentChange?: (current: number) => void;
  /** Final form submission handler */
  onFinish?: (values: Record<string, any>) => Promise<boolean | void>;
  /** Form submission failure handler */
  onFinishFailed?: (errorInfo: any) => void;
  /** Steps configuration */
  stepsProps?: StepsProps;
  /** Step form render mode */
  stepsRender?: (steps: React.ReactNode[], dom: React.ReactNode) => React.ReactNode;
  /** Form container properties */
  stepsFormRender?: (stepsDom: React.ReactNode, formDom: React.ReactNode) => React.ReactNode;
}

interface StepFormProps extends ProFormProps {
  /** Step title */
  title?: React.ReactNode;
  /** Step description */
  description?: React.ReactNode;
}

Filter Forms

Specialized forms for search and filtering scenarios.

/**
 * Query filter form for search scenarios
 * @param props - QueryFilter configuration props
 * @returns JSX.Element
 */
function QueryFilter(props: QueryFilterProps): JSX.Element;

/**
 * Lightweight filter form with minimal UI
 * @param props - LightFilter configuration props
 * @returns JSX.Element
 */
function LightFilter(props: LightFilterProps): JSX.Element;

interface QueryFilterProps extends Omit<ProFormProps, 'layout'> {
  /** Number of fields per row */
  span?: number;
  /** Field label width */
  labelWidth?: number | 'auto';
  /** Split configuration for responsive layout */
  split?: boolean;
  /** Collapse configuration */
  collapsed?: boolean;
  /** Collapse state change handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Default collapsed state */
  defaultCollapsed?: boolean;
  /** Hide reset button */
  hideRequiredMark?: boolean;
  /** Search form specific options */
  optionRender?: ((searchConfig: any, formProps: any, dom: React.ReactNode[]) => React.ReactNode[]) | false;
}

interface LightFilterProps extends Omit<ProFormProps, 'layout'> {
  /** Collapse configuration */
  collapse?: boolean;
  /** Collapse state */
  collapsed?: boolean;
  /** Collapse change handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Footer render function */
  footerRender?: (onClear?: () => void, onConfirm?: () => void) => React.ReactNode;
}

Login Forms

Pre-configured login form templates.

/**
 * Login form component with common fields
 * @param props - LoginForm configuration props
 * @returns JSX.Element
 */
function LoginForm(props: LoginFormProps): JSX.Element;

/**
 * Full-page login form with layout
 * @param props - LoginFormPage configuration props
 * @returns JSX.Element
 */
function LoginFormPage(props: LoginFormPageProps): JSX.Element;

interface LoginFormProps extends ProFormProps {
  /** Login form title */
  title?: React.ReactNode;
  /** Login form subtitle */
  subTitle?: React.ReactNode;
  /** Logo image */
  logo?: React.ReactNode;
  /** Additional form actions */
  actions?: React.ReactNode;
  /** Login form message */
  message?: React.ReactNode;
}

interface LoginFormPageProps extends LoginFormProps {
  /** Background image or color */
  backgroundImageUrl?: string;
  /** Page background video */
  backgroundVideoUrl?: string;
  /** Activity configuration */
  activityConfig?: {
    style?: React.CSSProperties;
    title?: React.ReactNode;
    subTitle?: React.ReactNode;
    action?: React.ReactNode;
  };
}

Text Input Fields

Text-based form field components with various input types.

/**
 * Basic text input field
 * @param props - ProFormText configuration props
 * @returns JSX.Element
 */
function ProFormText(props: ProFormTextProps): JSX.Element;

/**
 * Password input field with visibility toggle
 * @param props - ProFormPasswordProps configuration props
 * @returns JSX.Element
 */
function ProFormText.Password(props: ProFormPasswordProps): JSX.Element;

/**
 * Multi-line textarea input field
 * @param props - ProFormTextAreaProps configuration props
 * @returns JSX.Element
 */
function ProFormTextArea(props: ProFormTextAreaProps): JSX.Element;

interface ProFormTextProps extends ProFormItemProps {
  /** Input field width */
  width?: number | 'sm' | 'md' | 'lg' | 'xl';
  /** Field properties passed to Ant Design Input */
  fieldProps?: InputProps;
  /** Placeholder text */
  placeholder?: string;
}

interface ProFormPasswordProps extends ProFormItemProps {
  /** Input field width */
  width?: number | 'sm' | 'md' | 'lg' | 'xl';
  /** Field properties passed to Ant Design Input.Password */
  fieldProps?: PasswordProps;
  /** Placeholder text */
  placeholder?: string;
}

interface ProFormTextAreaProps extends ProFormItemProps {
  /** Field properties passed to Ant Design Input.TextArea */
  fieldProps?: TextAreaProps;
  /** Placeholder text */
  placeholder?: string;
}

Numeric Input Fields

Numeric input components with validation and formatting.

/**
 * Numeric input field with formatting
 * @param props - ProFormDigit configuration props
 * @returns JSX.Element
 */
function ProFormDigit(props: ProFormDigitProps): JSX.Element;

/**
 * Numeric range input with min/max values
 * @param props - ProFormDigitRange configuration props
 * @returns JSX.Element
 */
function ProFormDigitRange(props: ProFormDigitRangeProps): JSX.Element;

/**
 * Money/currency input field with formatting
 * @param props - ProFormMoney configuration props
 * @returns JSX.Element
 */
function ProFormMoney(props: ProFormMoneyProps): JSX.Element;

interface ProFormDigitProps extends ProFormItemProps {
  /** Input field width */
  width?: number | 'sm' | 'md' | 'lg' | 'xl';
  /** Field properties passed to InputNumber */
  fieldProps?: InputNumberProps;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Decimal precision */
  precision?: number;
}

interface ProFormDigitRangeProps extends ProFormItemProps {
  /** Separator text between range inputs */
  separator?: string;
  /** Field properties for range inputs */
  fieldProps?: InputNumberProps;
}

interface ProFormMoneyProps extends ProFormItemProps {
  /** Input field width */
  width?: number | 'sm' | 'md' | 'lg' | 'xl';
  /** Currency locale */
  locale?: string;
  /** Currency symbol */
  customSymbol?: string;
  /** Field properties passed to InputNumber */
  fieldProps?: InputNumberProps;
}

Selection Fields

Various selection input components including dropdowns, checkboxes, and radio buttons.

/**
 * Select dropdown field
 * @param props - ProFormSelect configuration props
 * @returns JSX.Element
 */
function ProFormSelect(props: ProFormSelectProps): JSX.Element;

/**
 * Tree select field for hierarchical data
 * @param props - ProFormTreeSelect configuration props
 * @returns JSX.Element
 */
function ProFormTreeSelect(props: ProFormTreeSelectProps): JSX.Element;

/**
 * Cascader field for multi-level selection
 * @param props - ProFormCascader configuration props
 * @returns JSX.Element
 */
function ProFormCascader(props: ProFormCascaderProps): JSX.Element;

/**
 * Checkbox field
 * @param props - ProFormCheckbox configuration props
 * @returns JSX.Element
 */
function ProFormCheckbox(props: ProFormCheckboxProps): JSX.Element;

/**
 * Radio button field
 * @param props - ProFormRadio configuration props
 * @returns JSX.Element
 */
function ProFormRadio(props: ProFormRadioProps): JSX.Element;

interface ProFormSelectProps extends ProFormItemProps {
  /** Select options */
  options?: { label: React.ReactNode; value: any; disabled?: boolean }[];
  /** Value enum for options */
  valueEnum?: Record<string, { text: React.ReactNode; status?: string }>;
  /** Request function for remote data */
  request?: () => Promise<{ label: React.ReactNode; value: any }[]>;
  /** Field properties passed to Select */
  fieldProps?: SelectProps;
  /** Show search functionality */
  showSearch?: boolean;
}

interface ProFormTreeSelectProps extends ProFormItemProps {
  /** Tree data */
  tree?: any[];
  /** Request function for remote tree data */
  request?: () => Promise<any[]>;
  /** Field properties passed to TreeSelect */
  fieldProps?: TreeSelectProps;
}

interface ProFormCascaderProps extends ProFormItemProps {
  /** Cascader options */
  options?: CascaderOption[];
  /** Request function for remote data */
  request?: () => Promise<CascaderOption[]>;
  /** Field properties passed to Cascader */
  fieldProps?: CascaderProps;
}

Date and Time Fields

Comprehensive date and time input components with various picker types.

/**
 * Date picker field
 * @param props - ProFormDatePicker configuration props
 * @returns JSX.Element
 */
function ProFormDatePicker(props: ProFormDatePickerProps): JSX.Element;

/**
 * Date range picker field
 * @param props - ProFormDateRangePicker configuration props
 * @returns JSX.Element
 */
function ProFormDateRangePicker(props: ProFormDateRangePickerProps): JSX.Element;

/**
 * Date and time picker field
 * @param props - ProFormDateTimePicker configuration props
 * @returns JSX.Element
 */
function ProFormDateTimePicker(props: ProFormDateTimePickerProps): JSX.Element;

/**
 * Time picker field
 * @param props - ProFormTimePicker configuration props
 * @returns JSX.Element
 */
function ProFormTimePicker(props: ProFormTimePickerProps): JSX.Element;

interface ProFormDatePickerProps extends ProFormItemProps {
  /** Input field width */
  width?: number | 'sm' | 'md' | 'lg' | 'xl';
  /** Field properties passed to DatePicker */
  fieldProps?: DatePickerProps;
  /** Date format string */
  format?: string;
}

interface ProFormDateRangePickerProps extends ProFormItemProps {
  /** Input field width */
  width?: number | 'sm' | 'md' | 'lg' | 'xl';
  /** Field properties passed to DatePicker.RangePicker */
  fieldProps?: RangePickerProps;
  /** Date format string */
  format?: string;
}

Advanced Form Components

Specialized form components for advanced scenarios.

/**
 * Dynamic form list for arrays of data
 * @param props - ProFormList configuration props
 * @returns JSX.Element
 */
function ProFormList(props: ProFormListProps): JSX.Element;

/**
 * Form field dependencies handler
 * @param props - ProFormDependency configuration props
 * @returns JSX.Element
 */
function ProFormDependency(props: ProFormDependencyProps): JSX.Element;

/**
 * Upload button field
 * @param props - ProFormUploadButton configuration props
 * @returns JSX.Element
 */
function ProFormUploadButton(props: ProFormUploadButtonProps): JSX.Element;

/**
 * Captcha input field
 * @param props - ProFormCaptcha configuration props
 * @returns JSX.Element
 */
function ProFormCaptcha(props: ProFormCaptchaProps): JSX.Element;

interface ProFormListProps extends Omit<ProFormItemProps, 'children'> {
  /** Minimum number of items */
  min?: number;
  /** Maximum number of items */
  max?: number;
  /** Custom action buttons */
  actionRender?: (field: any, action: any) => React.ReactNode[];
  /** List item render function */
  children: (field: any, index: number, action: any) => React.ReactNode;
  /** Copy button text */
  copyIconProps?: ButtonProps;
  /** Delete button text */
  deleteIconProps?: ButtonProps;
}

interface ProFormDependencyProps {
  /** Field names to watch */
  name: NamePath[];
  /** Render function receiving current values */
  children: (values: Record<string, any>, form: FormInstance) => React.ReactNode;
}

Schema and Advanced Components

Schema-driven form generation and advanced field management components.

/**
 * Beta schema-based form with dynamic column configuration
 * @param props - BetaSchemaForm configuration props
 * @returns JSX.Element
 */
function BetaSchemaForm<T = Record<string, any>, ValueType = 'text'>(
  props: BetaSchemaFormProps<T, ValueType>
): JSX.Element;

/**
 * Generic form field component with dynamic valueType support
 * @param props - ProFormField configuration props
 * @returns JSX.Element
 */
function ProFormField<T = any>(props: ProFormFieldProps<T>): JSX.Element;

/**
 * Enhanced form item with data transformation and addon support
 * @param props - ProFormItem configuration props
 * @returns JSX.Element
 */
function ProFormItem(props: ProFormItemProps): JSX.Element;

/**
 * Form field grouping component with shared state management
 * @param props - ProFormFieldSet configuration props
 * @returns JSX.Element
 */
function ProFormFieldSet<T = any>(props: ProFormFieldSetProps<T>): JSX.Element;

/**
 * Visual form field grouping with collapsible functionality
 * @param props - ProFormGroup configuration props
 * @returns JSX.Element
 */
function ProFormGroup(props: ProFormGroupProps): JSX.Element;

interface BetaSchemaFormProps<T = Record<string, any>, ValueType = 'text'> 
  extends Omit<FormProps<T>, 'onFinish'>, ProFormProps {
  /** Form title */
  title?: React.ReactNode;
  /** Form description */
  description?: React.ReactNode;
  /** Column configuration for fields */
  columns: ProFormColumnsType<T, ValueType>[];
  /** Layout type for the form */
  layoutType?: 'Form' | 'DrawerForm' | 'ModalForm' | 'QueryFilter' | 'LightFilter' | 'StepForm';
  /** Action reference for form control */
  action?: React.MutableRefObject<ProCoreActionType | undefined>;
  /** Control when to update form */
  shouldUpdate?: boolean | ((newValues: T, oldValues?: T) => boolean);
  /** Modal/Drawer visibility control */
  open?: boolean;
}

interface ProFormFieldProps<T = any> {
  /** Field value type for rendering */
  valueType?: ProFieldValueType;
  /** Field rendering mode */
  mode?: 'edit' | 'read' | 'update';
  /** Field data index */
  dataIndex?: keyof T;
  /** Field dependencies */
  dependencies?: NamePath[];
  /** Field render function */
  render?: (text: any, record: T) => React.ReactNode;
  /** Form item render function */
  renderFormItem?: (text: any, record: T) => React.ReactNode;
  /** Field properties */
  fieldProps?: any;
  /** Form item properties */
  formItemProps?: FormItemProps;
  /** ProField properties */
  proFieldProps?: any;
}

interface ProFormFieldSetProps<T = any> {
  /** Field set value */
  value?: T[];
  /** Value change handler */
  onChange?: (value: T[]) => void;
  /** Layout type */
  type?: 'space' | 'group';
  /** Space/Group properties */
  space?: SpaceProps;
  /** Value property name */
  valuePropName?: string;
  /** Field properties */
  fieldProps?: any;
  /** Value conversion function */
  convertValue?: (value: any) => any;
  /** Children render function or node */
  children?: ((value: T[], props: ProFormFieldSetProps<T>) => React.ReactNode) | React.ReactNode;
}

interface ProFormGroupProps {
  /** Group title */
  title?: React.ReactNode;
  /** Group label */
  label?: React.ReactNode;
  /** Group tooltip */
  tooltip?: string | React.ReactNode;
  /** Collapsible functionality */
  collapsible?: boolean;
  /** Collapsed state */
  collapsed?: boolean;
  /** Collapse state change handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Default collapsed state */
  defaultCollapsed?: boolean;
  /** Label layout style */
  labelLayout?: 'inline' | 'twoLine';
  /** Extra content */
  extra?: React.ReactNode;
  /** Auto focus first field */
  autoFocus?: boolean;
  /** Field alignment */
  align?: 'start' | 'end' | 'center' | 'baseline';
  /** Layout direction */
  direction?: 'horizontal' | 'vertical';
  /** Group size */
  size?: number | 'small' | 'middle' | 'large';
  /** Title style */
  titleStyle?: React.CSSProperties;
  /** Custom title render */
  titleRender?: (title: React.ReactNode, props: ProFormGroupProps) => React.ReactNode;
  /** Grid layout properties */
  grid?: boolean;
  colProps?: ColProps;
  rowProps?: RowProps;
}

Usage Examples:

import { 
  BetaSchemaForm, 
  ProFormField, 
  ProFormFieldSet, 
  ProFormGroup 
} from "@ant-design/pro-components";

// Schema-driven form
const SchemaFormExample = () => (
  <BetaSchemaForm
    layoutType="Form"
    columns={[
      {
        title: "Name",
        dataIndex: "name",
        valueType: "text",
        formItemProps: {
          rules: [{ required: true }]
        }
      },
      {
        title: "Age", 
        dataIndex: "age",
        valueType: "digit"
      },
      {
        title: "Department",
        dataIndex: "department",
        valueType: "select",
        fieldProps: {
          options: [
            { label: "Engineering", value: "eng" },
            { label: "Sales", value: "sales" }
          ]
        }
      }
    ]}
    onFinish={async (values) => {
      console.log(values);
      return true;
    }}
  />
);

// Dynamic field with ProFormField
const DynamicFieldExample = () => {
  const [fieldType, setFieldType] = useState('text');
  
  return (
    <ProForm>
      <ProFormSelect
        name="fieldType"
        label="Field Type"
        options={[
          { label: "Text", value: "text" },
          { label: "Number", value: "digit" },
          { label: "Date", value: "date" }
        ]}
        onChange={setFieldType}
      />
      
      <ProFormField
        name="dynamicField"
        label="Dynamic Field"
        valueType={fieldType as any}
      />
    </ProForm>
  );
};

// Field grouping with ProFormFieldSet
const FieldSetExample = () => (
  <ProForm>
    <ProFormFieldSet
      name="addresses"
      label="Addresses"
      type="space"
    >
      {(value, props) => (
        <>
          <ProFormText name="street" label="Street" />
          <ProFormText name="city" label="City" />
          <ProFormText name="zipCode" label="Zip Code" />
        </>
      )}
    </ProFormFieldSet>
  </ProForm>
);

// Visual grouping with ProFormGroup
const GroupExample = () => (
  <ProForm>
    <ProFormGroup
      title="Personal Information"
      collapsible
      defaultCollapsed={false}
    >
      <ProFormText name="firstName" label="First Name" />
      <ProFormText name="lastName" label="Last Name" />
      <ProFormDatePicker name="birthDate" label="Birth Date" />
    </ProFormGroup>
    
    <ProFormGroup
      title="Contact Information"
      collapsible
    >
      <ProFormText name="email" label="Email" />
      <ProFormText name="phone" label="Phone" />
    </ProFormGroup>
  </ProForm>
);

Form Contexts and Utilities

Context providers and utility components for form management.

/**
 * Grid layout context for responsive forms
 */
const GridContext: React.Context<{
  grid?: boolean;
  gutter?: number;
  colProps?: ColProps;
}>;

/**
 * Form list context for managing dynamic lists
 */
const FormListContext: React.Context<{
  name?: NamePath;
  listName: NamePath;
}>;

/**
 * Enhanced form instance with Pro-specific methods
 */
interface ProFormInstance extends FormInstance {
  /** Get field values with formatting applied */
  getFieldsFormatValue?: (nameList?: NamePath[]) => any;
  /** Validate and return formatted values */
  validateFieldsReturnFormatValue?: (nameList?: NamePath[]) => Promise<any>;
}

Common Form Types

// Base form item props extended by all form field components
interface ProFormItemProps extends Omit<FormItemProps, 'children'> {
  /** Form field name */
  name?: NamePath;
  /** Field label */
  label?: React.ReactNode;
  /** Validation rules */
  rules?: Rule[];
  /** Initial value */
  initialValue?: any;
  /** Convert value when form submit */
  convertValue?: (value: any, nameList: NamePath) => any;
  /** Field tooltip */
  tooltip?: string | React.ReactNode;
  /** Readonly mode */
  readonly?: boolean;
  /** Field width */
  width?: number | 'sm' | 'md' | 'lg' | 'xl';
  /** Field properties passed to underlying component */
  fieldProps?: any;
  /** Form item properties */
  formItemProps?: FormItemProps;
  /** ProField properties for read mode */
  proFieldProps?: any;
}

// Base props for form components
interface BaseFormProps {
  /** Form submission loading state */
  loading?: boolean;
  /** Form submission handler */
  onFinish?: (values: any) => Promise<boolean | void> | boolean | void;
  /** Form submission failure handler */
  onFinishFailed?: (errorInfo: any) => void;
  /** Form instance */
  form?: FormInstance;
  /** Initial form values */
  initialValues?: Record<string, any>;
  /** Preserve form data when component unmounts */
  preserve?: boolean;
}