radio-button-component.js

radio-button-component.js

// {{ radio-button name='dish' value='spam' groupValue=selectedDish }} Spam
// {{ radio-button name='dish' value='eggs' groupValue=selectedDish }} Eggs
//
App.RadioButtonComponent = Ember.Component.extend({

  tagName: 'input',
  type: 'radio',
  attributeBindings: [ 'checked', 'name', 'type', 'value' ],

  checked: function () {
    return this.get('value') === this.get('groupValue');
  }.property('value', 'groupValue'),

  change: function () {
    this.set('groupValue', this.get('value'));
  }
});

templates-application.hbs

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

Nice but checked must be bound to an observer, not .property(). Also you should add an option to inject an action to be called when checked. My solution: https://gist.github.com/vasilakisfil/d055d9d2d9b56f684b42

Great work. This is exactly what I was looking for. Also, here is a CoffeeScript version of this gist.