跳到主要内容

TextField 输入框

何时使用

  • 用于文字类信息输入场景;

组件示例

组件属性

属性说明类型默认值
addonAfter

输入框后附加内容

string

-
addonBefore

输入框前附加内容

string

-
autoFocus

是否开启自动聚焦

boolean

false

autoHeight

多行输入框自动高度,当 htmlType 属性为 textarea 时生效

boolean

false

behavior

表单组件显示状态

Behavior

'NORMAL'

hasClear

是否显示清除按钮

boolean

true

hasLimitHint

是否显示计数器

boolean

false

htmlType

设置输入框的类型,input:单行文案、 textarea:多行文案、 password:密码

'input' | 'textarea' | 'password'

input

label

表单组件标题

string

-
labelAlign

表单组件标题的位置

'left' | 'top'

'top'

labelColOffset

设置标题的偏移位置,配置值为栅格值,1代表1/24

number

0

labelColSpan

设置标题的占位宽度,配置值为栅格值,1代表1/24

number

4

labelTextAlign

表单组件的标题对齐方式

'left' | 'right'

'right'

labelTipsIcon

表单组件标题提示信息入口图标,当labelTipsTypes取值为 textrender 时生效

string

-
labelTipsRender

表单组件标题提示信息自定义渲染方法,当labelTipsTypes取值为 render 时生效

(props: IComponentProps) => ReactNode

-
labelTipsText

表单组件标题提示文本信息,当labelTipsTypes取值为 text 时生效

string

-
labelTipsTypes

表单组件标题提示信息类型设置

LabelTipsTypes

'none'

maxLength

设置字数上限

number

200

onChange

输入框组件值发生改变时触发的事件

({ value: string }) => void

-
onPressEnter

输入框按下回车键时触发的事件

() => void

-
onScanCodeError

输入框扫码失败后触发的事件

(errorMsg: string) => void

-
onScanCodeSuccess

输入框扫码成功后触发的事件

(text: string) => void

-
placeholder

占位提示

string

'请输入'

rows

多行输入框高度,当 htmlType 属性为 textarea 时生效

number

4

scanCode

是否启用扫码模式(仅钉钉手机端内支持)

ScanCodeConfig | boolean

false

size

表单组件尺寸

Size

'medium'

state

设置输入框state状态

'error' | 'loading' | 'success' | ''

''

tips

表单组件描述信息,展示在控件下方

string

-
trim

是否自动去除头尾空字符

boolean

false

validation

表单组件校验设置,具体使用详见表单校验文档

Validation[]

[]

validationType

输入框的格式

'text' | 'mobile' | 'email' | 'url' | 'chineseID' | 'password'

'text'

value

设置输入框默认值

string

-
wrapperColOffset

设置表单组件的偏移位置,设置值为栅格值,1代表1/24

number

0

wrapperColSpan

设置表单组件的占位宽度,设置值为栅格值,1代表1/24

number

0

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4