Radio 单选

单选组件把 WinUI 3 / Windows App SDK 的 RadioButton 还原为两个协作组件:FluereRadioGroup(组容器,管 v-model、同组互斥与方向键导航)与 FluereRadioButton(每一项)。交互底座复用 reka-ui 的 RadioGroup,完整还原方向键在组内循环导航 / 选中、选中态品牌实心圆 + 白色内点、按住时内点浅显预览(WinUI 独有的 PressedCheckGlyph)。

基础用法

v-model 绑定当前选中值,FluereRadioButton 的 value 决定各自的值。同组互斥,点击任意项选其一。

当前:red

基础用法

横向组

默认纵向堆叠;传 orientation="horizontal" 改为横向排开(可叠加 flex-wrap 换行)。

对齐:left

横向排布

禁用

组级禁用传 disabled;只禁用个别项时在对应 FluereRadioButton 上传 disabled。

整组禁用

单选项禁用

禁用状态

无障碍

FluereRadioGroup 自带 role="radiogroup",每项自带 role="radio" + aria-checked;方向键(↑↓/←→ + Home/End)在组内循环导航并实时选中(reka roving focus)。可见文本本就在按钮内部,自动作为可访问名;若某项是纯图标(无可读文本),用 label 提供 aria-label;整组无可见标题时可在 FluereRadioGroup 上传 label 作为组的 aria-label。

表单提交

位于 <form> 内并传 name 时,会自动补隐藏原生 <input type="radio">,选中值随表单提交。建议把 name 放在组上即可让整组作为同一字段提交。

API

FluereRadioGroup

属性(Props)类型默认说明
modelValueAcceptableValue—当前选中值(v-model)
defaultValueAcceptableValue—非受控初始选中值
disabledbooleanfalse是否禁用整组单选项
orientation'vertical' | 'horizontal'vertical排布方向
namestring—表单提交名(整组作为同一字段提交)
requiredbooleanfalse组内必选约束
loopbooleantrue方向键在首尾项之间循环导航
dir'ltr' | 'rtl'—阅读方向(一般无需设置)
labelstring—组的可访问名称(等价 aria-label)

FluereRadioButton

属性(Props)类型默认说明
valueAcceptableValue—该单选项的值(决定选中态 / 提交值)
disabledbooleanfalse是否禁用该项(叠加在组之上)
namestring—该项表单提交名(通常用组上的 name)
requiredbooleanfalse必选约束
idstring—原生 id,可与外部 label 的 for 关联
labelstring—纯图标时的 aria-label 兜底

圆(circle)固定 20px 直径(对应 WinUI 的 RadioButton 圆尺寸),不随尺寸缩放;选中态为「品牌色实心圆 + 白色内点」,按住时内点浅显预览——与 WinUI RadioButton 一致。

v0.3.0-alpha.2