ProForm API

ProForm extends Ant Design’s Form with enhanced field components and layouts optimized for CRUD operations.

ProFormProps

Extends all Ant Design Form properties with additional enhancements.

onFinish

function

Callback when form is submitted successfully.

(values: T) => Promise<boolean | void>

Return true to keep the loading state and prevent form reset. Return false or void to auto-reset.

onFinishFailed

function

Callback when form submission fails validation.

(errorInfo: { values: T; errorFields: any[]; outOfDate: boolean }) => void

submitter

SubmitterProps | false

Configuration for submit/reset buttons. Set to false to hide.

Show SubmitterProps

onSubmit?: () => void - Submit callback
onReset?: () => void - Reset callback
searchConfig?: { resetText?: string; submitText?: string } - Button text
submitButtonProps?: ButtonProps - Submit button props
resetButtonProps?: ButtonProps - Reset button props
render?: function - Custom render for buttons

dateFormatter

string | false | function

default:"string"

Format dates before submission.

"string" - Format as YYYY-MM-DD
"number" - Format as timestamp
false - No formatting
function - Custom formatter

grid

boolean

default:"false"

Enable grid layout for form items.

colProps

ColProps

Column props for grid layout (only when grid is enabled).

Show Example

<ProForm
  grid
  colProps={{ span: 12 }}
>
  {/* Form items will take 50% width */}
</ProForm>

rowProps

RowProps

Row props for grid layout (only when grid is enabled).

request

function

Load initial form values from remote.

(params?: any) => Promise<T>

params

any

Parameters for the request. Changes trigger reload.

isKeyPressSubmit

boolean

default:"true"

Enable form submission on Enter key press.

boolean

Loading state for the form.

autoFocusFirstInput

boolean

default:"true"

Auto focus the first input field.

syncToUrl

boolean | function

default:"false"

Sync form values to URL query parameters.

syncToInitialValues

boolean

default:"true"

Sync initial values when they change.

omitNil

boolean

default:"true"

Omit null and undefined values from submission.

ProFormFieldItemProps

Common props for all ProForm field components.

name

NamePath

required

Field name for form value binding.

type NamePath = string | number | (string | number)[]

label

React.ReactNode

Field label.

Tooltip for the field label.

type LabelTooltipType = {
  icon?: React.ReactNode;
  tooltip?: string | React.ReactNode;
}

placeholder

string | string[]

Placeholder text for the input.

width

number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

default:"md"

Field width.

xs = 104px
sm = 216px
md = 328px
lg = 440px
xl = 552px

fieldProps

Props passed directly to the underlying input component.

formItemProps

FormItemProps

Props for the Form.Item wrapper.

rules

Rule[]

Validation rules (same as Ant Design Form.Item rules).

required

boolean

default:"false"

Whether the field is required.

disabled

boolean

default:"false"

Disable the field.

readonly

boolean

default:"false"

Render field in readonly mode.

hidden

boolean

default:"false"

Hide the field.

colProps

ColProps

Column props for this specific field (when grid layout is enabled).

secondary

boolean

default:"false"

Secondary field (only for LightFilter).

allowClear

boolean

default:"true"

Show clear button.

bordered

boolean

default:"true"

Show border for the input.

colSize

number

default:"1"

Number of columns the field occupies.

params

any

Parameters for remote data request (for Select, Cascader, etc.).

request

function

Load remote data for Select/Cascader/TreeSelect fields.

(params?: any) => Promise<{ label: React.ReactNode; value: any }[]>

valueEnum

Record<string, any>

Value enum for Select/Radio/Checkbox fields.

debounceTime

number

default:"0"

Debounce time for request in milliseconds.

ignoreFormItem

boolean

default:"false"

Don’t wrap field in Form.Item (advanced usage).

convertValue

function

Convert value when getting from form.

(value: any, namePath: NamePath) => any

transform

function

Transform value before form submission.

(value: any, namePath: NamePath, allValues: any) => any

ProFormGroup

Group multiple form fields together.

title

React.ReactNode

Group title.

children

React.ReactNode

Form fields in the group.

size

number

default:"64"

Space between fields.

labelLayout

'horizontal' | 'vertical'

Label layout for fields in the group.

collapsible

boolean

default:"false"

Whether the group is collapsible.

collapsed

boolean

Controlled collapsed state.

defaultCollapsed

boolean

default:"false"

Default collapsed state.

extra

React.ReactNode

Extra content in the group header.

grid

boolean

Enable grid layout (inherits from ProForm if not set).

colProps

ColProps

Column props for grid layout.

rowProps

RowProps

Row props for grid layout.

Field Components

ProFormText

Text input field.

<ProFormText
  name="username"
  label="Username"
  placeholder="Please enter username"
  rules={[{ required: true }]}
/>

ProFormTextArea

Textarea input field.

fieldProps.rows

number

default:"3"

Number of rows.

fieldProps.maxLength

number

Maximum length.

fieldProps.showCount

boolean

default:"false"

Show character count.

ProFormDigit

Numeric input field.

fieldProps.min

number

Minimum value.

fieldProps.max

number

Maximum value.

fieldProps.precision

number

Number of decimal places.

ProFormSelect

Select dropdown field.

options

{ label: React.ReactNode; value: any }[]

Static options.

request

function

Load options from remote.

valueEnum

Record<string, any>

Value enum for options.

fieldProps.mode

'multiple' | 'tags'

Selection mode.

fieldProps.showSearch

boolean

default:"false"

Enable search.

ProFormDatePicker

Date picker field.

fieldProps.format

string

