ember-radio-button v2.0.1

ember-radio-button

This addon provides a radio-button component.

A radio-button will be in a checked state when the value property matches the groupValue property. value should be unique per radio-button, while the same groupValue should be provided to each radio-button in the group.

Clicking on a radio-button will set groupValue to its value.

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v12 or above

Usage

Block Form

The block form emits a label wrapping the input element and any elements passed to the block.

Template:

<RadioButton
  @value="blue"
  @groupValue=color
  @changed={{this.colorChanged}}
>
  <span>Blue</span>
</RadioButton>

/* results in */
<label id="ember346" class="ember-view ember-radio-button">
  <input id="ember347" class="ember-view" type="radio" value="blue">
  <span>Blue</span>
</label>

Non-block form

If you want more control over the DOM, the non-block form only emits a single input element

<RadioButton
  @value="green"
  @groupValue={{this.color}}
  @name="colors"
  @changed={{this.colorChanged}}
/>

/* results in */
<input id="ember345" class="ember-view" type="radio" value="green">

Examples in the test application

More example usage can be seen in the test application.

Supported Ember Versions

Properties

Required:

Optional:

Actions:

Installing

ember install ember-radio-button

Legacy Action Support

A string can be supplied for the changed property to enable legacy sendAction style action propagation.

Older versions of ember

ember-radio-button 1.0.0+ requires using htmlbars. Applications not using htmlbars should use version 0.1.3 or the pre-htmlbars branch.

Collaborating on this repo

• git clone <repository-url> this repository
• cd ember-radio-button
• npm install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.