Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer Paper-Radio-Group - how to have multiple radio buttons with the same name

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.

like image 266
Maloric Avatar asked Jul 23 '14 08:07

Maloric


People also ask

Can radio buttons have same name?

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.

How do I group radio buttons?

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.

What are similar to radio buttons?

The alternatives to radio buttons are checkboxes and drop down boxes.

What is button group in radio button?

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.


1 Answers

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.

like image 149
0Ds0 Avatar answered Oct 25 '22 16:10

0Ds0