radio-button-component.js

// {{ radio-button name='dish' value='spam' groupValue=selectedDish selectedAction='testAction' }} Spam
// {{ radio-button name='dish' value='eggs' groupValue=selectedDish }} Eggs
//
/*
import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  type: 'radio',
  attributeBindings: [ 'checked', 'name', 'type', 'value' ],
 
  checked: function () {
    if (this.get('value') === this.get('groupValue')) {
      Ember.run.once(this, 'takeAction'); //this actually fires 3 times :/
      return true;
    } else { return false; }
  }.observes('groupValue'),

  takeAction: function() {
    this.sendAction('selectedAction', this.get('value'));
  },
 
  change: function () {
    this.set('groupValue', this.get('value'));
  }
});
*/


import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  type: 'radio',
  attributeBindings: [ 'checked', 'name', 'type', 'value' ],
 
  checked: function () {
    if (this.get('value') === this.get('groupValue')) {
      Ember.run.once(this, 'takeAction');
      return true;
    } else { return false; }
  },

  takeAction: function() {
    this.sendAction('selectedAction', this.get('value'));
  },
 
  change: function () {
    this.set('groupValue', this.get('value'));
    Ember.run.once(this, 'checked'); //manual observer
  }
});

templates-application.hbs

{{ radio-button name='thing' value='one' groupValue=selection  selectedAction='testAction' }} One
{{ radio-button name='thing' value='two' groupValue=selection }} Two
Currently selected: {{ selection }}

Thanks @vasilakisfil. This was very helpful in a project I'm working on.
I experienced an issue where the checked attribute was not correctly being bound to the checked function.
This resulted to the last radio button always being the one visually selected.
The changes here seem to fix it.

What do you think of the approach?