使用建议
单选框,通常置于 RadioGroup 中,遵循 WAI-ARIA radiogroup 模式(roving tabindex + 方向键)。
Accessibility
ARIA role:radiogroup / radio
- 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) | 选中状态单选圆圈背景颜色 - 按下态 |