<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../../polymer/polymer.html"> <link rel="import" href="../../paper-button/paper-button.html"> <link rel="import" href="../iron-checked-element-behavior.html"> <dom-module id="simple-checkbox"> <style> :host { display: block; } :host([invalid]) span { color: red; } #labelText { display: inline-block; width: 100px; } </style> <template> <input type="checkbox" id="checkbox" on-tap="_onCheckTap"> <span id="labelText">{{label}}</span> <paper-button raised on-click="_onClick">validate</paper-button> </template> <script> Polymer({ is: 'simple-checkbox', behaviors: [ Polymer.IronCheckedElementBehavior ], properties: { label: { type: String, value: 'not validated' } }, _onCheckTap: function() { this.checked = this.$.checkbox.checked; }, _onClick: function() { this.validate(); this.label = this.invalid ? 'is invalid' : 'is valid'; } }); </script> </dom-module>