An Ember Radiogroup addon widget based on the WAI-ARIA authoring practices.

ember install ember-radio-group

Inline:

{{radio-group
  options=model
  groupId="radiogroup-1"
  labelText="Radio Group Inlinelabel"
  checkedValue="value-2"
  changed=(action "changedEvent")
}}

Block:

{{!-- Block will be rendered as the radio-group label --}}
{{#radio-group
  options=model
  groupId="radiogroup-2"
  checkedValue="value-2"
  changed=(action "changedEvent")
}}
  Radio Group Blocklabel
{{/radio-group}}

For the group options, the radio-group component expects an array of objects containing a label/value pair. You can define these in plain Javascript inside your Route or Controller as:

[
  {
    label: "label 1",
    value: "value-1"
  },
  {
    label: "label 2",
    value: "value-2"
  }
]

Usually, you want your values to correspond to your model/changeset options so you can react to changes via the changed-event.

The simplified version of the resultig markup is:

<!-- additional HTML-attributes ommited for clarity -->
<div class="radiogroup" ...>
  <div class="radiogroup__label" ...>...</div>

  <div class="radiogroup__buttons">
    <div class="radiogroup__radio" ...>...</div>
    <div class="radiogroup__radio" ...>...</div>
    ...
  </div>
</div>

now you can style your radio buttons as before/after elements of each radiogroup_radio and don't have to worry about overwriting some browser-native input element.

This project is licensed under the MIT License.