unclosed-element-workaround

components.my-fieldset.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.option-picker.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  options: [
    {
      value: 'option1',
      text: 'option 1',
      id: 'radio-option1',
      labelid: 'radio-option1-label'
    },
    {
      value: 'option2',
      text: 'option 2',
      id: 'radio-option2',
      labelid: 'radio-option2-label'
    }
   ] 
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{option-picker options=options legend="Plan" hasFieldset="false"}}
<br>
{{outlet}}
<br>
<br>

templates.components.my-fieldset.hbs

<div class="[ option-picker ]">
  {{#if hasFieldset}}
  <fieldset class="option-picker__fieldset">
    <legend class="option-picker__legend">{{ legend }}</legend>
    {{yield}}
  </fieldset>
  {{else}}
    {{yield}}
  {{/if}}
</div>

templates.components.option-picker.hbs

<div class="[ option-picker ]">
  {{#my-fieldset hasFieldset=hasFieldset}}
    <div class="option-picker__options">
      {{#each options as |option|}}
      <label class="[ radio-button ]">
      	<input type="radio" value=option.value class="radio-button__input" name="option" id=option.id aria-labelledby=option.labelid />
        <span class="radio-button__text" id=option.labelid>
          {{ option.text }}
        </span>
      </label>
      {{/each}}
    </div>
  {{/my-fieldset}}
</div>

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}