iron-validatable-behavior | Vaadin

Implements an element validated with Polymer.IronValidatorBehavior

Published on NPM Build status Published on


Use IronValidatableBehavior to implement an element that validates user input. By using this behaviour, your custom element will get a public validate() method, which will return the validity of the element, and a corresponding invalid attribute, which can be used for styling. Can be used alongside an element implementing the IronValidatableBehavior behaviour.

See: Documentation, Demo.



npm install --save @polymer/iron-validatable-behavior

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';

class SampleElement extends mixinBehaviors([IronValidatableBehavior], PolymerElement) {
  static get template() {
    return html`
        :host {
          border: 1px solid green;
          color: green;
        :host([invalid]) {
          border: 1px solid red;
          color: red;
      <input id="input">

    // Override this method if you want to implement custom validity
    // for your element. This element is only valid if the value in the
    // input is "cat".
    function _getValidity() {
      return this.$.input.value === 'cat';
customElements.define('sample-element', SampleElement);

In an html file using the element

    <script type="module" src="./sample-element.js"></script>
    <sample-element id="el"></sample-element>
    <button onclick="el.validate()">Validate!</button>


If you want to send a PR to this element, here are the instructions for running the tests and demo locally:


git clone
cd iron-validatable-behavior
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm

Running the tests

polymer test --npm


Link to this version
ImportedReleased 14 September 2018BSD 3-clause "New" or "Revised" License
Framework Support
Polymer 1.0+
Polymer 3.0+
Also supported:
Polymer 2 (2.1.0)
Browser Compatibility
Install with
npm install @polymer/iron-validatable-behavior"@3.0.1"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 3.0.1


  • @polymer/iron-meta#^3.0.0-pre.26
  • @polymer/polymer#^3.0.0