I'm using Paper Elements from the Polymer Project to build a form, and have run into a problem using the paper-radio-group tag and its children, paper-radio-button. With a normal radio button list, I would do the following:
<input type="radio" name="myFieldName" value="MyFirstOption" />
<input type="radio" name="myFieldName" value="MySecondOption" />
<input type="radio" name="myFieldName" value="MyThirdOption" />
Note that the name attributes are the same, grouping the radio buttons and producing a single value for the myFieldName field. However using the paper-radio-group element in the same way does not work:
<paper-radio-group label="My Field">
<paper-radio-button name="myFieldName" label="First"></paper-radio-button>
<paper-radio-button name="myFieldName" label="Second"></paper-radio-button>
<paper-radio-button name="myFieldName" label="Third"></paper-radio-button>
</paper-radio-group>
This produces three radio buttons, but selecting one doesn't deselect the others. If I give each a unique name then it works from a UI perspective, but is different than the standard radio button behaviour.
In addition to this, where do I specify the value for each radio button? There is a label property, but nothing for value. Am I going to have to wire up a hidden field to the change event of the paper-radio-button, or the core-select event on the paper-radio-group? Neither seems like a particularly elegant solution.
This question is quite old and probably the property did not exist at the time, but at least now a days we can have the same name attribute in paper-radio-buttons that belong to a paper-radio-group if we select a different attr-for-selected in the paper-radio-group for example value
<paper-radio-group attr-for-selected="value">
<paper-radio-button value="one" name="same_name">Label for one</paper-radio-button>
<paper-radio-button value="two" name="same_name">Label for two</paper-radio-button>
</paper-radio-group>
Leaving my answer here as this was the hit i get while googling and might be of value to others.