支付宝小程序扩展表单 单选框·AMRadio

单选框。具体用法和小程序框架中 radio 保持一致，在 radio 基础上做了样式的封装。

扫码体验

示例代码

{
 "defaultTitle": "am-radio",
 "usingComponents": {
   "am-radio": "mini-ali-ui/es/am-radio/index",
   "list": "mini-ali-ui/es/list/index",
   "list-item": "mini-ali-ui/es/list/list-item/index"
 }
}
<view class="page">
 <view class="page-description">单选框</view>
 <view class="page-section">
   <view class="section section_gap">
     <form onSubmit="onSubmit" onReset="onReset">
       <view class="page-section-demo">
         <radio-group class="radio-group" onChange="radioChange" name="lib">
           <label class="radio" a:for="{{items}}" key="label-{{index}}">
             <am-radio value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
             <view style="display:inline-block;">{{item.desc}}</text>
           </label>
         </radio-group>
       </view>
       <view class="page-section-demo">
         <radio-group class="radio-group" onChange="radioChange" name="lib">
           <label class="radio" a:for="{{items1}}" key="label-{{index}}">
             <am-radio value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
             <view style="display:inline-block;">{{item.desc}}</text>
           </label>
         </radio-group>
       </view>
     </form>
   </view>
 </view>
</view>
.radio {
 display: flex; align-items: center;
}
.page-section-demo {
 padding: 24rpx;
}
Page({
 data: {
   items: [
     { checked: true, disabled: false, value: 'a', desc: '单选框-默认选中', id: 'checkbox1' },
     { checked: false, disabled: false, value: 'b', desc: '单选框-默认未选中', id: 'checkbox2' },
   ],
   items1: [
     { checked: true, disabled: true, value: 'c', desc: '单选框-默认选中disabled', id: 'checkbox3' },
   ],
 },
 radioChange() {
 },
});

属性