Creating radio buttons or something similar

Design
5

What if you wrapped a <label> around the radio button instead? Then maybe use an inner <span> for extra styling to position it below the radio if needed. Based on the Bootstrap {{link-li}} component, I’ve created an {{input-label}} component to grab the checked status of the radio and apply the active class to the label element (not that you necessarily need that).

App.InputLabelComponent = Ember.Component.extend({
    tagName: 'label',
    classNameBindings: ['checked:active','disabled'],
    checked: function(){
        return this.get('childViews').anyBy('checked');
    }.property('childViews.@each.checked'),
    disabled: function(){
        return this.get('childViews').everyBy('disabled');
    }.property('childViews.@each.disabled')
});
1 Like