TextField Input - DingTalk Help Center

When to Use

Use this component for text-based information input scenarios.

Component Example

Component Properties

Attribute	Description	Type	Default
`addonAfter`	Content appended after the input.	`string`	-
`addonBefore`	Content prepended before the input.	`string`	-
`autoFocus`	Whether to enable auto-focus.	`boolean`	`false`
`autoHeight`	Enables auto height for the multi-line input. Takes effect when htmlType is set to textarea.	`boolean`	`false`
`behavior`	Display state of the form component.	Behavior	`'NORMAL'`
`hasClear`	Whether to show the clear button.	`boolean`	`true`
`hasLimitHint`	Whether to show the character counter.	`boolean`	`false`
`htmlType`	Sets the input type. input: single-line text; textarea: multi-line text; password: password input.	`'input' \| 'textarea' \| 'password'`	`input`
`label`	Title of the form component.	`string`	-
`labelAlign`	Location of the form component title.	`'left' \| 'top'`	`'top'`
`labelColOffset`	Sets the offset of the title. The value uses a grid system, where 1 represents 1/24.	`number`	`0`
`labelColSpan`	Sets the width of the title. The value uses a grid system, where 1 represents 1/24.	`number`	`4`
`labelTextAlign`	Title alignment of the form component.	`'left' \| 'right'`	`'right'`
`labelTipsIcon`	Entry icon for the form component title tip. Takes effect when labelTipsTypes is set to text or render.	`string`	-
`labelTipsRender`	Custom render method for the form component title tip. Takes effect when labelTipsTypes is set to render.	`(props: IComponentProps) => ReactNode`	-
`labelTipsText`	Tip text for the form component title. Takes effect when labelTipsTypes is set to text.	`string`	-
`labelTipsTypes`	Tip type for the form component title.	LabelTipsTypes	`'none'`
`maxLength`	Sets the maximum character count.	`number`	`200`
`onChange`	Event triggered when the input value changes.	`({ value: string }) => void`	-
`onPressEnter`	Event triggered when the Enter key is pressed in the input.	`() => void`	-
`onScanCodeError`	Event triggered when input scanning fails.	`(errorMsg: string) => void`	-
`onScanCodeSuccess`	Event triggered when input scanning succeeds.	`(text: string) => void`	-
`placeholder`	Placeholder text.	`string`	`'Please enter'`
`rows`	Height of the multi-line input. Takes effect when htmlType is set to textarea.	`number`	`4`
`scanCode`	Whether to enable scan mode (supported only in the DingTalk mobile app).	ScanCodeConfig \| boolean	`false`
`size`	Size of the form component.	Size	`'medium'`
`state`	Sets the state of the input.	`'error' \| 'loading' \| 'success' \| ''`	`''`
`tips`	Description of the form component, displayed below the control.	`string`	-
`trim`	Whether to automatically trim leading and trailing whitespace.	`boolean`	`false`
`validation`	Validation settings for the form component. For details, see the form validation documentation.	Validation[]	`[]`
`validationType`	Validation format for the input value.	`'text' \| 'mobile' \| 'email' \| 'url' \| 'chineseID' \| 'password'`	`'text'`
`value`	Sets the default value of the input.	`string`	-
`wrapperColOffset`	Sets the offset of the form component. The value uses a grid system, where 1 represents 1/24.	`number`	`0`
`wrapperColSpan`	Sets the width of the form component. The value uses a grid system, where 1 represents 1/24.	`number`	`0`