Skip to content

Radio Group ​

单选组运行时:Group 持有 value,Item 表达选项,Indicator 渲染选中标记。

运行时 ​

状态契约由 @varo-ui/headless 提供;渲染 Parts 分别来自 @varo-ui/h5/primitives 与 @varo-ui/weapp/primitives。

演示 ​

安装包@varo-ui/headless

基础用法 ​

通过上方演示面板切换 H5 与 Weapp primitive 预览/代码;每个运行时只渲染当前条目。

禁用选项 ​

在 RadioItem 上设置 disabled,可保留组级 value 契约的同时屏蔽单个选项。

Parts ​

Part作用
RadioGroup组级 value 与上下文
RadioItem单个选项
RadioIndicator选中指示器

Props ​

RadioGroup ​

Prop类型默认值描述
valuestring | number | undefinedundefined受控选中值
defaultValuestring | numberundefined非受控初始值
disabledbooleanfalse整组禁用
asstring'div'根节点标签

RadioItem ​

Prop类型默认值描述
valuestring | number必填选项值
disabledbooleanfalse选项禁用
asstring'button'选项节点标签

Events ​

EventPayload描述
update:valuestring | number受控同步选中值
valueChangestring | number选中值变化

无障碍 ​

  • 组级 value 决定当前选中项。
  • 禁用 Item 不可被选中。
  • Indicator 只反映状态。

平台差异

  • H5 与小程序共用 value/disabled 契约。
  • 小程序侧键盘焦点由页面管理。 :::