# Input 组件使用示例

以下为片段，实际页面请自行布局。

---

## 基础输入框

```tsx
import { Input } from '@alipay/agentic-design-mobile';

export function BasicInput() {
  return <Input placeholder="有什么想问我的吗～" />;
}
```

---

## 语音输入（默认展示光圈）

```tsx
import { Input } from '@alipay/agentic-design-mobile';

export function InputWithAudio() {
  return <Input allowAudio placeholder="有什么想问我的吗～" />;
}
```

---

## 语音输入（仅音波效果，无光圈）

```tsx
import { Input } from '@alipay/agentic-design-mobile';

export function InputAudioWaveOnly() {
  return (
    <Input
      allowAudio={{
        showHalo: false,
        onChange: (blob) => {
          console.log(blob);
        },
      }}
      placeholder="按住说话，仅显示音波效果，无光圈"
    />
  );
}
```

---

## 自定义前缀和后缀的输入框

```tsx
import { Input } from '@alipay/agentic-design-mobile';
import { Sparkles, CirclePlus } from '@alipay/sofa-icons';

export function InputWithAffix() {
  return (
    <Input
      prefix={<Sparkles size={20} style={{ color: '#4491FF' }} />}
      suffix={<CirclePlus size={20} />}
      placeholder="有什么想问我的吗～"
    />
  );
}
```

---

## 搜索模式

```tsx
import { useState } from 'react';
import { Input } from '@alipay/agentic-design-mobile';

export function InputSearch() {
  const [value, setValue] = useState('');
  return (
    <Input
      search
      placeholder="有什么想问我的吗～"
      value={value}
      onChange={(v) => setValue(v as string)}
      onSearch={() => setValue('')}
    />
  );
}
```

---

## 搜索模式+可取消

```tsx
import { useState } from 'react';
import { Input } from '@alipay/agentic-design-mobile';

export function InputSearchLoading() {
  const [loading, setLoading] = useState(false);
  return (
    <Input
      search
      loading={loading}
      placeholder="有什么想问我的吗～"
      onSearch={(v) => {
        console.log(v);
        setLoading(true);
      }}
      onPauseLoading={() => setLoading(false)}
    />
  );
}
```

---

## 带边框的输入框

```tsx
import { Input } from '@alipay/agentic-design-mobile';

export function InputBordered() {
  return <Input bordered placeholder="有什么想问我的吗～" />;
}
```