---
group:
  title: 表单控件
  order: 4
title: JsonInput
toc: content
---

# JsonInput JSON 输入控件

> 用于输入和编辑 JSON 数据，支持实时格式校验、一键格式化/压缩、只读预览等

## 基础用法

```
// 单独引入
import { JsonInput } from 'fan-standard-comp';

<JsonInput value='{"name":"John","age":30}' onChange={(v) => console.log(v)} />

// 基础控件使用
import { Field } from 'fan-standard-comp';
<Field type="jsonInput"></Field>
```

## 代码演示

<code title="基本使用" src="../../src/FormComp/JsonInput/demos/basic.tsx" ></code>

## API

| 参数 | 说明 | 类型 | 默认值 | 参考值 |
|------|------|------|--------|--------|
| value | 当前值，支持 JSON 字符串或对象 | String / Object / Array | - | `'{"name":"John"}'` |
| onChange | 值变化回调，返回 JSON 字符串 | Function | - | - |
| size | 控件尺寸 | String | `middle` | `large` / `middle` / `small` |
| fieldStatus | 控件状态 | String | `default` | `default` / `disabled` / `viewOnly` |
| placeholder | 占位提示文本 | String | - | - |
| rows | textarea 行数 | Number | `6` | - |
| autoFormat | 失焦时自动格式化 JSON | Boolean | `false` | - |
| showActions | 是否显示操作按钮（格式化/压缩） | Boolean | `true` | - |
| showStatus | 是否显示校验状态图标 | Boolean | `true` | - |
| disabled | 禁用，同 `fieldStatus='disabled'` | Boolean | `false` | - |
| readOnly | 只读，同 `fieldStatus='viewOnly'` | Boolean | `false` | - |
| maxLength | 最大输入长度 | Number | - | - |
| style | 扩展样式 | Object | - | - |
| className | 额外的 className | String | - | - |