default:"YYYY-MM-DD"

Date format.

fieldProps.showTime

boolean | object

Show time selection.

ProFormDateRangePicker

Date range picker field.

fieldProps.format

string

default:"YYYY-MM-DD"

Date format.

ProFormCheckbox

Checkbox field.

options

{ label: React.ReactNode; value: any }[]

Checkbox options (for checkbox group).

ProFormRadio

Radio field.

options

{ label: React.ReactNode; value: any }[]

Radio options.

radioType

'button' | 'default'

default:"default"

Radio style.

ProFormSwitch

Switch field.

fieldProps.checkedChildren

React.ReactNode

Content when checked.

fieldProps.unCheckedChildren

React.ReactNode

Content when unchecked.

ProFormRate

Rate field.

fieldProps.count

number

default:"5"

Number of stars.

fieldProps.allowHalf

boolean

default:"false"

Allow half stars.

ProFormSlider

Slider field.

fieldProps.min

number

default:"0"

Minimum value.

fieldProps.max

number

default:"100"

Maximum value.

fieldProps.step

number

default:"1"

Step value.

fieldProps.marks

object

Tick marks.

ProFormCascader

Cascader field.

options

CascaderOption[]

Cascader options.

request

function

Load options from remote.

ProFormTreeSelect

Tree select field.

fieldProps.treeData

TreeNode[]

Tree data.

request

function

Load tree data from remote.

ProFormUploadButton / ProFormUploadDragger

File upload fields.

fieldProps.action

string

Upload URL.

fieldProps.listType

'text' | 'picture' | 'picture-card'

default:"text"

File list display type.

fieldProps.maxCount

number

Maximum number of files.

Form Layouts

ModalForm

Form in a modal dialog.

trigger

React.ReactElement

Element to trigger modal open.

Ant Design Modal props.

title

React.ReactNode

Modal title.

width

number | string

default:"800px"

Modal width.

onVisibleChange

function

Callback when modal visibility changes.

(visible: boolean) => void

DrawerForm

Form in a drawer.

trigger

React.ReactElement

Element to trigger drawer open.

drawerProps

DrawerProps

Ant Design Drawer props.

width

number | string

default:"800px"

Drawer width.

QueryFilter

Compact query form layout.

collapsed

boolean

Controlled collapsed state.

defaultCollapsed

boolean

default:"true"

Default collapsed state.

onCollapse

function

Callback when collapse state changes.

split

boolean

default:"false"

Show divider between sections.

LightFilter

Inline lightweight filter form.

placement

'top' | 'bottom'

default:"bottom"

Dropdown placement.

footerRender

function | false

Custom render for dropdown footer.

Usage Examples

Basic Form
Grid Layout
Modal Form

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

export default () => (
  <ProForm
    onFinish={async (values) => {
      console.log(values);
      return true;
    }}
  >
    <ProFormText
      name="name"
      label="Name"
      rules={[{ required: true }]}
    />
    <ProFormText
      name="email"
      label="Email"
      rules={[{ required: true, type: 'email' }]}
    />
  </ProForm>
);

<ProForm
  grid
  colProps={{ span: 12 }}
  rowProps={{ gutter: 16 }}
>
  <ProFormText name="firstName" label="First Name" />
  <ProFormText name="lastName" label="Last Name" />
  <ProFormText
    name="address"
    label="Address"
    colProps={{ span: 24 }}
  />
</ProForm>

import { ModalForm, ProFormText } from '@ant-design/pro-components';

export default () => (
  <ModalForm
    title="New User"
    trigger={<Button type="primary">Create</Button>}
    onFinish={async (values) => {
      await createUser(values);
      return true;
    }}
  >
    <ProFormText name="name" label="Name" />
  </ModalForm>
);

Components API

Form Fields API

Utilities

ProForm

ProForm API

ProFormProps

ProFormFieldItemProps

ProFormGroup

Field Components

ProFormText

ProFormTextArea

ProFormDigit

ProFormSelect

ProFormDatePicker

ProFormDateRangePicker

ProFormCheckbox

ProFormRadio

ProFormSwitch

ProFormRate

ProFormSlider

ProFormCascader

ProFormTreeSelect

ProFormUploadButton / ProFormUploadDragger

Form Layouts

ModalForm

DrawerForm

QueryFilter

LightFilter

Usage Examples

Build docs developers (and LLMs) love

Components API

Form Fields API

Utilities

​ProForm API

​ProFormProps

​ProFormFieldItemProps

​ProFormGroup

​Field Components

​ProFormText

​ProFormTextArea

​ProFormDigit

​ProFormSelect

​ProFormDatePicker

​ProFormDateRangePicker

​ProFormCheckbox

​ProFormRadio

​ProFormSwitch

​ProFormRate

​ProFormSlider

​ProFormCascader

​ProFormTreeSelect

​ProFormUploadButton / ProFormUploadDragger

​Form Layouts

​ModalForm

​DrawerForm

​QueryFilter

​LightFilter

​Usage Examples

Build docs developers (and LLMs) love

ProForm API

ProFormProps

ProFormFieldItemProps

ProFormGroup

Field Components

ProFormText

ProFormTextArea

ProFormDigit

ProFormSelect

ProFormDatePicker

ProFormDateRangePicker

ProFormCheckbox

ProFormRadio

ProFormSwitch

ProFormRate

ProFormSlider

ProFormCascader

ProFormTreeSelect

ProFormUploadButton / ProFormUploadDragger

Form Layouts

ModalForm

DrawerForm

QueryFilter

LightFilter

Usage Examples