Radio
单选框，通常置于 RadioGroup 中，遵循 WAI-ARIA radiogroup 模式（roving tabindex + 方向键）。
如何引入
import { Radio } from '@chenzy-design/svelte';基础用法
单个单选框，通过 checked 与 onChange 控制状态，支持禁用。
单选框组
RadioGroup 以数据驱动渲染多个单选项，onChange 返回选中值。
当前选择：1
按钮形态
设置 type="button" 渲染为按钮组形态，常用于切换视图或筛选。
当前：day
辅助文本与禁用
extra 副文本（仅 type=default 生效），disabled 禁用（含默认选中的禁用态）。
高级模式
mode="advanced" 允许已选中项再次点击取消选择。
已选中
排列方向
direction 控制组内 horizontal（默认）/ vertical 排列。
horizontal（默认）
vertical
卡片形态
type="card" 带背景卡片，type="pureCard" 无 radio 的纯卡片，配合 extra 副文本。
卡片一（禁用） Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统
卡片二 Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统
卡片三 Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统
纯卡片一 Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统
纯卡片二 Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统
纯卡片三 Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统
按钮尺寸
buttonSize 控制 type="button" 的 small / middle / large 三种尺寸。
buttonSize=small
buttonSize=middle（默认）
buttonSize=large
API 参考
Radio
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 选项值（必填） | string | number | boolean | — |
checked | 独立使用时受控选中 | boolean | undefined |
defaultChecked | — | boolean | false |
disabled | — | boolean | false |
size | — | 'small'|'default'|'large' | default |
status | 校验态，影响边框色；继承 Group，非 default 单项可覆盖 | 'default'|'warning'|'error' | default |
type | button/card/pureCard 用 role=radio 容器 + aria-checked | 'default'|'button'|'card'|'pureCard' | 继承 Group 或 default |
name | — | string | undefined |
extra | 辅助说明，aria-describedby 关联 | string | undefined |
children | 标签内容 | Snippet | undefined |
onChange | — | (checked: boolean) => void | undefined |
addonId | 内容容器 id，用作 input 的 aria-labelledby | string | undefined |
addonClassName | 内容容器附加 class | string | undefined |
addonStyle | 内容容器内联样式 | string | undefined |
autoFocus | 挂载时自动聚焦 | boolean | false |
extraId | 自定义 extra 元素 id（默认由 fieldId 派生） | string | undefined |
mode | advanced：再次点击选中项可取消（onChange(false)） | 'advanced'|'' | '' |
style | 根元素内联样式 | string | undefined |
onMouseEnter | — | (e: MouseEvent) => void | undefined |
onMouseLeave | — | (e: MouseEvent) => void | undefined |
ariaLabel | 无障碍标签 | string | undefined |
preventScroll | autoFocus 时阻止滚动 | boolean | false |
Methods
| 属性 | 类型 | 说明 |
|---|---|---|
focus | — | 命令式聚焦内部 input（对齐 Semi） |
blur | — | 命令式失焦内部 input（对齐 Semi） |
Accessibility
| ARIA role | radiogroup / radio |
| 键盘交互 | ArrowUpArrowDownArrowLeftArrowRightHomeEndSpace |
- div role=radiogroup 包裹
- roving tabindex：仅选中项（或首个可用项）tabindex=0
- 方向键在可用项间循环移动并选中、聚焦，跳过 disabled
- Home/End 跳首/末可用项
- RTL（dir=rtl）下 ArrowLeft/ArrowRight 语义镜像翻转
- button/card/pureCard 型用容器 role=radio + aria-checked（非原生 input），Space/Enter 选中
- extra 经 aria-describedby 关联
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-radio-buttonradio-bg-default | var(--cd-color-fill-0) | 按钮样式单选背景颜色 |
--cd-color-radio-buttonradio-text-default | var(--cd-color-text-1) | 按钮样式单选文本颜色 |
--cd-color-radio-cardradiogroup-border-active | var(--cd-color-primary) | 卡片样式单选选中态描边颜色 |
--cd-color-radio-default-bg-default | transparent | 单选圆圈背景颜色 - 默认态 |
--cd-color-radio-default-bg-hover | var(--cd-color-fill-0) | 单选圆圈背景颜色 - 悬浮态 |
--cd-color-radio-default-border-default | var(--cd-color-text-3) | 单选圆圈描边颜色 - 默认态 |
--cd-color-radio-default-border-hover | var(--cd-color-focus-border) | 单选圆圈描边颜色 - 悬浮态 |
--cd-color-radio-default-text-default | var(--cd-color-text-0) | 选项文本颜色 |
--cd-color-radio-extra-text-default | var(--cd-color-text-2) | 辅助文本颜色 |
--cd-color-radio-primary-bg-active | var(--cd-color-primary-active) | 选中状态单选圆圈背景颜色 - 按下态 |