ProFormFields

ProForm comes with a significant number of form items, which are essentially a combination of Form.Item and components. Each form item supports the fieldProps property to support setting the props of the input component. We support pass-through of placeholder, so you can set placeholder directly on the component.

Each form item also supports readonly, which has different read-only styles for different components, making readonly display more friendly compared to disable. The generated dom is also smaller, e.g. ProFormDigit automatically formats decimal digits.

ProFormText is the product of FormItem + Input and can be analogous to the following code.

const ProFormText = (props) => {
return (
<ProForm.Item {. .props}>
<Input placeholder={props.placeholder} {. .props.fieldProps} />
</ProForm.Item
);
};

So the props we set for ProFormText are actually for Form.Item, and the fieldProps are for the included Input, remember.

Demo

Full amount of form field

Query form

Date form

Upload form

Structured data

Read-only for form field

API

ProForm comes with Filed , which basically corresponds to the valueType one by one.

Generic properties

| parameter | description | type | default | | --- | --- | --- | --- | --- | | width | The length of the Field, we summarize the common Field lengths and suitable scenarios, support some enumeration "xs" , "s" , "m" , "l" , "x" | number \| "xs" \| "s" \| "m" \| "l" \| "x" | - | tooltip | | tooltip | will add an icon next to the label to show the configured information when hovered | string \| tooltipProps | - | | secondary | Whether secondary control, only valid for LightFilter | boolean | false | | allowClear | Support for clearing, valid for LightFilter, will also be passed to fieldProps | boolean | true | if actively set. |

Width

In some cases, we need to adapt the input box according to the page display, except that a form area should use the fixed width rule by default.

! width info

  • XS=104px for short numbers, short text or options.
  • S=216px for shorter field entries, such as name, phone, ID, etc.
  • M=328px Standard width, suitable for most field lengths.
  • L=440px Suitable for longer field entries, such as long URLs, tag groups, file paths, etc.
  • XL=552px Suitable for long text entry, such as long links, descriptions, notes, etc., usually used with adaptive multi-line input boxes or fixed height text fields.

ProFormText

Same as Input.

<ProFormText name="text" label="Name" placeholder="Please enter a name" fieldProps={inputProps} />

ProFormCaptcha

ProFormCaptcha is a component developed to support common CAPTCHA functionality in the middle and backend.

<ProFormCaptcha
fieldProps={{
size: 'large',
prefix: <MailTwoTone />,
}}
captchaProps={{
size: 'large',
}}
// The name of the phone number, which is injected by onGetCaptcha
phoneName="phone"
name="captcha"
rules={[
{
required: true,
message: 'Please enter the verification code',
},
]}
placeholder="Please enter a captcha"
// If you need to fail, you can throw an error and onGetCaptcha will stop automatically
// throw new Error("Error getting captcha")
onGetCaptcha={async (phone) => {
await waitTime(1000);
message.success(`phone number ${phone} Verification code sent successfully! `);
}}
/>
parametersdescriptiontypedefault
onGetCaptchaThe event to click to get the captcha, if phoneName is configured it will be injected automatically(phone)=>Promise<any>-
captchaPropsThe props of the Get Captcha button, same as antd's propsButtonProps-
countDownThe number of seconds to count downnumber60
captchaTextRenderRender the text of the timer(timing: boolean, count: number) => React.ReactNode-

ProFormText.Password

Same as Input.Password.

<ProFormText.Password label="InputPassword" name="input-password" />

ProFormDatePicker

Same as DatePicker.

<ProFormDatePicker name="date" label="date" />

ProFormDateTimePicker

Same as DatePicker.

<ProFormDateTimePicker name="datetime" label="datetime" />

ProFormDateRangePicker

Same as DatePicker.RangePicker.

<ProFormDateRangePicker name="dateRange" label="date" />

ProFormDateTimeRangePicker

Same as DatePicker.RangePicker.

<ProFormDateTimeRangePicker name="datetimeRange" label="datetime" />

ProFormTimePicker

Same as DatePicker

<ProFormDateRangePicker name="time" label="time" />

ProFormTextArea

Same as Input.TextArea.

<ProFormTextArea
name="text"
label="name"
placeholder="Please enter a name"
fieldProps={inputTextAreaProps}
/>

ProFormCheckbox

