Field Component Reference

Complete reference for all form field components with their props, usage patterns, and source code locations.

Text Input Components

ProFormText

Location: src/form/components/Text/index.tsx Basic text input with password variant support.

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

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

Props

Prop	Type	Default	Description
`fieldProps`	`InputProps`	-	Ant Design Input props
`proFieldProps`	`ProFieldProps`	-	ProField configuration

All common field props are supported.

ProFormText.Password

Password input with optional strength indicator.

<ProFormText.Password
  name="password"
  label="Password"
  placeholder="Enter password"
/>

Password-Specific Props

Prop	Type	Description
`statusRender`	`(value?: string) => React.ReactNode`	Custom strength indicator renderer
`strengthText`	`React.ReactNode`	Help text shown in popover
`popoverProps`	`PopoverProps`	Popover configuration

ProFormTextArea

Location: src/form/components/TextArea/index.tsx Multi-line text input.

<ProFormTextArea
  name="description"
  label="Description"
  placeholder="Enter detailed description"
  fieldProps={{
    rows: 4,
    maxLength: 500,
    showCount: true,
    autoSize: { minRows: 3, maxRows: 6 },
  }}
/>

Numeric Input Components

ProFormDigit

Location: src/form/components/Digit/index.tsx Numeric input with formatting.

<ProFormDigit
  name="quantity"
  label="Quantity"
  min={0}
  max={999}
  fieldProps={{
    precision: 0,
    step: 1,
    controls: true,
  }}
/>

Props

Prop	Type	Default	Description
`min`	`number`	-	Minimum value
`max`	`number`	-	Maximum value
`precision`	`number`	0	Decimal places
`step`	`number`	1	Increment step

ProFormDigitRange

Location: src/form/components/Digit/DigitRange.tsx Range input for two numeric values.

<ProFormDigitRange
  name="ageRange"
  label="Age Range"
  separatorText="to"
  fieldProps={{
    precision: 0,
  }}
/>

ProFormMoney

Location: src/form/components/Money/index.tsx Currency input with automatic formatting.

<ProFormMoney
  name="price"
  label="Price"
  locale="en-US"
  customSymbol="$"
  fieldProps={{
    precision: 2,
    min: 0,
  }}
/>

Selection Components

ProFormSelect

Location: src/form/components/Select/index.tsx Dropdown selection with search and remote data support.

Static Options
Remote Data
Multiple Select

<ProFormSelect
  name="category"
  label="Category"
  options={[
    { label: 'Electronics', value: 'electronics' },
    { label: 'Books', value: 'books' },
    { label: 'Clothing', value: 'clothing' },
  ]}
  showSearch
  allowClear
/>

<ProFormSelect
  name="user"
  label="User"
  request={async ({ keyWords }) => {
    const response = await fetch(
      `/api/users?search=${keyWords}`
    );
    const users = await response.json();
    return users.map(u => ({
      label: u.name,
      value: u.id,
    }));
  }}
  debounceTime={300}
  showSearch
  fieldProps={{
    searchOnFocus: true,
    fetchDataOnSearch: true,
  }}
/>

<ProFormSelect
  name="tags"
  label="Tags"
  mode="multiple"
  options={tags}
  fieldProps={{
    maxTagCount: 3,
    maxTagPlaceholder: (omitted) => `+${omitted.length} more`,
  }}
/>

Props

Prop	Type	Description
`options`	`Array<{label, value}> \| string[]`	Static options
`request`	`(params) => Promise<options>`	Async data loader
`params`	`object`	Parameters for request
`debounceTime`	`number`	Search debounce (ms)
`mode`	`'multiple' \| 'tags' \| 'single'`	Selection mode
`showSearch`	`boolean`	Enable search
`searchOnFocus`	`boolean`	Trigger search on focus
`resetAfterSelect`	`boolean`	Clear search after selection
`fetchDataOnSearch`	`boolean`	Request data on search

ProFormSelect.SearchSelect

Enhanced select optimized for searching.

<ProFormSelect.SearchSelect
  name="assignee"
  label="Assignee"
  mode="multiple"
  request={async ({ keyWords }) => {
    return await searchUsers(keyWords);
  }}
  fieldProps={{
    searchOnFocus: true,
    resetAfterSelect: true,
  }}
