npm package: @rax-ui/text-field
Description: Rax UI Text Field
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: TextField
family: Data Entry
---

# TextField

单行/多行文本输入

## API

### Props

| 名称          | 说明                                                                            | 类型                                             | 默认值 |
| :------------ | :------------------------------------------------------------------------------ | :----------------------------------------------- | :----- |
| type          | 输入框类型 <br>可选值：<br> `text`, `url`, `password`, `tel`, `email`, `number` | enum                                             | text   |
| label         | 标签文本                                                                        | string                                           |        |
| icon          | 输入框左侧图标                                                                  | string                                           |        |
| labelWidth    | 标签文本宽度                                                                    | string                                           |        |
| labelType     | 标签类型 <br>可选值：<br> `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         | 输入内容对齐方向 <br>可选值：<br> `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 结构

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