---
title: Input 输入框
nav:
  title: 组件
  path: /component
group:
  title: 表单组件
  path: /form
  order: 2
---

# Input 输入框

## 代码演示

### 输入框尺寸
提供四种尺寸选项：small、default、large 和 max，满足不同场景下的布局需求。

<code src="./__fixtures__/size.tsx" />

### 输入框状态
展示输入框的错误、禁用和加载状态，帮助用户理解当前输入框的可用状态。

<code src="./__fixtures__/status.tsx" />

### 输入格式
支持金额输入和千分位格式化，适用于金融场景下的数值输入。

<code src="./__fixtures__/amount.tsx" />

### 多行文本输入
提供多行文本输入功能，支持字数统计和自动调整高度，适用于长文本输入场景。

<code src="./__fixtures__/textarea.tsx" />

### 输入框交互
支持一键清除内容、禁用状态和自动获取焦点，提升用户输入体验。

<code src="./__fixtures__/clearable.tsx" />

### 输入框装饰
支持添加后缀图标、单位显示、只读模式、横向布局和自定义图标，丰富输入框的展示形式。

<code src="./__fixtures__/suffix.tsx" />

### 验证码输入
集成验证码获取功能，支持倒计时和状态切换，适用于手机验证码等场景。

<code src="./__fixtures__/code.tsx" />

### 单位显示
在输入框后显示单位标识，适用于需要明确单位的数值输入场景。

<code src="./__fixtures__/unit.tsx" />

### 错误提示
支持错误状态展示和错误信息提示，帮助用户及时发现输入问题。

<code src="./__fixtures__/error.tsx" />

### 高级多行输入
支持前缀、后缀、字数统计等高级功能的多行文本输入框，适用于复杂的文本编辑场景。

<code src="./__fixtures__/textarea-advanced.tsx" />

### 选择器集成
将输入框与选择器结合，支持点击输入框弹出选择器进行选择，适用于选项输入场景。

<code src="./__fixtures__/picker.tsx" />

## 属性

<API hideTitle src="./Input.tsx" />

## Input.TextArea

<API hideTitle src="./TextArea.tsx" />