Menu
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.
266
Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.
You group radio buttons by drawing them inside a container such as a Panel control, a GroupBox control, or a form. All radio buttons that are added directly to a form become one group. To add separate groups, you must place them inside panels or group boxes.
The alternatives to radio buttons are checkboxes and drop down boxes.
A radio button group is a container control that holds radio buttons. The radio button group defines the layout for the buttons it contains, including a group title, text alignment for button labels, and whether or not to show a border. You can place a radio button group control within a section control.
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.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
