3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
11 <link rel=
"import" href=
"../polymer/polymer.html">
12 <link rel=
"import" href=
"../iron-selector/iron-selector.html">
13 <link rel=
"import" href=
"../paper-radio-button/paper-radio-button.html">
14 <link rel=
"import" href=
"../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
17 `paper-radio-group` allows user to select only one radio button from a set.
18 Checking one radio button that belongs to a radio group unchecks any
19 previously checked radio button within the same group. Use
20 `selected` to get or set the selected radio button.
24 <paper-radio-group selected="small">
25 <paper-radio-button name="small" label="Small"></paper-radio-button>
26 <paper-radio-button name="medium" label="Medium"></paper-radio-button>
27 <paper-radio-button name="large" label="Large"></paper-radio-button>
30 See <a href="paper-radio-button.html">paper-radio-button</a> for more
31 information about `paper-radio-button`.
34 @element paper-radio-group
39 <dom-module name=
"paper-radio-group">
42 display: inline-block;
45 iron-selector ::content
> * {
51 <iron-selector selected=
"{{selected}}" attr-for-selected=
"name"
52 selectable=
"paper-radio-button">
53 <content id=
"items" select=
"*"></content>
61 is
: 'paper-radio-group',
64 Polymer
.IronA11yKeysBehavior
74 * Fired when the selected element changes to user interaction.
76 * @event paper-radio-group-changed
80 * Gets or sets the selected element. Use the `name` attribute of the
81 * <paper-radio-button> that should be selected.
92 reflectToAttribute
: true,
93 observer
: "_selectedChanged"
98 'left up': '_selectPrevious',
99 'right down': '_selectNext',
102 _selectedChanged: function() {
103 // TODO: This only needs to be async while a domReady event is unavailable.
104 this.async(function() {
105 this._selectIndex(this._valueToIndex(this.items
, this.selected
));
106 this.fire('paper-radio-group-changed');
110 _selectNext: function() {
111 this.selected
= this._nextNode();
114 _selectPrevious: function() {
115 this.selected
= this._previousNode();
119 * Returns an array of all items.
125 return Polymer
.dom(this.$.items
).getDistributedNodes();
128 _nextNode: function() {
129 var items
= this.items
;
130 var index
= this._selectedIndex
;
131 var newIndex
= index
;
133 newIndex
= (newIndex
+ 1) % items
.length
;
134 if (newIndex
=== index
) {
137 } while (items
[newIndex
].disabled
);
138 return this._valueForNode(items
[newIndex
]);
141 _previousNode: function() {
142 var items
= this.items
;
143 var index
= this._selectedIndex
;
144 var newIndex
= index
;
146 newIndex
= (newIndex
|| items
.length
) - 1;
147 if (newIndex
=== index
) {
150 } while (items
[newIndex
].disabled
);
151 return this._valueForNode(items
[newIndex
]);
154 _selectIndex: function(index
) {
155 if (index
== this._selectedIndex
)
158 var nodes
= this.items
;
160 // If there was a previously selected node, deselect it.
161 if (nodes
[this._selectedIndex
]) {
162 nodes
[this._selectedIndex
].checked
= false;
165 // Select a new node.
166 nodes
[index
].checked
= true;
167 nodes
[index
].focus();
168 this._selectedIndex
= index
;
171 _valueForNode: function(node
) {
172 return node
["name"] || node
.getAttribute("name");
175 // Finds an item with value == |value| and return its index.
176 _valueToIndex: function(items
, value
) {
177 for (var index
= 0, node
; (node
= items
[index
]); index
++) {
178 if (this._valueForNode(node
) == value
) {
182 // If no item found, the value itself is probably the index.