How do I add data attributes to radio-button ?

[pRatikSathaye]

I want to use data-test-selectors and for that purpose I wanted to add data attributes to my radio button. I tried adding some data attributes but they did not work.

[raycohen]

We don't currently have a good way to support data-test attributes directly on the input element. I would recommend putting a data-test attribute on an ancestor and then using something like [data-test-my-ancestor] input[type=radio]

[shankarsridhar]

Hello @raycohen 😃 I am also running into the same issue in my applications, and I find it more less than ideal and, more like a workaround to be adding data-* attributes to the parent and referring the child element(i.e. radio-button).

I'll be happy to send a PR for adding this enhancement. I was thinking of adding a new property, say dataAttributes which accepts an hash of data-* key/value pairs, which gets added to the radio buttons' dom - just like the other attributes that is being done currently, like ariaLabelledby, tabindex, etc

[barryofguilder]

I would love to see support for data-* attributes on this!

[alexlafroscia]

What would really be nice is if the components supported attribute forwarding (AKA splattributes, ...attributes in the template).

Depending on the Ember version support matrix and the tolerance for either providing or requiring a polyfill, that would allow you to add whatever attribute you want to a <RadioButton /> component and have the attributes passed along to the underlying input.

[allthesignals]

What would really be nice is if the components supported attribute forwarding (AKA splattributes, ...attributes in the template).

Depending on the Ember version support matrix and the tolerance for either providing or requiring a polyfill, that would allow you to add whatever attribute you want to a <RadioButton /> component and have the attributes passed along to the underlying input.

Hmm know any addons that use this kind of polyfill? I'm running into this and would like to submit a PR.

~I'd try out a local workaround, but it doesn't sound like this is extensible.~

Never mind — if you're using modern Ember (support splattributes), you can generate a component override for radio-button.js/.hbs. You'll need to copy over the template from the addon and insert the attribute spread in the label:

  <label
    class="ember-radio-button {{if checked checkedClass}} {{joinedClassNames}}"
    for={{radioId}}
    ...attributes
  >

Nevertheless, we should build out support :)

[lougreenwood]

Any progress on this? Seems it's not possible to apply a modifier to the radio button