跳到主要内容

OptionCard 选项卡片OptionCard · OptionCardGroup

选项需要一张示意图或一段说明才能讲清楚时，用卡片代替单选 / 复选框：布局模式、套餐、附加服务。选项只是几个短词时用 Radio 或 Segmented。

单选

OptionCardGroup 默认单选。art 是卡片上半部分的示意图：里面的 <i> 是预览线（选中时依次伸长），<b> 是色块，位置由你自己用样式决定。下面示例里的 artDefault 等变量见“查看代码”。

当前布局：default

说明文字与非受控

没有示意图时用 description 写一两句说明。minItemWidth 决定每列最小宽度，列数随容器宽度自动增减。

多选

加 multiple 后值变成数组，每张卡片是一个复选框。

已选 1 项

禁用

规格

圆角
卡片 20 · 预览 12（同心）
悬停
描边加深，粗细不变
光环
外扩 5px · scale .94 → 1 · bouncy
对勾
方块旋入 + 描线 · 延迟 120ms
预览线
scaleX .72 → 1 · 错峰 30ms

API

OptionCardGroup

属性类型默认值说明
multiplebooleanfalse多选。决定 value 的类型和卡片的角色。
valuestring | null（单选）/ string[]（多选）—选中项（受控）。
defaultValuestring | null / string[]—初始选中项（非受控）。
onChange(value: string) => void / (value: string[]) => void—选中项变化时触发。
minItemWidthnumber128每列最小宽度（px）。
disabledboolean—整组禁用。

OptionCard

属性类型默认值说明
value*string—这一项的值。
childrenReactNode—标题，单行，过长省略。
artReactNode—卡片上半部分的示意图。
descriptionReactNode—标题下的说明。
disabledboolean—禁用这一张。
checkedboolean—不在组里单独使用时的选中状态（此时是复选框语义）。
onChange(checked: boolean) => void—单独使用时：点击后触发。

无障碍

  • 单选：组是 role="radiogroup"，卡片是 role="radio"。整组一个 Tab 停靠点（选中项，没选则是第一张）；方向键移动并同时选中，到头循环；Home / End 到两端。
  • 多选：组是 role="group"，卡片是 role="checkbox"，各自可 Tab 到，Space / Enter 切换。
  • 卡片的可读名称是标题加说明文字；示意图请保持纯装饰，不要放必须读到的信息。
  • 选中除了光环还有右下角的对勾方块。
  • 请给组 aria-label 或放进带 label 的 Field。