All Products
Search
Document Center

Mobile Platform as a Service:radio

Last Updated:Jul 29, 2022

This topic describes the single-choice selector, that is, radio.

This topic describes the single-choice selector, that is, radio.

radio-group

The single-choice selector group.

Attribute

Type

Default value

Description

Minimum version

onChange

EventHandle

-

Trigger when the selected item is modified, where event.detail = {value: The value of the selected radio item}

-

name

String

-

The component name, which is used to submit the form to obtain data.

-

radio

The single-choice item.

Attribute

Type

Default value

Description

Minimum version

value

String

-

The component value, which is the value carried by the change event when the component is selected.

-

checked

Boolean

false

Whether the item is currently selected.

-

disabled

Boolean

false

Whether to disable the button.

-

color

String

-

The radio color, which can be a color code like blue, or a hexadecimal color code like #0000FF.

1.10.0

Illustration

Code sample

<radio-group class="radio-group" onChange="radioChange">
  <label class="radio" a:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>
Page({
  data: {
    items: [
      {name: 'angular', value: 'AngularJS'},
      {name: 'react', value: 'React', checked: true},
      {name: 'polymer', value: 'Polymer'},
      {name: 'vue', value: 'Vue.js'},
      {name: 'ember', value: 'Ember.js'},
      {name: 'backbone', value: 'Backbone.js'},
    ]
  },
  radioChange: function(e) {
    console.log('You have selected this framework: ', e.detail.value)
  }
})