All Products
Search
Document Center

radio

Last Updated: Apr 19, 2021

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 Color - The radio color. 1.10.0

Illustration

Code sample

 
  1. <radio-group class="radio-group" onChange="radioChange">
  2. <label class="radio" a:for="{{items}}">
  3. <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  4. </label>
  5. </radio-group>
 
  1. Page({
  2. data: {
  3. items: [
  4. {name: 'angular', value: 'AngularJS'},
  5. {name: 'react', value: 'React', checked: true},
  6. {name: 'polymer', value: 'Polymer'},
  7. {name: 'vue', value: 'Vue.js'},
  8. {name: 'ember', value: 'Ember.js'},
  9. {name: 'backbone', value: 'Backbone.js'},
  10. ]
  11. },
  12. radioChange: function(e) {
  13. console.log('You have selected this framework: ', e.detail.value)
  14. }
  15. })