单选、复选与选择卡片

复选框与单选框

使用原生控件，accent-navy 把勾选色设为标准色。

examples/choice/checkbox-radio.html

<label class="flex items-start gap-2.5 text-sm text-foreground">
  <input type="checkbox" class="mt-0.5 size-4 shrink-0 accent-navy" />
  邮件
</label>

• 整行 <label> 都可点击
• 一组选项用 <fieldset> + <legend> 包裹
• 协议勾选框的链接写在 label 内，点击链接不会勾选

选择卡片 ChoiceCard

2–4 个互斥选项，需要让用户一眼看到全部时使用。本质是单选框，不需要任何 JS。

examples/choice/choice-card.html

<label class="flex h-11 flex-1 cursor-pointer items-center gap-2.5 rounded-lg border border-border px-4 text-sm font-medium
              text-muted-foreground transition-colors hover:border-navy/40
              has-checked:border-navy has-checked:bg-accent/50 has-checked:text-foreground
              has-focus-visible:ring-3 has-focus-visible:ring-ring/40">
  <input type="radio" name="holder-type" value="person" class="peer sr-only" />
  <span class="flex size-4 items-center justify-center rounded-full border border-input peer-checked:border-navy
               after:size-2 after:rounded-full after:bg-navy after:opacity-0 peer-checked:after:opacity-100"></span>
  个人
</label>

• 选中态完全由 has-checked: / peer-checked: 表达
• 带说明的卡片：h-auto items-start p-4，标题 text-sm font-semibold，说明 text-xs text-muted-foreground
• 禁用：给 input 加 disabled，卡片用 has-disabled:opacity-50

使用建议

推荐

• 2–4 个选项、每个选项需要解释时用选择卡片；选项更多时用下拉选择
• 单选组默认选中最常用的一项（除非需要用户主动确认，如「是否为最终受益人」）

避免

• 用按钮 + JS 状态模拟单选（v2 的 ChoiceCard 就是这样，键盘无法用方向键切换）
• 单个复选框表示「是 / 否」二选一的必答题

无障碍

• 原生 radio 自带方向键切换、读屏「第 1 项，共 2 项」
• 视觉隐藏 input 必须用 sr-only，不能用 hidden 或 display:none（否则无法聚焦）

与 v2 的差异

v2 现状	规范
ChoiceCard 是 <button> + active prop，不属于表单	真实 <input type="radio">，可原生提交与键盘操作
复选框无统一样式	size-4 accent-navy