radio

2021-02-26 08:06

radio-group

Radio selector group.

Attribute Name	Type	Default	Description	Minimum Version
onChange	EventHandle		trigger on change of selected item, event.detail = {value: Selected radio value}
name	String		component name, used for form submission of obtained data

radio

Radio item

Attribute Name	Type	Default	Description	Minimum Version
value	String		component value, value carried in change event when selected
checked	Boolean	false	selected or not currently
disabled	Boolean	false	disable or not
color	Color		radio color

Screenshot

radio

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)
  }
})