1 | radio-input-form-flexible.hbs

<form>
  {{yield (hash
    RadioInput=(component
      'example/radio-input-form/radio-input'
      currentValue=this.currentValue
      onChange=this.onChange
    )
    Submit=(component
      'example/radio-input-form/button'
      disabled=(not this.currentValue)
      onClick=this.onSubmit
    )
    currentValue=this.currentValue
  )}}
</form>

2 | radio-input-form-flexible.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

import { action } from '@ember/object';

export default class RadioInputFormFlexible extends Component {
  @tracked currentValue = null;

  @action
  onChange(value) {
    this.currentValue = value;
  }

  @action
  onSubmit() {
    window.alert(this.currentValue);
  }
}

3 | button.hbs

<button
  type="button"
  disabled={{@disabled}}
  class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs leading-4 font-medium rounded text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150 {{if @disabled "cursor-not-allowed"}}"
  {{on "click" @onClick}}
>
  {{yield}}
</button>

4 | index.hbs

<div>
  Ember.js Component Patterns - Flexible Compound Component
</div>
<Example::RadioInputFormFlexible
  as |rif|
>
  <div>
    Parent Value:
    <span class="font-semibold text-white">
      {{rif.currentValue}}
    </span>
  </div>
  <div class="flex flex-wrap">
    {{#each this.data as |datum|}}
      <rif.RadioInput
        @label={{datum.label}}
        @value={{datum.value}}
        @name={{datum.label}}
        @imgSrc={{datum.imgSrc}}
        @key={{concat 'flex-' datum.imgSrc}}
      />
    {{/each}}
  </div>
  {{!-- we are just adding a Submit here --}}
  <div class="flex justify-center">
    <rif.Submit>
      Submit
    </rif.Submit>
  </div>
</Example::RadioInputFormFlexible>