---
title: Input 输入框
group:
  title: 输入
  path: /Input
  order: 1
---

# Input 输入框

通用单行输入组件，支持前、后缀，边框，语音输入能力。

## 示例

<code src="../../examples/Input"></code>

## Props

| 属性           | 类型                               | 是否必传 | 默认值  | 说明                                           |
| -------------- | ---------------------------------- | -------- | ------- | ---------------------------------------------- |
| prefix         | `React.ReactNode`                  | 否       | -       | 输入框前缀内容                                 |
| suffix         | `React.ReactNode`                  | 否       | -       | 输入框后缀内容                                 |
| allowAudio     | `boolean` \| `AudioInputBaseProps` | 否       | `false` | 是否支持语音输入，可传入配置对象自定义语音输入 |
| bordered       | `boolean`                          | 否       | `false` | 是否显示边框                                   |
| loading        | `boolean`                          | 否       | `false` | 加载状态，通常用于搜索时展示加载动画           |
| search         | `boolean`                          | 否       | `false` | 是否为搜索模式，会展示发送按钮                 |
| onSearch       | `(value: string) => void`          | 否       | -       | 搜索回调，点击发送按钮时触发，参数为当前输入值 |
| onPauseLoading | `() => void`                       | 否       | -       | 暂停加载状态时的回调，配合 loading 使用        |
| onChange       | `(value: string) => void`          | 否       | -       | 输入值变化时的回调                             |

更多属性参考 [Ant Design Mobile 的 Input 组件](https://mobile.ant.design/zh/components/input)

## 语音输入配置 AudioInputBaseProps

| 属性                   | 类型                                         | 默认值                     | 说明                                      |
| ---------------------- | -------------------------------------------- | -------------------------- | ----------------------------------------- |
| mode                   | `'input'` \| `'button'`                      | `'input'`                  | 录音模式：input-按住说话，button-点击切换 |
| pressText              | `string`                                     | `'按住 说话'`              | 按住文案                                  |
| recordingText          | `string`                                     | `'松手发送，上移取消'`     | 录音中提示文案                            |
| cancelText             | `string`                                     | `'松开取消'`               | 取消提示文案                              |
| countdownText          | `string`                                     | `'{seconds}s后将停止录音'` | 倒计时文案，`{seconds}` 为剩余秒数        |
| onChange               | `(value: Blob) => void`                      | -                          | 音频变化回调                              |
| onRecordingChange      | `(isRecording: boolean) => void`             | -                          | 录音状态变化回调                          |
| onHintChange           | `(hint: string, isWarning: boolean) => void` | -                          | 提示文案变化回调                          |
| onRecordingStateChange | `(state: RecordingState) => void`            | -                          | 录音状态变化回调                          |
| onVibrate              | `(type: 'countdown' \| 'timeout') => void`   | `navigator.vibrate`        | 震动回调，见下方说明                      |
| waveProps              | `WaveProps`                                  | -                          | 音波条配置                                |
| waveContainerClassName | `string`                                     | -                          | 音波容器自定义类名                        |
| onStreamChange         | `(stream: MediaStream \| null) => void`      | -                          | 音频流变化回调                            |
| showHalo               | `boolean`                                    | `true`                     | 是否显示光圈效果（仅 input 模式）         |
| style                  | `React.CSSProperties`                        | -                          | 自定义样式                                |
| audioFormat            | `AudioFormat`                                | `'webm'`                   | 音频输出格式                              |

### onVibrate 回调

| type        | 触发时机                           |
| ----------- | ---------------------------------- |
| `countdown` | 进入倒计时阶段（剩余10秒）首次触发 |
| `timeout`   | 倒计时结束，自动发送消息时触发     |