<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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”>

<template>
  <style>
    :host {
      display: block;
    }

    :host([invalid]) span {
      color: red;
    }

    #labelText {
      display: inline-block;
      width: 100px;
    }
  </style>

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