ProField

ProField is the foundational component that powers value rendering across all ProComponents. It provides automatic formatting, editing capabilities, and consistent display for 30+ value types.

Features

30+ Value Types: Comprehensive support for common data types
Dual Modes: Read-only display and editable input modes
Automatic Formatting: Smart formatting based on value type
ValueEnum Support: Map values to display text
Request Integration: Async options loading
Extensible: Add custom value types

Basic Usage

import { ProField } from '@ant-design/pro-components';

export default () => {
  return (
    <>
      {/* Read mode (default) */}
      <ProField
        text="Hello World"
        valueType="text"
        mode="read"
      />
      
      {/* Edit mode */}
      <ProField
        text="Hello World"
        valueType="text"
        mode="edit"
        fieldProps={{
          placeholder: '请输入',
        }}
      />
    </>
  );
};

Value Types

Text Types

Text
TextArea
Password

<ProField valueType="text" text="Plain text" />

Basic text display

<ProField
  valueType="textarea"
  text="Multi-line\ntext content"
  mode="edit"
  fieldProps={{ rows: 4 }}
/>

Multi-line text input

<ProField
  valueType="password"
  text="secret123"
  mode="edit"
/>

Password input with visibility toggle

Numeric Types

// Digit - Numeric input
<ProField
  valueType="digit"
  text={12345}
  mode="edit"
  fieldProps={{
    precision: 0,
    min: 0,
    max: 100000,
  }}
/>

// Money - Currency formatting
<ProField
  valueType="money"
  text={12345.67}
  fieldProps={{
    locale: 'zh-CN',
    customSymbol: '¥',
  }}
/>

// Percent - Percentage display
<ProField
  valueType="percent"
  text={75}
  fieldProps={{
    precision: 2,
  }}
/>

// Progress - Progress bar
<ProField
  valueType="progress"
  text={75}
  fieldProps={{
    status: 'active',
  }}
/>

Date & Time Types

// Date picker
<ProField
  valueType="date"
  text={Date.now()}
  mode="edit"
/>

// DateTime picker
<ProField
  valueType="dateTime"
  text={Date.now()}
  mode="edit"
/>

// Time picker
<ProField
  valueType="time"
  text={Date.now()}
  mode="edit"
/>

// Date range picker
<ProField
  valueType="dateRange"
  text={[Date.now(), Date.now() + 86400000]}
  mode="edit"
/>

// DateTime range picker
<ProField
  valueType="dateTimeRange"
  text={[Date.now(), Date.now() + 86400000]}
  mode="edit"
/>

// Relative time display
<ProField
  valueType="fromNow"
  text={Date.now() - 3600000}
/>

Selection Types

// Select dropdown
<ProField
  valueType="select"
  text="option1"
  mode="edit"
  valueEnum={{
    option1: '选项1',
    option2: '选项2',
    option3: '选项3',
  }}
/>

// Radio group
<ProField
  valueType="radio"
  text="A"
  mode="edit"
  valueEnum={{
    A: '选项A',
    B: '选项B',
    C: '选项C',
  }}
/>

// Checkbox group
<ProField
  valueType="checkbox"
  text={['A', 'B']}
  mode="edit"
  valueEnum={{
    A: '选项A',
    B: '选项B',
    C: '选项C',
  }}
/>

// Switch
<ProField
  valueType="switch"
  text={true}
  mode="edit"
/>

// Rate
<ProField
  valueType="rate"
  text={4}
  mode="edit"
  fieldProps={{ count: 5 }}
/>

// Slider
<ProField
  valueType="slider"
  text={50}
  mode="edit"
  fieldProps={{
    min: 0,
    max: 100,
  }}
/>

// Segmented
<ProField
  valueType="segmented"
  text="option1"
  mode="edit"
  valueEnum={{
    option1: '选项1',
    option2: '选项2',
  }}
/>

Cascading Selection

