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

Asked 23/7, 2014 at 8:54 Answered 22/3, 2016 at 16:57

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.

Swagsman answered 23/7, 2014 at 8:54 Comment(0)

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.

Tankard answered 22/3, 2016 at 16:57 Comment(0)

If you want to use the paper elements as a drop-in replacement for form input fields without writing any JavaScript, than i think you cannot, because they are nothing more than styled divs.

The name attribute of a paper-radio-button is its value. The currently selected button is specified with the selected attribute of the paper-radio-group and can be bound to an element property. You can then either use an attribute watcher or access this value when you need it. If you give paper-radio-group an id, say radio, you can also get the selected item directly with this.$.radio.selected.

Here is a small example:

<!DOCTYPE html>
<html>

<head>
  <script src='http://www.polymer-project.org/components/platform/platform.js'></script>
  <link rel='import' href='http://www.polymer-project.org/components/paper-radio-group/paper-radio-group.html'>
</head>

<body unresolved>

  <polymer-element name="my-app">
    <template>
      <paper-radio-group selected="{{selection}}">
        <paper-radio-button name="small" label="Small"></paper-radio-button>
        <paper-radio-button name="medium" label="Medium"></paper-radio-button>
        <paper-radio-button name="large" label="Large"></paper-radio-button>
      </paper-radio-group>
    </template>
    <script>
      Polymer('my-app', {
        created: function () { 
          this.selection = "medium" 
        },
        selectionChanged: function () { 
          console.log(this.selection); 
        }
      });
    </script>
  </polymer-element>

  <my-app></my-app>

</body>
</html>

Mottle answered 23/7, 2014 at 10:18 Comment(0)

Recommended topics

Hot tags