@rax-ui/text-field NPM

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}` 时的外框线样式