@rax-ui/text-field

---

display: TextField family: Data Entry

TextField

单行/多行文本输入

API

Props

名称	说明	类型	默认值
type	输入框类型 可选值： text, url, password, tel, email, number	enum	text
label	标签文本	string
icon	输入框左侧图标	string
labelWidth	标签文本宽度	string
labelType	标签类型 可选值： inner upper dynamic
actionIcon	输入框最右侧的图标	node
multiline	是否可以输入多行文本	bool	false
rows	输入文本框的行数（在 multiline=true 时生效 ）	number	3
value	输入值（受控）	string
defaultValue	默认输入框的值（非受控）	string
maxLength	可输入的最大字符数	number
limitHint	是否显示输入字符的提示	string
disabled	输入框是否被禁用	bool	false
readOnly	是否只读	bool	false
solo	是否只有输入框，不包含 label 和 errorText 、HelpText）	bool	false
outline	是否显示边框	bool	false
clear	是否可以被清除	bool	false
placeholder	提示文案	string
helpText	帮助文案	node
errorText	错误文案（设置此项后，输入框变为 error 状态，helpText 无效）	node
align	输入内容对齐方向 可选值： left，center，right	enum	left
prepend	前置内容	node
append	后置内容	node
renderInput	自定义渲染 <input />	({value, placeholder, align, style }) => RaxNode
onClick	输入框部分被点击时的回调	(): void
onActionClick	actionIcon 被点击时的回调	(): void
onChange	change 事件的回调	(value: string): void
onFocus	focus 事件的回调	(): void
onBlur	blur 事件的回调	(): void

CSS API

css 结构

<text-field>
  <text-field__input>
    <text-field__line>
      <text-field__input-addon>
        // prepend
        <text-field__input-addon-text>
          <text-field__input-content>
            <text-field__input-label>
              <text-field__input-element>
                <text-field__input-action>
                  <text-field__input-action-icon>
                    <text-field__input-addon>
                      // --append
                      <text-field__input-addon-text>
                        <text-field__helper>
                          <text-field__helper-text></text-field__helper-text></text-field__helper></text-field__input-addon-text></text-field__input-addon></text-field__input-action-icon></text-field__input-action></text-field__input-element></text-field__input-label></text-field__input-content></text-field__input-addon-text></text-field__input-addon></text-field__line></text-field__input
></text-field>

名称	说明
text-field	输入框容器样式
text-field__input	输入框样式
text-field__input-label	输入框标签样式
text-field__input-content	输入框内容样式
text-field__input-element	输入框 <input> 元素样式
text-field__input-action	动作样式 （clear）
text-field__input-action-icon	动作图标样式
text-field__input-addon	addon 样式
text-field__input-addon--prepend	addon 前置时的样式
text-field__input-addon--append	addon 后置时的样式
text-field__input-addon-text	addon 文字 & icon 样式
text-field__line	输入框外框线的样式
text-field__helper	帮助区域样式
text-field__helper-text	帮助文本样式
text-field--label-top__input-content	labelType="upper" 时的内容样式
text-field--label-top__input-label	labelType="upper" 时的标签样式
text-field--label--dynamic__input-content	labelType="dynamic" && outline={true} 时的内容样式
text-field--label--dynamic__input-label	labelType="dynamic" && outline={true} 时的标签样式
text-field--outline__input	outlint={true} 时输入框的样式
text-field--outline__line	outlint={true} 时外框线的样式
text-field--multiline__input	multiline={true} 时输入框的样式
text-field--multiline__input-content	multiline={true} 时外框线的样式
text-field--focused__input-label	输入框获得焦点时的标签样式
text-field--focused__line	输入框获得焦点时的外框线样式
text-field--error__input-label	errorText="xxx" 时的标签样式
text-field--error__line	errorText="xxx" 时的外框线样式
text-field--error__helper-text	errorText="xxx" 时的帮助文字样式
text-field--disabled__input	disabled={true} 时的输入框样式
text-field--disabled__input-label	disabled={true} 时的标签样式
text-field--disabled__input-element	disabled={true} 时的 input 样式
text-field--disabled__input-line	disabled={true} 时的外框线样式