/>

ProFormCheckbox

Location: src/form/components/Checkbox/index.tsx

<ProFormCheckbox
  name="agreed"
  label="I agree to the terms and conditions"
  valuePropName="checked"
/>

ProFormRadio

Location: src/form/components/Radio/index.tsx

<ProFormRadio.Group
  name="status"
  label="Status"
  options={[
    { label: 'Draft', value: 'draft' },
    { label: 'Published', value: 'published' },
    { label: 'Archived', value: 'archived' },
  ]}
  radioType="button"
  fieldProps={{
    buttonStyle: 'solid',
  }}
/>

ProFormSwitch

Location: src/form/components/Switch/index.tsx Toggle switch for boolean values.

<ProFormSwitch
  name="enabled"
  label="Status"
  checkedChildren="Active"
  unCheckedChildren="Inactive"
  fieldProps={{
    size: 'default',
  }}
/>

ProFormSwitch uses valuePropName="checked" by default. The value is a boolean.

ProFormTreeSelect

Location: src/form/components/TreeSelect/index.tsx Tree-structured selection for hierarchical data.

<ProFormTreeSelect
  name="department"
  label="Department"
  fieldProps={{
    treeData: [
      {
        title: 'Company',
        value: 'company',
        children: [
          {
            title: 'Engineering',
            value: 'eng',
            children: [
              { title: 'Frontend', value: 'fe' },
              { title: 'Backend', value: 'be' },
            ],
          },
          {
            title: 'Sales',
            value: 'sales',
          },
        ],
      },
    ],
    showSearch: true,
    treeDefaultExpandAll: true,
    treeCheckable: false,
    placeholder: 'Select department',
  }}
/>

ProFormCascader

Location: src/form/components/Cascader/index.tsx Cascading dropdown for hierarchical selection.

<ProFormCascader
  name="location"
  label="Location"
  fieldProps={{
    options: [
      {
        value: 'us',
        label: 'United States',
        children: [
          {
            value: 'ny',
            label: 'New York',
            children: [
              { value: 'nyc', label: 'New York City' },
              { value: 'buffalo', label: 'Buffalo' },
            ],
          },
        ],
      },
    ],
    changeOnSelect: true,
    showSearch: true,
  }}
/>

ProFormSegmented

Location: src/form/components/Segmented/index.tsx Segmented control for mutually exclusive options.

<ProFormSegmented
  name="viewMode"
  label="View Mode"
  fieldProps={{
    options: [
      { label: 'List', value: 'list', icon: <UnorderedListOutlined /> },
      { label: 'Grid', value: 'grid', icon: <AppstoreOutlined /> },
    ],
    block: true,
  }}
/>

Date & Time Components

ProFormDatePicker

Location: src/form/components/DatePicker/index.tsx Date selection with various granularities.

Date
Week
Month
Quarter
Year

<ProFormDatePicker
  name="date"
  label="Date"
  fieldProps={{
    format: 'YYYY-MM-DD',
    disabledDate: (current) => {
      return current && current < dayjs().startOf('day');
    },
  }}
/>

<ProFormDatePicker.Week
  name="week"
  label="Week"
  fieldProps={{
    format: 'YYYY-wo',
  }}
/>

<ProFormDatePicker.Month
  name="month"
  label="Month"
  fieldProps={{
    format: 'YYYY-MM',
  }}
/>

<ProFormDatePicker.Quarter
  name="quarter"
  label="Quarter"
  fieldProps={{
    format: 'YYYY-[Q]Q',
  }}
/>

<ProFormDatePicker.Year
  name="year"
  label="Year"
  fieldProps={{
    format: 'YYYY',
  }}
/>

ProFormDateTimePicker

Location: src/form/components/DatePicker/DateTimePicker.tsx

<ProFormDateTimePicker
  name="schedule"
  label="Schedule Time"
  fieldProps={{
    format: 'YYYY-MM-DD HH:mm:ss',
    showTime: {
      format: 'HH:mm:ss',
      defaultValue: dayjs('00:00:00', 'HH:mm:ss'),
    },
  }}
