Skip to content
An input with data binding
HTML
Branch: master
Clone or download
This branch is 1 commit ahead, 110 commits behind PolymerElements:master.

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
demo
test
.gitignore
.travis.yml
CONTRIBUTING.md
README.md
bower.json
hero.svg
index.html
iron-input.html

README.md

Build status

Demo and API docs

<iron-input>

<iron-input> adds two-way binding and custom validators using Polymer.IronValidatorBehavior to <input>.

Two-way binding

By default you can only get notified of changes to an input's value due to user input:

<input value="{{myValue::input}}">

iron-input adds the bind-value property that mirrors the value property, and can be used for two-way data binding. bind-value will notify if it is changed either by user input or by script.

<input is="iron-input" bind-value="{{myValue}}">

Custom validators

You can use custom validators that implement Polymer.IronValidatorBehavior with <iron-input>.

<input is="iron-input" validator="my-custom-validator">

Stopping invalid input

It may be desirable to only allow users to enter certain characters. You can use the prevent-invalid-input and allowed-pattern attributes together to accomplish this. This feature is separate from validation, and allowed-pattern does not affect how the input is validated.

<!-- only allow characters that match [0-9] -->
<input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]">
You can’t perform that action at this time.