组件 · 数据展示

Questionnaire 问卷

问卷/调查表单组件。

入口 @selrux/ui/questionnaire · 源码 src/components/questionnaire/index.ts · 15 个组件 · 发布状态 preview

使用建议

避免：编造未导出的题目类型
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

123456789import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireDescription,
  // …共 15 个导出
} from '@selrux/ui/questionnaire';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

逐题作答，items 声明题目顺序与必答；shortcuts="letters" 支持字母快捷键选择。

受控题目与状态

item / onItemChange 受控当前题；QuestionnaireItem 的 multiple 多选、invalid、onStatusChange；Choice 的 checked / onCheckedChange、defaultChecked、disabled、renderShortcut；导航按钮的 variant / size；size 尺寸；defaultItem 为非受控初始题。

当前题：channels，第一题状态：unanswered，邮件：true

API

属性覆盖：示例用到 26 / 26 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Questionnaire

主题化问卷根。

属性	说明	类型	默认值
`size`	-	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`items`	题目集合元数据；与渲染的 Item 对齐。	`readonly QuestionnaireItemMeta[]`	-
`item`	受控当前题 name。	`string`	-
`defaultItem`	非受控初始题。	`string`	-
`onItemChange`	当前题变更。	`((name: string) => void)`	-
`shortcuts`	字母/数字快捷键。	`false \| "letters" \| "numbers"`	-
`onSubmit`	提交；库已 preventDefault 时仍会调用。	`((event: React.FormEvent<HTMLFormElement>) => void)`	-

另有 287 项原生属性与事件继承自 FormHTMLAttributes / HTMLAttributes，原样透传。

QuestionnaireActions

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

QuestionnaireChoice

主题化选项；快捷键用 Kbd。

属性	说明	类型	默认值
`value` *	选项值。	`string`	-
`disabled`	是否禁用。	`boolean`	-
`defaultChecked`	默认选中（非受控）。	`boolean`	-
`checked`	受控选中。	`boolean`	-
`onCheckedChange`	选中变化。	`((checked: boolean) => void)`	-
`renderShortcut`	自定义快捷键展示（UI 层可换成 Kbd）。	`((shortcut: string) => ReactNode)`	-

另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。

QuestionnaireChoiceDescription

选项副文案；对齐 shadcn QuestionnaireChoiceDescription。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

QuestionnaireChoices

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

QuestionnaireDescription

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

QuestionnaireError

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

QuestionnaireInput

主题化自由输入；外层 wrapper 对齐 shadcn。

无自有属性；其余 310 项原生属性继承自 HTMLAttributes / InputHTMLAttributes。

QuestionnaireItem

属性	说明	类型	默认值
`name` *	题目字段名。	`string`	-
`required`	必填。	`boolean`	-
`multiple`	多选。	`boolean`	-
`invalid`	外置 invalid。	`boolean`	-
`onStatusChange`	状态变更。	`((status: QuestionnaireItemStatus) => void)`	-

另有 282 项原生属性与事件继承自 FieldsetHTMLAttributes / HTMLAttributes，原样透传。

QuestionnaireNext

主题化下一步；对齐 shadcn default → solid primary。

属性	说明	类型	默认值
`variant`	Button 变体。	`"link" \| "outline" \| "ghost" \| "solid"`	-
`size`	Button 尺寸。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-

另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

QuestionnairePrevious

主题化上一步；复用 Button outline。

属性	说明	类型	默认值
`variant`	Button 变体。	`"link" \| "outline" \| "ghost" \| "solid"`	-
`size`	Button 尺寸。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-

另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

QuestionnaireProgress

主题化进度；默认中文「第 n 题 / 共 m 题」。

属性	说明	类型	默认值
`children`	-	`ReactNode \| ((state: QuestionnaireProgressState) => ReactNode)`	-

另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。

QuestionnaireSkip

主题化跳过；对齐 shadcn outline。

属性	说明	类型	默认值
`variant`	Button 变体。	`"link" \| "outline" \| "ghost" \| "solid"`	-
`size`	Button 尺寸。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-

另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

QuestionnaireSubmit

主题化提交；复用 Button solid primary。

属性	说明	类型	默认值
`variant`	Button 变体。	`"link" \| "outline" \| "ghost" \| "solid"`	-
`size`	Button 尺寸。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-

另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

QuestionnaireTitle

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

导出类型：QuestionnaireActionsProps、QuestionnaireChoiceDescriptionProps、QuestionnaireChoiceProps、QuestionnaireChoicesProps、QuestionnaireDescriptionProps、QuestionnaireErrorProps、QuestionnaireInputProps、QuestionnaireItemProps、QuestionnaireNavButtonVisualProps、QuestionnaireNextProps、QuestionnairePreviousProps、QuestionnaireProgressProps、QuestionnaireProps、QuestionnaireSkipProps、QuestionnaireSubmitProps、QuestionnaireTitleProps