Text Fields

Text field components provide various input types for text, numbers, and password fields.

ProFormText

Basic text input field component.

Import

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

Usage

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

Props

Extends all Ant Design Input props.

name

string | string[]

Field name for form submission and data binding.

label

ReactNode

Label text displayed above the input field.

placeholder

string | string[]

Placeholder text shown when the input is empty.

fieldProps

InputProps

Props passed directly to the underlying Ant Design Input component. Supports all Input props including:

maxLength: Maximum character length
prefix: Prefix icon or element
suffix: Suffix icon or element
addonBefore: Element before input
addonAfter: Element after input
disabled: Whether the input is disabled
readOnly: Whether the input is read-only

width

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

Width of the input field:

xs: 104px - Short numbers, short text
sm: 216px - Names, phone, ID
md: 328px - Standard fields (default)
lg: 440px - Longer fields, URLs, tags
xl: 552px - Long text, descriptions
number: Custom pixel width

rules

Rule[]

Validation rules from Ant Design Form. Common rules:

required: Field is required
pattern: Regular expression validation
min / max: Length validation
validator: Custom validation function

disabled

boolean

default:"false"

Whether the input is disabled.

readonly

boolean

default:"false"

Whether the field is in read-only mode. In read-only mode, displays value as text instead of input.

Tooltip displayed next to the label. Can be a string or Ant Design Tooltip props.

convertValue

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

Transform value when getting from form. Used to format data from form to component format.

transform

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

Transform value when submitting form. Used to format data from component to submission format.

colProps

ColProps

Grid column props when used in grid layout. Accepts Ant Design Col props.

formItemProps

FormItemProps

Additional props passed to Form.Item wrapper. Supports all Ant Design Form.Item props.

proFieldProps

ProFieldProps

Internal props for ProField component. Controls field rendering behavior:

mode: Display mode (‘read’ | ‘edit’ | ‘update’)

ProFormText.Password

Password input field with visibility toggle and optional strength indicator.

Import

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

Usage

Basic
With Strength

<ProFormText.Password
  name="password"
  label="Password"
  placeholder="Please enter password"
  rules={[{ required: true, min: 8 }]}
/>

<ProFormText.Password
  name="password"
  label="Password"
  fieldProps={{
    statusRender: (value) => {
      const strength = calculateStrength(value);
      return (
        <div>
          Strength: {strength === 'ok' ? 'Strong' : 
                    strength === 'pass' ? 'Medium' : 'Weak'}
        </div>
      );
    },
    strengthText: 'Password should contain letters, numbers, and symbols'
  }}
/>

Props

Extends ProFormText props and Ant Design Input.Password props.

fieldProps.statusRender

(value?: string) => ReactNode

Custom render function for password strength indicator. Displays in a popover when focused.

fieldProps.strengthText

ReactNode

Additional hint text displayed below the strength indicator in the popover.

Props for the strength indicator popover. Accepts Ant Design Popover props.

fieldProps.visibilityToggle

boolean

default:"true"

Whether to show the password visibility toggle icon.

fieldProps.iconRender

(visible: boolean) => ReactNode

Custom render function for the visibility toggle icon.

ProFormTextArea

Multi-line text input component.

Import

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

Usage

<ProFormTextArea
  name="description"
  label="Description"
  placeholder="Please enter description"
  fieldProps={{
    rows: 4,
    maxLength: 500,
    showCount: true
  }}
/>

Props

Extends ProFormText props and Ant Design Input.TextArea props.

fieldProps.rows

number

default:"4"

Number of visible text lines.

fieldProps.autoSize

boolean | { minRows: number, maxRows: number }

Auto-resize height based on content. Can specify min and max rows.

fieldProps.maxLength

number

Maximum character length.

fieldProps.showCount

boolean | ((args: { value: string, count: number, maxLength?: number }) => ReactNode)

Whether to show character count. Can provide custom render function.

fieldProps.allowClear

boolean

Whether to show clear button when input has value.

ProFormDigit

Numeric input component with format support.

Import

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

Usage

Basic
Decimal

<ProFormDigit
  name="age"
  label="Age"
  min={0}
  max={120}
  fieldProps={{
    precision: 0
  }}
/>

<ProFormDigit
  name="price"
  label="Price"
  min={0}
  fieldProps={{
    precision: 2,
    prefix: '$',
    formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
    parser: (value) => value.replace(/\$\s?|(,*)/g, '')
  }}
/>

Props

Extends ProFormText props and Ant Design InputNumber props.

min

number

Minimum value allowed.

max

number

Maximum value allowed.

fieldProps.precision

number

Number of decimal places. Set to 0 for integers only.

fieldProps.step

number | string

default:"1"

Increment/decrement step when using arrow buttons.

fieldProps.formatter

(value: number | string | undefined) => string

Custom format function for display value.

fieldProps.parser

(displayValue: string | undefined) => number | string

Parse function to convert display value back to number.

fieldProps.prefix

ReactNode

Prefix content displayed before the number.

fieldProps.suffix

ReactNode

Suffix content displayed after the number.

fieldProps.controls

boolean | { upIcon: ReactNode, downIcon: ReactNode }

default:"true"

Whether to show increment/decrement controls. Can customize icons.

fieldProps.keyboard

boolean

default:"true"

Whether to enable keyboard behavior for up/down keys.

fieldProps.stringMode

boolean

default:"false"

Enable high precision decimals support. Returns string value instead of number.

Common Features

All text field components share these common features:

Show Form Integration

All components integrate seamlessly with ProForm and Ant Design Form:

Automatic form value binding
Built-in validation
Support for field dependencies
Reset and initial values

Show Read-only Mode

When readonly={true} or proFieldProps={{ mode: 'read' }}, fields display as formatted text instead of inputs.

<ProFormText
  readonly
  name="username"
  label="Username"
/>

Show Grid Layout

Use colProps to control field layout in grid mode:

<ProForm grid>
  <ProFormText
    name="name"
    colProps={{ span: 12 }}
  />
  <ProFormText
    name="email"
    colProps={{ span: 12 }}
  />
</ProForm>

Show Value Transform

Use convertValue and transform for data format conversion:

<ProFormText
  name="tags"
  // Convert array to comma-separated string for display
  convertValue={(value) => value?.join(',')}
  // Convert comma-separated string back to array on submit
  transform={(value) => value?.split(',')}
/>

Components API

Form Fields API

Utilities

ProFormText

Import

Usage

Props

ProFormText.Password

Import

Usage

Props

ProFormTextArea

Import

Usage

Props

ProFormDigit

Import

Usage

Props

Common Features

Build docs developers (and LLMs) love

Components API

Form Fields API

Utilities

​ProFormText

​Import

​Usage

​Props

​ProFormText.Password

​Import

​Usage

​Props

​ProFormTextArea

​Import

​Usage

​Props

​ProFormDigit

​Import

​Usage

​Props

​Common Features

Build docs developers (and LLMs) love

ProFormText

Import

Usage

Props

ProFormText.Password

Import

Usage

Props

ProFormTextArea

Import

Usage

Props

ProFormDigit

Import

Usage

Props

Common Features