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.
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>