index.hbs

<Example::RadioInputForm
  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={{datum.imgSrc}}
      />
    {{/each}}
  </div>
</Example::RadioInputForm>

radio-input-form.hbs

<form>
  {{yield (hash
    RadioInput=(component
      'example/radio-input-form/radio-input'
      currentValue=this.currentValue
      onChange=this.onChange
    )
    currentValue=this.currentValue
  )}}
</form>

radio-input.hbs

<label
  class="
    relative w-24 h-24 mb-2 mr-3 cursor-pointer border-4
    {{if this.isCurrent "border-white" "border-transparent"}}
  "
  for={{@key}}
>
  <input
    type="radio"
    id={{@key}}
    value={{@value}}
    aria-label={{@label}}
    checked={{this.isCurrent}}
    aria-checked={{this.isCurrent}}
    {{on "change" (fn @onChange @value)}}
    class="w-0 h-0"
  />
  <img alt={{@key}} src={{@imgSrc}} class="absolute inset-0 object-cover w-full h-full"/>
  {{#if this.isCurrent}}
    <Icon @icon="ticked-check" @class="absolute w-6 h-6 text-white top-1 left-1"/>
  {{/if}}
</label>