/>

ProFormTimePicker

Location: src/form/components/DatePicker/TimePicker.tsx

<ProFormTimePicker
  name="time"
  label="Time"
  fieldProps={{
    format: 'HH:mm',
    minuteStep: 15,
  }}
/>

ProFormDateRangePicker

Location: src/form/components/DateRangePicker/index.tsx Date range selection.

<ProFormDateRangePicker
  name="dateRange"
  label="Date Range"
  fieldProps={{
    format: 'YYYY-MM-DD',
    presets: [
      { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
      { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
    ],
  }}
/>

Range Picker Variants

All located in src/form/components/DateRangePicker/:

ProFormDateTimeRangePicker - DateTime ranges
ProFormTimeRangePicker - Time ranges
ProFormDateMonthRangePicker - Month ranges
ProFormDateWeekRangePicker - Week ranges
ProFormDateQuarterRangePicker - Quarter ranges
ProFormDateYearRangePicker - Year ranges

Advanced Components

ProFormSlider

Location: src/form/components/Slider/index.tsx

<ProFormSlider
  name="priority"
  label="Priority"
  min={0}
  max={10}
  fieldProps={{
    marks: {
      0: 'Low',
      5: 'Medium',
      10: 'High',
    },
    step: 1,
    tooltip: {
      formatter: (value) => `${value}/10`,
    },
  }}
/>

ProFormRate

Location: src/form/components/Rate/index.tsx

<ProFormRate
  name="rating"
  label="Rating"
  fieldProps={{
    count: 5,
    allowHalf: true,
    character: <StarFilled />,
    tooltips: ['Terrible', 'Bad', 'OK', 'Good', 'Excellent'],
  }}
/>

ProFormColorPicker

Location: src/form/components/ColorPicker/index.tsx

<ProFormColorPicker
  name="themeColor"
  label="Theme Color"
  fieldProps={{
    showText: true,
    presets: [
      {
        label: 'Primary Colors',
        colors: ['#1890ff', '#52c41a', '#faad14', '#f5222d'],
      },
    ],
  }}
/>

ProFormUploadButton

Location: src/form/components/UploadButton/index.tsx

<ProFormUploadButton
  name="documents"
  label="Documents"
  max={5}
  title="Upload"
  icon={<UploadOutlined />}
  fieldProps={{
    name: 'file',
    action: '/api/upload',
    listType: 'text',
    accept: '.pdf,.doc,.docx',
    beforeUpload: (file) => {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        message.error('File must be smaller than 10MB');
      }
      return isLt10M;
    },
  }}
  extra="Support: PDF, DOC, DOCX (max 10MB each)"
/>

ProFormUploadDragger

Location: src/form/components/UploadDragger/index.tsx

<ProFormUploadDragger
  name="images"
  label="Product Images"
  max={3}
  title="Drag files here"
  description="or click to upload"
  icon={<InboxOutlined />}
  fieldProps={{
    name: 'file',
    action: '/api/upload',
    listType: 'picture-card',
    accept: 'image/*',
    multiple: true,
  }}
/>

ProFormCaptcha

Location: src/form/components/Captcha/index.tsx Captcha input with countdown timer.

import { message } from 'antd';

<ProFormText name="phone" label="Phone Number" required />
<ProFormCaptcha
  name="captcha"
  label="Verification Code"
  phoneName="phone"
  fieldProps={{
    maxLength: 6,
    placeholder: 'Enter code',
  }}
  captchaProps={{
    type: 'primary',
    getText: (timing) => (timing ? `${timing}s` : 'Get Code'),
  }}
  captchaTextRender={(timing, count) => {
    return timing ? `${count}s` : 'Get Code';
  }}
  onGetCaptcha={async (phone) => {
    await sendVerificationCode(phone);
    message.success(`Code sent to ${phone}`);
  }}
/>

Container Components

ProForm.Group

Location: src/form/components/FormItem/Group/index.tsx Group related fields visually.

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

<ProForm.Group
  title="Contact Information"
  tooltip="Primary contact details"
  collapsible
  defaultCollapsed={false}
>
  <ProFormText name="email" label="Email" />
  <ProFormText name="phone" label="Phone" />
</ProForm.Group>

ProFormList

Location: src/form/components/List/index.tsx Dynamic list of repeating form items.

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

<ProFormList
  name="contacts"
  label="Contacts"
  initialValue={[{ name: '', email: '' }]}
  min={1}
  max={5}
  copyIconProps={{ tooltipText: 'Copy' }}
  deleteIconProps={{ tooltipText: 'Delete' }}
  creatorButtonProps={{
    position: 'bottom',
    creatorButtonText: 'Add Contact',
  }}
  itemRender={({ listDom, action }, { index }) => (
    <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
      <span style={{ width: 30 }}>#{index + 1}</span>
      {listDom}
      {action}
    </div>
  )}
>
  <ProFormText name="name" label="Name" required />
  <ProFormText name="email" label="Email" required />
</ProFormList>

ProFormList API

Prop	Type	Description
`actionRef`	`React.Ref<FormListActionType>`	List actions ref
`min`	`number`	Minimum items
`max`	`number`	Maximum items
`creatorButtonProps`	`ButtonProps`	Add button config
`itemRender`	`(data, meta) => React.ReactNode`	Custom item renderer
`copyIconProps`	`IconProps`	Copy icon config
`deleteIconProps`	`IconProps`	Delete icon config

Action Methods

const actionRef = useRef<FormListActionType>();

// Available actions:
actionRef.current?.add(defaultValue, insertIndex);
actionRef.current?.remove(index);
actionRef.current?.move(from, to);
actionRef.current?.get(index);
actionRef.current?.getList();

ProFormFieldSet

Location: src/form/components/FieldSet/index.tsx Group fields under a single name path.

<ProFormFieldSet
  name="location"
  label="Location"
  type="group"
  transform={(value) => ({
    location: value.join(','),
  })}
  convertValue={(value) => value?.split(',')}
>
  <ProFormText placeholder="Latitude" />
  <ProFormText placeholder="Longitude" />
</ProFormFieldSet>

ProFormDependency

Location: src/form/components/Dependency/index.tsx Render fields conditionally based on other fields.

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

<ProFormSelect
  name="paymentMethod"
  label="Payment Method"
  options={[
    { label: 'Credit Card', value: 'card' },
    { label: 'Bank Transfer', value: 'bank' },
  ]}
/>

<ProFormDependency name={['paymentMethod']}>
  {({ paymentMethod }) => {
    if (paymentMethod === 'card') {
      return (
        <>
          <ProFormText name="cardNumber" label="Card Number" />
          <ProFormText name="cvv" label="CVV" />
        </>
      );
    }
    if (paymentMethod === 'bank') {
      return (
        <ProFormText name="accountNumber" label="Account Number" />
      );
    }
    return null;
  }}
</ProFormDependency>

Common Props

All field components inherit these props:

Basic Props

Prop	Type	Description
`name`	`string \| string[]`	Field name (supports nested: `['user', 'name']`)
`label`	`React.ReactNode`	Field label
`placeholder`	`string`	Placeholder text
`tooltip`	`string \| { title, icon }`	Help tooltip
`disabled`	`boolean`	Disable the field
`readonly`	`boolean`	Read-only mode
`hidden`	`boolean`	Hide the field

Validation Props

Prop	Type	Description
`required`	`boolean`	Mark as required
`rules`	`Rule[]`	Validation rules
`validateTrigger`	`string \| string[]`	When to validate
`validateFirst`	`boolean`	Stop on first error

Style & Layout Props

Prop	Type	Description
`width`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'\|number`	Field width
`colProps`	`ColProps`	Grid column props
`colSize`	`number`	Column size (1-3)
`formItemProps`	`FormItemProps`	Form.Item wrapper props

Advanced Props

Prop	Type	Description
`fieldProps`	`object`	Props for underlying input
`proFieldProps`	`ProFieldProps`	ProField configuration
`transform`	`(value) => any`	Transform before submit
`convertValue`	`(value) => any`	Convert to field value
`dependencies`	`NamePath[]`	Fields to watch

Field Widths

ProComponents defines standard field widths:

// Predefined sizes
<ProFormText width="xs" /> // 104px - short numbers/codes
<ProFormText width="sm" /> // 216px - names, phones
<ProFormText width="md" /> // 328px - default, most fields
<ProFormText width="lg" /> // 440px - long fields
<ProFormText width="xl" /> // 552px - very long text

// Custom width
<ProFormText width={400} />

Defined in: src/form/BaseForm/BaseForm.tsx:723-762

Value Types

ProForm automatically handles value conversion based on valueType:

text: String values
digit: Numeric values
money: Currency formatting
date: Date objects
dateTime: DateTime objects
time: Time objects
select: Selection values
checkbox: Boolean or array
radio: Single selection
switch: Boolean

Best Practices

Use Appropriate Components

// Good: Use ProFormDigit for numbers
<ProFormDigit name="quantity" min={0} />

// Bad: Using text input for numbers
<ProFormText name="quantity" />

Leverage Remote Data

// Good: Load options asynchronously
<ProFormSelect
  request={async () => await fetchOptions()}
  debounceTime={300}
/>

// Less optimal: Loading all data upfront
const [options, setOptions] = useState([]);
useEffect(() => {
  fetchAllOptions().then(setOptions);
}, []);

<ProForm.Group title="Address">
  <ProFormText name="street" />
  <ProFormText name="city" />
  <ProFormText name="zip" />
</ProForm.Group>

Use Dependencies Wisely

// Good: Only depend on necessary fields
<ProFormDependency name={['type']}>
  {({ type }) => type === 'custom' && <CustomFields />}
</ProFormDependency>

// Bad: Depending on entire form
<ProFormDependency name={[]}>
  {(values) => /* re-renders on any change */}
</ProFormDependency>

Get Started

Core Concepts

Components

Form Components

Table Components

Guides

​Text Input Components

​ProFormText

​Props

​ProFormText.Password

​Password-Specific Props

​ProFormTextArea

​Numeric Input Components

​ProFormDigit

​Props

​ProFormDigitRange

​ProFormMoney

​Selection Components

​ProFormSelect

​Props

​ProFormSelect.SearchSelect

​ProFormCheckbox

​ProFormRadio

​ProFormSwitch

​ProFormTreeSelect

​ProFormCascader

​ProFormSegmented

​Date & Time Components

​ProFormDatePicker

​ProFormDateTimePicker

​ProFormTimePicker

​ProFormDateRangePicker

​Range Picker Variants

​Advanced Components

​ProFormSlider

​ProFormRate

​ProFormColorPicker

​ProFormUploadButton

​ProFormUploadDragger

​ProFormCaptcha

​Container Components

​ProForm.Group

​ProFormList

​ProFormList API

​Action Methods

​ProFormFieldSet

​ProFormDependency

​Common Props

​Basic Props

​Validation Props

​Style & Layout Props

​Advanced Props

​Field Widths

​Value Types

​Best Practices

​Use Appropriate Components

​Leverage Remote Data

​Group Related Fields

​Use Dependencies Wisely

Build docs developers (and LLMs) love

Text Input Components

ProFormText

Props

ProFormText.Password

Password-Specific Props

ProFormTextArea

Numeric Input Components

ProFormDigit

Props

ProFormDigitRange

ProFormMoney

Selection Components

ProFormSelect

Props

ProFormSelect.SearchSelect

ProFormCheckbox

ProFormRadio

ProFormSwitch

ProFormTreeSelect

ProFormCascader

ProFormSegmented

Date & Time Components

ProFormDatePicker

ProFormDateTimePicker

ProFormTimePicker

ProFormDateRangePicker

Range Picker Variants

Advanced Components

ProFormSlider

ProFormRate

ProFormColorPicker

ProFormUploadButton

ProFormUploadDragger

ProFormCaptcha

Container Components

ProForm.Group

ProFormList

ProFormList API

Action Methods

ProFormFieldSet

ProFormDependency

Common Props

Basic Props

Validation Props

Style & Layout Props

Advanced Props

Field Widths

Value Types

Best Practices

Use Appropriate Components

Leverage Remote Data

Group Related Fields

Use Dependencies Wisely