radio

radio-group

Radio selector group.

Property

TypeDescription
onChangeEventHandleTrigger on change of selected item, event.detail = {value: Selected radio value}.
name StringComponent name, used for form submission of obtained data.

radio

Radio item

Property

TypeDefaultDescription
valueStringComponent value, value carried in change event when selected.
checkedBooleanfalseSelected or not currently.
disabledBooleanfalseDisable or not.
colorColorRadio color.

Screenshot

image

Sample Code

copy
<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>
copy
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 are selecting the framework:', e.detail.value)
  }
})