---
title: Field 输入框
desc: 用户可以在文本框内输入或编辑文字。
demo: /field
nav:
path: /
group:
title: 表单组件
---
## 代码演示
### 基础用法
可以通过 `value` 和 `input` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
```jsx
// Field 是基于 Cell 实现的，可以使用 Cell.Group 作为容器来提供外边框。
We must make sure that your are a human.}
placeholder="请输入文本"
/>
```
### 自定义类型
根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
```jsx
```
### 禁用输入框
通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
```jsx
```
### 显示图标
通过 `leftIcon` 和 `rightIcon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。
```jsx
}
rightIcon={}
placeholder="显示图标"
onClickLeftIcon={() => Toast.info('左侧图标点击')}
onClickRightIcon={() => Toast.info('右侧图标点击')}
/>
} placeholder="显示清除图标" />
```
### 错误提示
设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `errorMessage` 属性显示对应的错误提示。
```jsx
```
### 插入按钮
通过 button 插槽可以在输入框尾部插入按钮。
```jsx
发送
}
/>
```
### 格式化输入内容
通过 `formatter` 属性可以对输入的内容进行格式化，通过 `formatTrigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。
```jsx
import React, { useState } from 'react';
import { Field, Cell } from '@pingtou/rn-vant';
export default () => {
const [value1, setValue1] = useState('');
const [value2, setValue2] = useState('');
const formatter = (val: string | number) => val.toString().replace(/\d/g, '');
return (
);
}
```