interactive-input

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Interactive Input Blocks

交互式输入块

Embed interactive UI components (radio buttons, checkboxes, text fields, toggles) directly in chat responses. Compatible clients render these as native UI elements; other clients show a readable JSON code block as fallback.

直接在聊天回复中嵌入交互式UI组件（单选按钮、复选框、文本框、开关）。兼容的客户端会将其渲染为原生UI元素，其他客户端则会展示可读性良好的JSON代码块作为降级方案。

When to Use

使用场景

Quizzes and exercises (single/multiple choice, fill-in-the-blank)
Surveys and polls
Structured data collection (forms)
Any scenario where the user needs to select from options or provide structured input

测验与练习（单选/多选、填空题）
调研与投票
结构化数据收集（表单）
任何需要用户从选项中选择或提供结构化输入的场景

How It Works

工作原理

Wrap a JSON block in a

```interactive

code fence within your normal markdown response. You can mix regular text and interactive blocks freely in the same message.

在普通的markdown回复中，将JSON块包裹在

```interactive

代码围栏内。你可以在同一条消息中自由混合普通文本和交互块。

Schema Reference

Schema参考

See

references/schema.md

for the complete schema specification.

完整的Schema规范请查看

references/schema.md

。

Quick Example

快速示例

When presenting a multiple-choice question, instead of listing options as text:

markdown

Here's your first question:

```interactive
{
  "id": "q1",
  "card": {
    "body": [
      { "type": "TextBlock", "text": "What is the capital of France?", "weight": "bold" },
      { "type": "Input.ChoiceSet", "id": "answer", "style": "expanded",
        "choices": [
          { "title": "A. London", "value": "london" },
          { "title": "B. Paris", "value": "paris" },
          { "title": "C. Berlin", "value": "berlin" },
          { "title": "D. Madrid", "value": "madrid" }
        ]
      }
    ],
    "actions": [{ "type": "Action.Submit", "title": "Submit" }]
  }
}
```

展示选择题时，无需将选项列为纯文本：

markdown

Here's your first question:

```interactive
{
  "id": "q1",
  "card": {
    "body": [
      { "type": "TextBlock", "text": "What is the capital of France?", "weight": "bold" },
      { "type": "Input.ChoiceSet", "id": "answer", "style": "expanded",
        "choices": [
          { "title": "A. London", "value": "london" },
          { "title": "B. Paris", "value": "paris" },
          { "title": "C. Berlin", "value": "berlin" },
          { "title": "D. Madrid", "value": "madrid" }
        ]
      }
    ],
    "actions": [{ "type": "Action.Submit", "title": "Submit" }]
  }
}
```

Rules

规则

Every interactive block MUST have a unique
```
id
```
field
Every interactive block MUST have at least one element in
```
card.body
```
Include an
```
Action.Submit
```
in
```
card.actions
```
so the user can submit their response
Use
```
"style": "expanded"
```
for choice sets to show all options visually (recommended for quizzes)
Use
```
"style": "compact"
```
for dropdown selects when there are many options
Set
```
"isMultiSelect": true
```
on
```
Input.ChoiceSet
```
for multiple-choice questions
The first
```
TextBlock
```
in the body is used as the question label in the submitted response
You can include multiple interactive blocks in one message (e.g., a full quiz)
Always wrap the JSON in a
```
```interactive
```
code fence — never use
```
```json
```
for interactive blocks
Keep the JSON compact and valid — no comments, no trailing commas

每个交互块必须包含唯一的
```
id
```
字段
每个交互块的
```
card.body
```
中必须至少包含一个元素
在
```
card.actions
```
中添加
```
Action.Submit
```
以便用户提交响应
选项集使用
```
"style": "expanded"
```
以直观展示所有选项（推荐用于测验场景）
选项较多时使用
```
"style": "compact"
```
渲染为下拉选择框
多选题需在
```
Input.ChoiceSet
```
上设置
```
"isMultiSelect": true
```
body中的第一个
```
TextBlock
```
会被用作提交响应里的问题标签
一条消息中可包含多个交互块（比如完整的测验）
始终将JSON包裹在
```
```interactive
```
代码围栏中，切勿为交互块使用
```
```json
```
保持JSON紧凑且合法，不要添加注释，不要有尾逗号