Radio button (RadioGroup)

Properties

RadioGroup

Property	Description	Type	Default value
value	The value of the RadioGroup, which determines which child element is checked.	string	-
radius	Specifies whether to apply rounded corners.	boolean	false
position	The layout direction.	'horizontal' | 'vertical'	'vertical'
uid	A unique identifier for the group, required when multiple RadioGroup components exist on a page. Must match the `uid` of its child RadioItem components.	string	-
header	The header text.	string	-
footer	The footer text.	string	-
disabled	Specifies whether to disable all items in the group.	boolean	false
className	The class name.	string	-

RadioItem

Property	Description	Type	Default value
value	The value of the radio item, used when submitting a native form or within a RadioGroup.	any	-
color	The color of the selected item. Accepts any valid CSS color value.	string	false
disabled	Specifies whether to disable the item.	boolean	false
icon	A custom icon for the unchecked state. Supports Icon components and image paths.	string	-
checkedIcon	A custom icon for the checked state. Supports Icon components and image paths.	string	-
disabledIcon	A custom icon for the disabled state. Supports Icon components and image paths.	string	-
disabledCheckedIcon	A custom icon for the disabled and checked state. Supports Icon components and image paths.	string	-
uid	A unique identifier that links this item to a RadioGroup. Must match the `uid` of the parent RadioGroup component.	string	-
className	The class name.	string	-

Events

RadioGroup

Event name	Description	Type
onChange	Triggered when the selected item changes.	(value) => void

Slots

RadioGroup

Slot name	Description
header	The header text.
footer	The footer text.

Style classes

RadioGroup

Class name	Description
amd-radio-group	The overall style.
amd-radio-group-header	The style for the header area.
amd-radio-group-body	The style for the radio-group area.
amd-radio-group-footer	The style for the footer area.

RadioItem

Class name	Description
amd-radio-item-wrap	The overall style.
amd-radio-item-base	The style for the radio component.
amd-radio-item-fake	The style for the radio component in the checked state.

Code examples

Basic usage

The following code shows an example of the `index.axml` file:

<view>
  <demo-block title="Basic Usage">
    <radio-group  
      value="Option 2"
      uid="basic"
      onChange="handleChange">
      <radio-item a:for="{{list}}" value="{{item.value}}" uid="basic">{{item.label}}</radio-item >
    </radio-group>
  </demo-block>
  <demo-block title="Horizontal Layout">
    <radio-group  
      value="Option 2"
      uid="horizontal"
      position="horizontal"
      onChange="handleChange">
      <radio-item a:for="{{list}}" value="{{item.value}}" uid="horizontal">{{item.label}}</radio-item >
    </radio-group>
  </demo-block>
  <demo-block title="Contains Disabled Items">
    <radio-group  
      uid="basic1"
      value="banner"
      onChange="handleChange">
      <radio-item a:for="{{list}}" value="{{item.value}}" uid="basic1" disabled="{{index===1}}">{{item.label}}</radio-item >
    </radio-group>
  </demo-block>
  <demo-block title="Disable All">
    <radio-group  
      uid="basic2"
      value="banner"
      disabled>
      <radio-item a:for="{{list}}" value="{{item.value}}" uid="basic2">{{item.label}}</radio-item >
    </radio-group>
  </demo-block>
</view>

The following code shows an example of the `index.js` file:

Page({
  data: {
    list: [
      { value: 'apple', label: 'Apple' },
      { value: 'orange', label: 'Orange' },
      { value: 'banana', label: 'Banana' },
    ],
  },
  handleChange(e) {
    console.log(e);
  },
});

The following code shows an example of the `index.acss` file:

.btns {
  display: flex;
  padding: 0 24rpx 24rpx;
  justify-content: space-between;
}

.btns button {
  flex: 1;
  margin-right: 12rpx;
}

.btns button ~button {
  margin-right: 0;
  margin-left: 12rpx;
}

The following code shows an example of the `index.json` file:

{
  "defaultTitle": "RadioGroup",
  "usingComponents": {
    "radio-group": "antd-mini/es/RadioGroup/index",
    "radio-item": "antd-mini/es/RadioGroup/RadioItem/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}