// Cascader
<ProField
  valueType="cascader"
  text={['zhejiang', 'hangzhou']}
  mode="edit"
  fieldProps={{
    options: [
      {
        value: 'zhejiang',
        label: '浙江',
        children: [
          { value: 'hangzhou', label: '杭州' },
        ],
      },
    ],
  }}
/>

// TreeSelect
<ProField
  valueType="treeSelect"
  text="node1"
  mode="edit"
  fieldProps={{
    treeData: [
      {
        value: 'parent',
        title: '父节点',
        children: [
          { value: 'node1', title: '子节点1' },
        ],
      },
    ],
  }}
/>

Display Types

// Avatar
<ProField
  valueType="avatar"
  text="https://example.com/avatar.jpg"
/>

// Image
<ProField
  valueType="image"
  text="https://example.com/image.jpg"
  fieldProps={{ width: 100 }}
/>

// Code
<ProField
  valueType="code"
  text="const a = 1;"
  fieldProps={{ language: 'javascript' }}
/>

// JSON Code
<ProField
  valueType="jsonCode"
  text={JSON.stringify({ key: 'value' }, null, 2)}
/>

// Color picker
<ProField
  valueType="color"
  text="#1890ff"
  mode="edit"
/>

Special Types

// Index - Auto-incrementing index
<ProField valueType="index" text={1} />

// Index with border
<ProField valueType="indexBorder" text={1} />

// Option - Action buttons
<ProField
  valueType="option"
  text=""
  mode="edit"
  render={() => [
    <a key="edit">编辑</a>,
    <a key="delete">删除</a>,
  ]}
/>

ValueEnum

Map values to display text with status badges:

<ProField
  text="open"
  valueType="select"
  valueEnum={{
    all: { text: '全部', status: 'Default' },
    open: {
      text: '未解决',
      status: 'Error',
    },
    closed: {
      text: '已解决',
      status: 'Success',
    },
    processing: {
      text: '处理中',
      status: 'Processing',
    },
  }}
/>

Status Colors

Available status values:

Success - Green
Error - Red
Warning - Orange
Processing - Blue
Default - Gray

Request Integration

Load options asynchronously:

<ProField
  valueType="select"
  text="beijing"
  mode="edit"
  request={async () => {
    const response = await fetch('/api/cities');
    const data = await response.json();
    return data.map(item => ({
      label: item.name,
      value: item.code,
    }));
  }}
  params={{ country: 'CN' }} // Triggers reload when changed
/>

Render Customization

<ProField
  text="custom value"
  valueType="text"
  render={(text, props, dom) => (
    <div style={{ color: 'red' }}>
      {text}
    </div>
  )}
/>

Mode Switching

import { useState } from 'react';

const Demo = () => {
  const [mode, setMode] = useState<'read' | 'edit'>('read');
  const [value, setValue] = useState('Initial value');
  
  return (
    <>
      <Button onClick={() => setMode(mode === 'read' ? 'edit' : 'read')}>
        {mode === 'read' ? '编辑' : '完成'}
      </Button>
      
      <ProField
        text={value}
        valueType="text"
        mode={mode}
        fieldProps={{
          onChange: (e) => setValue(e.target.value),
        }}
      />
    </>
  );
};

Empty Text

<ProField
  text={null}
  valueType="text"
  proFieldProps={{
    emptyText: '-', // Display when value is empty
  }}
/>

Light Mode

Compact inline editing:

<ProField
  text="value"
  valueType="text"
  mode="edit"
  light
  fieldProps={{
    placeholder: '请输入',
  }}
/>

Field Components

Individual field components are also exported:

import {
  FieldText,
  FieldDigit,
  FieldMoney,
  FieldPercent,
  FieldSelect,
  FieldDatePicker,
  FieldTimePicker,
  // ... and more
} from '@ant-design/pro-components';

<FieldMoney
  text={12345.67}
  mode="read"
  locale="zh-CN"
