uiUI 组件系统
对比

多选与追问

Questionnaire / Clarification

用单选、多选或自由回答补足 Agent 尚不明确的需求。

交互预览实时预览
你想先了解哪类组件?

选择并确认
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'questionnaire',
  {
    "demo": true
  }
);

view.element.addEventListener('ui:submit', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

答案会实质影响下一步,且可给出有限、清晰的选项。

什么时候不用

系统已掌握答案时不要重复问;开放问题别强行套选项。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
label"你想先了解哪类组件?"
name"interest"
items["Agent 交互","通用组件"]
multiplefalse
requiredtrue
submitLabel"确认选择"
demofalse

事件

ui:submit

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 用 fieldset 与 legend 表达问题。
  • 保留原生单选、多选和键盘行为。

和相似组件的区别

追问收集信息;审批要求授权。两者的选项含义不同。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

shadcn/uiQuestionnaire
官方提供

提供单选、多选、自由回答与跳过;宿主负责保存和传输。

关键状态

待回答已选择校验失败跳过完成

React / Next.js · 来源核验

一起了解

审批与人工接管 ↗表单与字段 ↗选项选择器 ↗