ProField API
ProField is the foundational field component used by ProForm, ProTable, and ProDescriptions to render values based on their type.
ProFieldProps
The value to display or edit.
valueType
ProFieldValueType
default:"text"
Type of the value, determines how it’s rendered.
Text & Input
text - Plain texttextarea - Multi-line textpassword - Password input
Numbers
digit - Number inputdigitRange - Number rangemoney - Money with currencypercent - Percentagesecond - Seconds (formatted as time)
Date & Time
date - Date pickerdateWeek - Week pickerdateMonth - Month pickerdateQuarter - Quarter pickerdateYear - Year pickerdateRange - Date range pickerdateTime - Date time pickerdateTimeRange - Date time range pickertime - Time pickertimeRange - Time range pickerfromNow - Relative time (e.g., “2 hours ago”)
Selection
select - Select dropdowncheckbox - Checkboxradio - Radio buttonsradioButton - Radio button stylerate - Star ratingswitch - Toggle switchslider - Slidersegmented - Segmented control
Tree & Cascade
treeSelect - Tree selectcascader - Cascading select
Display
progress - Progress barimage - Image displayavatar - Avatarcolor - Color pickerindex - Index numberindexBorder - Index with border
Code
code - Code blockjsonCode - JSON code editor
Special mode
'read' | 'edit' | 'update'
default:"read"
Display mode.
read - Display value (readonly)edit - Show input for editingupdate - Same as edit
Force readonly mode regardless of mode prop.
Props passed to the underlying input component.
// For Select
<ProField
valueType="select"
fieldProps={{
mode: 'multiple',
showSearch: true,
}}
/>
// For DatePicker
<ProField
valueType="date"
fieldProps={{
format: 'YYYY-MM-DD',
showTime: true,
}}
/>
Placeholder text for inputs.
Current value (for controlled mode).
Callback when value changes. emptyText
React.ReactNode | false
default:"-"
Text to display when value is empty (only in read mode).Set to false to show nothing.
valueEnum
Record<string, any> | Map<string, any>
Enum mapping for select, radio, checkbox, and other selection components.
<ProField
text="processing"
valueType="select"
valueEnum={{
processing: { text: 'Processing', status: 'Processing' },
success: { text: 'Success', status: 'Success' },
error: { text: 'Error', status: 'Error' },
}}
/>
Load remote data for select/cascader/treeSelect fields.(params?: any) => Promise<{ label: React.ReactNode; value: any; [key: string]: any }[]>
Parameters passed to the request function.
Unique key for the field (used for request caching).
Custom Rendering
Custom render function for read mode.(text: any, props: ProFieldFCRenderProps, dom: React.ReactElement) => React.ReactNode
<ProField
text="[email protected]"
render={(text, props, dom) => (
<a href={`mailto:${text}`}>{dom}</a>
)}
/>
Custom render function for edit mode.(text: any, props: ProFieldFCRenderProps, dom: React.ReactElement) => React.ReactNode
Field-Specific Props
Money Field
Locale for currency formatting.
fieldProps.moneySymbol
boolean | string
default:"¥"
Currency symbol. Set to false to hide.
Percent Field
Number of decimal places.
Whether to show the % symbol.
Progress Field
fieldProps.status
'success' | 'exception' | 'normal' | 'active'
Progress status.
Image Field
Code Field
fieldProps.language
string
default:"javascript"
Code language for syntax highlighting.
Light Mode
Enable light mode (compact display for filters).
Field label (used in light mode).
Available Field Components
ProField exports individual field components that can be used directly:
FieldText - Text display and inputFieldTextArea - Multi-line textFieldPassword - Password inputFieldDigit - Number inputFieldDigitRange - Number rangeFieldMoney - Money with currencyFieldPercent - PercentageFieldProgress - Progress barFieldRate - Star ratingFieldSlider - SliderFieldSwitch - Toggle switchFieldSelect - Select dropdownFieldCheckbox - CheckboxFieldRadio - Radio buttonsFieldSegmented - Segmented controlFieldCascader - Cascading selectFieldTreeSelect - Tree selectFieldDatePicker - Date pickerFieldTimePicker - Time pickerFieldRangePicker - Date range pickerFieldTimeRangePicker - Time range pickerFieldFromNow - Relative timeFieldSecond - Seconds formatterFieldImage - Image displayFieldAvatar - AvatarFieldCode - Code blockFieldColorPicker - Color pickerFieldStatus - Status badgeFieldOptions - Action optionsFieldIndexColumn - Index column
Usage Examples
Basic Display
Edit Mode
With Request
Custom Render
Value Types
import { ProField } from '@ant-design/pro-components';
// Text
<ProField text="Hello World" valueType="text" mode="read" />
// Money
<ProField
text={1000}
valueType="money"
mode="read"
fieldProps={{ locale: 'en-US' }}
/>
// Date
<ProField
text="2024-03-01"
valueType="date"
mode="read"
/>
// Progress
<ProField
text={75}
valueType="progress"
mode="read"
/>
import { ProField } from '@ant-design/pro-components';
import { useState } from 'react';
const [value, setValue] = useState('');
// Text input
<ProField
text={value}
valueType="text"
mode="edit"
fieldProps={{
onChange: (e) => setValue(e.target.value),
}}
/>
// Select
<ProField
text={value}
valueType="select"
mode="edit"
valueEnum={{
a: 'Option A',
b: 'Option B',
c: 'Option C',
}}
fieldProps={{
onChange: setValue,
}}
/>
// Date Picker
<ProField
text={value}
valueType="date"
mode="edit"
fieldProps={{
onChange: setValue,
}}
/>
<ProField
valueType="select"
mode="edit"
request={async () => {
const response = await fetch('/api/options');
const data = await response.json();
return data.map(item => ({
label: item.name,
value: item.id,
}));
}}
fieldProps={{
showSearch: true,
}}
/>
// Custom read mode
<ProField
text="[email protected]"
mode="read"
render={(text) => (
<a href={`mailto:${text}`}>
<MailOutlined /> {text}
</a>
)}
/>
// Custom edit mode
<ProField
text={value}
mode="edit"
formItemRender={(text, props, dom) => (
<div>
<div>Custom Label</div>
{dom}
</div>
)}
/>
// Money
<ProField
text={1000}
valueType="money"
fieldProps={{
locale: 'en-US',
moneySymbol: '$',
}}
/>
// Percent
<ProField
text={0.75}
valueType="percent"
fieldProps={{ precision: 2 }}
/>
// From Now
<ProField
text="2024-03-01 10:00:00"
valueType="fromNow"
/>
// Avatar
<ProField
text="https://example.com/avatar.jpg"
valueType="avatar"
/>
// Code
<ProField
text={`function hello() { return 'world'; }`}
valueType="code"
fieldProps={{ language: 'javascript' }}
/>
ProFieldEmptyText
Type for the empty text configuration:
type ProFieldEmptyText = string | false;
false to show nothing when the value is empty.