Ember-Radio-Group Addon

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

Installation

ember install ember-radio-group

Usage

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.

Resulting Markup

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.

Properties

name	type	description
options	Object	Option object that make up your different buttons
checkedValue	string	Value of the checked option
groupId	string	Your ID for the radio group

Properties

name	description
changed	Fires whenever the option was changed

License

This project is licensed under the MIT License.