/>

Key Props

Prop	Type	Description
`text`	`any`	Field value
`valueType`	`ProFieldValueType`	Value type
`mode`	`'read' \| 'edit'`	Display mode
`fieldProps`	`any`	Props passed to field component
`valueEnum`	`ValueEnumMap \| ValueEnumObj`	Value enum mapping
`request`	`() => Promise<RequestData>`	Async options loader
`params`	`any`	Request parameters
`render`	`(text, props, dom) => ReactNode`	Custom render function
`light`	`boolean`	Compact light mode
`proFieldProps`	`ProFieldProps`	ProField specific props

Custom Value Types

import { ProProvider } from '@ant-design/pro-components';

const CustomField = ({ text, mode, fieldProps }) => {
  if (mode === 'read') {
    return <span>{text}</span>;
  }
  return <input value={text} {...fieldProps} />;
};

const App = () => (
  <ProProvider
    valueTypeMap={{
      custom: {
        render: (text, props) => <CustomField text={text} {...props} />,
      },
    }}
  >
    <ProField valueType="custom" text="value" />
  </ProProvider>
);

Best Practices

Choose the right value type

Use specific value types instead of generic ones:

Use money instead of digit for currency
Use percent instead of digit for percentages
Use dateTime instead of text for timestamps

Leverage valueEnum for status fields

Use valueEnum with status for automatic badge rendering:

valueEnum={{
  active: { text: 'Active', status: 'Success' },
  inactive: { text: 'Inactive', status: 'Default' },
}}

Use request for dynamic options

Load select/radio options from API using request prop instead of static valueEnum.

Set appropriate empty text

Provide meaningful empty text for better UX:

proFieldProps={{ emptyText: 'N/A' }}

Value Type Reference

All Value Types

text - Plain text
textarea - Multi-line text
password - Password input
digit - Numeric input
digitRange - Numeric range
money - Currency
percent - Percentage
progress - Progress bar
date - Date picker
dateTime - DateTime picker
time - Time picker
dateRange - Date range
dateTimeRange - DateTime range
fromNow - Relative time
select - Select dropdown
radio - Radio group
checkbox - Checkbox group
switch - Toggle switch
rate - Star rating
slider - Slider input
segmented - Segmented control
cascader - Cascading select
treeSelect - Tree select
avatar - Avatar display
image - Image display
code - Code display
jsonCode - JSON viewer
color - Color picker
index - Index number
indexBorder - Bordered index
option - Action buttons

ProForm - Form fields using ProField
ProTable - Table cells using ProField
ProDescriptions - Description items using ProField

Get Started

Core Concepts

Components

Form Components

Table Components

Guides

Features

Basic Usage

Value Types

Text Types

Numeric Types

Date & Time Types

Selection Types

Cascading Selection

Display Types

Special Types

ValueEnum

Status Colors

Request Integration

Render Customization

Mode Switching

Empty Text

Light Mode

Field Components

Key Props

Custom Value Types

Best Practices

Value Type Reference

Build docs developers (and LLMs) love

Get Started

Core Concepts

Components

Form Components

Table Components

Guides

​Features

​Basic Usage

​Value Types

​Text Types

​Numeric Types

​Date & Time Types

​Selection Types

​Cascading Selection

​Display Types

​Special Types

​ValueEnum

​Status Colors

​Request Integration

​Render Customization

​Mode Switching

​Empty Text

​Light Mode

​Field Components

​Key Props

​Custom Value Types

​Best Practices

​Value Type Reference

​Related Components

Build docs developers (and LLMs) love

Features

Basic Usage

Value Types

Text Types

Numeric Types

Date & Time Types

Selection Types

Cascading Selection

Display Types

Special Types

ValueEnum

Status Colors

Request Integration

Render Customization

Mode Switching

Empty Text

Light Mode

Field Components

Key Props

Custom Value Types

Best Practices

Value Type Reference

Related Components