Ember-radio-button NPM

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

ember-radio-button version	supports
3.x	Ember 3.16+
2.x	Ember 2.8+
1.x	Ember 1.11+

Properties

Required:

name	type	description
value	any	the unique value represented by the radio button
groupValue	any	the value representing a radio group's current value. supply the same `groupValue` to every radio-button in a group

Optional:

name	type	description
ariaDescribedby	string	applies an `aria-describedby` attribute to the input element
ariaLabelledby	string	applies an `aria-labelledby` attribute to the input element
autofocus	boolean	applies the `autofocus` property to the input element
checkedClass	string	classname to apply to the `label` element when the input it wraps is checked. block form only. defaults to `"checked"`
classNames	string	applies additional classnames to the `label` element (block form only)
disabled	boolean	applies the `disabled` property to the input element
name	string	applies the `name` property to the input element
radioClass	string	applies additional classnames to the input element
radioId	string	sets the `id` of the input element and the `for` property to the label element
required	boolean	applies the `required` property to the input element
tabindex	number	applies a `tabindex` property to the input element