title: radio-group 单项选择器组 header: develop nav: component sidebar: formlist_radio-group

webUrl: https://qft12m.smartapps.cn/component/radio/radio

解释：单项选择器组，内部由多个radio组成。代码示例与 radio 相同。

属性说明

属性名 类型 默认值 必填 说明
bindchange EventHandle   否 <radio-group/> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项 radio 的 value}

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/radio/radio - 图1 请使用百度APP扫码

代码示例1 - 默认样式

在开发者工具中预览效果

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">默认样式</view>
  3.     <view class="radio">
  4.         <radio-group>
  5.             <radio checked>单选项一</radio>
  6.             <radio class="radio-before" checked="false">单选项二</radio>
  7.         </radio-group>
  8.     </view>
  9. </view>

:::

代码示例2 - 列表展示

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">列表展示</view>
  3.     <view class="radio-area">
  4.         <radio-group>
  5.             <radio class="radio border-bottom" checked>单选项一</radio>
  6.             <radio class="radio border-bottom" checked="false">单选项二</radio>
  7.             <radio class="radio border-bottom" checked="false">单选项三</radio>
  8.         </radio-group>
  9.     </view>
  10. </view>

:::

代码示例3 - 包含禁用选项

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>包含禁用选项</view>
  4.         <view>disabled</view>
  5.     </view>
  6.     <view class="radio-area">
  7.         <radio-group>
  8.             <radio class="radio border-bottom" checked>可用选项</radio>
  9.             <radio class="radio border-bottom" checked="false">可用选项</radio>
  10.             <radio class="radio" checked="false" disabled>
  11.                 <text class="disabledText">禁用选项</text>
  12.             </radio>
  13.         </radio-group>
  14.     </view>
  15. </view>

:::

代码示例4 - 默认不选中

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>默认不选中</view>
  4.         <view>checked="false"</view>
  5.     </view>
  6.     <view class="radio-area">
  7.         <radio-group>
  8.             <radio class="radio border-bottom" checked>单选项一</radio>
  9.             <radio class="radio border-bottom" checked="false">单选项二</radio>
  10.         </radio-group>
  11.     </view>
  12. </view>

:::

代码示例5 - 自定义颜色

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>自定义颜色</view>
  4.         <view>color="#00BC89"</view>
  5.     </view>
  6.     <view class="radio-area">
  7.         <radio-group>
  8.             <radio class="radio border-bottom" color="#00BC89" checked>单选项一</radio>
  9.             <radio class="radio border-bottom" color="#00BC89">单选项二</radio>
  10.         </radio-group>
  11.     </view>
  12. </view>

:::

代码示例 6: 改变小程序原生组件大小,拿radio举例，其他组件也适用

在开发者工具中预览效果

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">改变小程序原生组件大小</view>
  4.             <radio-group class="radioSmall">
  5.                 <radio checked class="radio1">单选项一</radio>
  6.                 <radio checked="false" class="radio2">单选项二</radio>
  7.             </radio-group>
  8.         </view>
  9.     </view>
  10. </view>
  1. .radioSmall {
  2.     transform: scale(0.7)
  3. }

:::