Requesting remote data is more complicated, see [here](/components/field#remote data) for details.

Same as checkbox, but supports options and layout.

| parameters | description | type | default | | --- | --- | --- | --- | options | options | Same as select, generates child nodes based on options, recommended. | string[] | {label:ReactNode,value:string}[] | - | | layout | Configure the look of the checkbox to support vertical vertical and horizontal | horizontal | vertical | - |

<ProFormCheckbox.Group
name="checkbox"
layout="vertical"
label="Industry Distribution"
options={['Agriculture', 'Manufacturing', 'Internet']}
/>

ProFormRadio.Group

Requesting remote data is more complicated, see [here](/components/field#remote data) for details.

Same as radio but with support for options.

| parameters | description | type | default | | --- | --- | --- | --- | options | options | Same as select, generates child nodes based on options, recommended. | string[] | {label:ReactNode,value:string}[] | - | | radioType | Set whether button mode or radio mode | button | radio | radio |

<ProFormRadio.Group
name="radio-group"
label="Radio.Group"
options={[
{
label: 'item 1',
value: 'a',
},
{
label: 'item 2',
value: 'b',
},
{
label: 'item 3',
value: 'c',
},
]}
/>

ProFormSwitch

Same as switch.

<ProFormSwitch name="switch" label="Switch" />

ProFormRate

Same as rate.

<ProFormRate name="rate" label="Rate" />

ProFormSlider

Same as slider.

<ProFormSlider
name="slider"
label="Slider"
marks={{
0: 'A',
20: 'B',
40: 'C',
60: 'D',
80: 'E',
100: 'F',
}}
/>

ProFormUploadDragger

Same as upload. Dragger style is preset, otherwise it is the same as Upload.

| Parameters | Description | Type | Default | | ----------- | ------------------------- | --------------- | -------------------------------- | -------------------------------------------- | | icon | The chart of the Dragger. | ReactNode | InboxOutlined | | title | Title | Dragger's title | ReactNode | 'Click or drag files to this area to upload' | | description | Dragger's description | ReactNode | 'Support single or bulk uploads' |

<ProFormUploadDragger label="Dragger" name="dragger" action="upload.do" />

ProFormUploadButton

Same as upload. The Button style is preset, otherwise it is the same as Upload.

ParametersDescriptionTypeDefault
iconThe chart of Dragger.ReactNodeUploadOutlined
titleDragger's titleReactNodeClick to upload
<ProFormUploadButton label="upload" name="upload" action="upload.do" />

ProFormSelect

Same as select. Both request and valueEnum are supported to generate options.

Requesting remote data is more complicated, see [here](/components/field#remote data) for details.

Why support valueEnum when you have options? valueEnum can be used with tables, descriptions, and has engineering advantages.

parametersdescriptiontypedefault
valueEnumEnumeration of current values valueEnumRecord-
requestEnumerate data from network requests()=>Promise<{[key:string|number]:any}>-
<>
<ProFormSelect
name="select"
label="Select"
valueEnum={{
open: 'Unresolved',
closed: 'Resolved',
}}
placeholder="Please select a country"
rules={[{ required: true, message: 'Please select your country!' }]}
/>
<ProFormSelect
name="select2"
label="Select"
request={async () => [
{ label: 'all', value: 'all' }
{ label: 'Unresolved', value: 'open' }
{ label: 'Resolved', value: 'closed' }
{ label: 'Resolving', value: 'processing' },
]}
placeholder="Please select a country"
rules={[{ required: true, message: 'Please select your country!' }]}
/>
</>

Customize options:

<ProFormSelect
name="select"
label="Select"
options={[
{ label: '全部', value: 'all' },
{ label: '未解决', value: 'open' },
{ label: '已解决', value: 'closed' },
{ label: '解决中', value: 'processing' },
]}
fieldProps={{
optionItemRender(item) {
return item.label + ' - ' + item.value;
},
}}
placeholder="Please select a country"
rules={[{ required: true, message: 'Please select your country!' }]}
/>

ProFormDigit

Same as inputNumber. It comes with a formatting (retains 2 decimal places, minimum value is 0), you can turn it off if needed.

<ProFormDigit label="InputNumber" name="input-number" min={1} max={10} />

If you want to change the number of decimal places.

<ProFormDigit
label="InputNumber"
name="input-number"
min={1}
max={10}
fieldProps={{ precision: 0 }}
/>

ProFormMoney

ProFormMoney's input box for entering amounts supports the display of currency symbols based on global internationalization, negative input, custom currency symbols, and more.

<ProFormMoney
label="The minimum limit is 0"
name="amount1"
locale="en-US"
initialValue={22.22}
min={0}
/>
<ProFormMoney
label="There is no limit to the amount size"
name="amount2"
locale="en-GB"
initialValue={22.22}
/>
<ProFormMoney
label="Currency symbols follow global internationalization"
name="amount3"
initialValue={22.22}
/>
<ProFormMoney
label="Custom currency symbols"
name="amount4"
initialValue={22.22}
customSymbol="💰"
/>
parametersdescriptiontypedefault
localeThe internationalized region values set separately show different currency symbols depending on the region, as detailed in the region directory belowstringzh-Hans-CN
customSymbolCustom amount symbolstring-
numberPopoverRenderCustom Popover's value, false, can close his((props: InputNumberProps, defaultText: string) => React.ReactNode) | booleanfalse
numberFormatOptionsThe configuration of NumberFormat, where the documentation can view the of the mdn)NumberFormatOptions-
minThe minimum value isnumber-
maxThe maximum value isnumber-

Below is a table of regional codes and currency symbols

{
"ar-EG": "$",
"zh-CN": "¥",
"en-US": "$",
"en-GB": "£",
"vi-VN": "₫",
"it-IT": "€",
"ja-JP": "¥",
"es-ES": "€",
"ru-RU": "₽",
"sr-RS": "RSD",
"ms-MY": "RM",
"zh-TW": "$"
"fr-FR": "€",
"pt-BR": "R$",
"ko-KR": "₩",
"id-ID": "RP",
"de-DE": "€",
"fa-IR": "تومان",
"tr-TR": "$",
"pl-PL": "zł",
}