Name:

Email:

Input Errors

Address

Icons

Name person

Template

<div class="layout layout-sm-column">
  <PaperInput @class="flex-30" @label="Name" @placeholder="Enter name" @value={{this.name}} @onChange={{fn (mut this.name)}} />
  <PaperInput @class="flex-30" @label="E-mail" @type="email" @value={{this.email}} @onChange={{fn (mut this.email)}} />
  <PaperInput @class="flex-40" @label="Password" @type="password" @value={{this.password}} @onChange={{fn (mut this.password)}} />
</div>
<div class="layout layout-sm-column">
  <PaperInput @class="flex" @label="Submission date" @type="date" @value={{this.date}} @onChange={{fn (mut this.date)}} />
  <PaperInput @class="flex" @label="Company (disabled)" @type="text" @value="Google" @disabled={{true}} @onChange={{fn (mut this.foo)}} />
</div>

<PaperInput @textarea={{true}} @block={{true}} @label="Biography" @maxlength={{150}} @passThru={{hash rows=5 maxRows=5}} @value={{this.biography}} @onChange={{fn (mut this.biography)}} />
<p>Name: {{this.name}}</p>
<p>Email: {{this.email}}</p>

<h3>Input Errors</h3>
<p>
  <PaperInput @label="Address" @value={{this.address}} @onChange={{fn (mut this.address)}} @required={{true}} @errorMessages={{hash
      required="Address is required."
    }} />
  <PaperInput @type="number" @label="Maximum Value" @value={{this.maxNumber}} @onChange={{fn (mut this.maxNumber)}} @max="5" @errorMessages={{hash
      max="Enter 5 or less."
    }} />
  <PaperInput @type="number" @label="Minimum Value" @value={{this.minNumber}} @onChange={{fn (mut this.minNumber)}} @min="1" @errorMessages={{hash
      min="Enter at least 1."
    }} />
  <PaperInput @label="Maximum Character Length" @value={{this.maxLength}} @onChange={{fn (mut this.maxLength)}} @required={{true}} @maxlength={{10}} @errorMessages={{hash
      maxlength="Maximum length exceeded."
    }} />
  <PaperInput @label="All Constraints" @value={{this.allConstraints}} @onChange={{fn (mut this.allConstraints)}} @required={{true}} @min="2" @max="10" @maxlength="2" @errorMessages={{hash
      maxlength="Max length exceeded."
    }} />
  <PaperInput @label="Required asterisk only" @value={{this.requiredStyle}} @onChange={{fn (mut this.requiredStyle)}} @required="style" />
</p>

<h3>Icons</h3>
<p>
  <PaperInput @label="Name" @value={{this.name}} @onChange={{fn (mut this.name)}} @icon="person" />
  <PaperInput @placeholder="Phone Number" @type="text" @value={{this.user.phone}} @onChange={{fn (mut this.user.phone)}} @icon="phone" />
  <PaperInput @label="Email (no messages)" @type="email" @value={{this.user.email}} @onChange={{fn (mut this.user.email)}} @icon="email" @required={{true}} @hideAllMessages={{true}} />
  <PaperInput @placeholder="Address" @type="text" @value={{this.user.address}} @onChange={{fn (mut this.user.address)}} @icon="place" />
  <PaperInput @label="Name on right" @type="text" @value={{this.name2}} @onChange={{fn (mut this.name2)}} @iconRight="person" />
</p>

About Required. Note that required, when set to true both causes the input element to be validated to contain a value and causes the label to be styled with a required asterisk (*). If only the asterisk styling is desired, such as when using external validation mesages, use required="style". To set the html5 required attributed on the input element itself, use the passThru option, setting required="required" as described below.

Input Attributes

These additional attributes will be passed through to the input helper inside of paper-input. See the Ember Input Helpers for more information. This is an example of using one of the attributes.

Number of bagels

<PaperInput @value={{this.numberTest}} @onChange={{fn (mut this.numberTest)}} @label="Number of bagels" @type="number" @passThru={{hash min="0" step="13" }} />

Available Attributes for Text Fields

accept, autocomplete, autosave, form, formaction, formenctype, formmethod, formnovalidate, formtarget, inputmode, maxlength, min, max, multiple, name, pattern, required, selectionDirection, size, spellcheck, step, tabindex, and width.

Available Attributes for Text Areas

cols, form, maxlength, name, readonly, required, rows, selectionDirection, selectionEnd, selectionStart, spellcheck, tabindex, and wrap.

Actions

You may also pass through an action closures to receive notification upon onFocus, onBlur, onKeyDown and onChange.

Event demonstration

<PaperInput @label="Event demonstration" @value={{this.eventTest}} @onChange={{fn (mut this.eventTest)}} @onFocus={{this.focusReceived}} @onBlur={{this.blurReceived}} @onKeyDown={{this.keyDownReceived}} />

Input Text Helpers

You can pass in a helper text to the paper-input's block. Some useful properties are yieled to the block to help you conditionally render the text.

<PaperInput @value={{this.emailValue}} @onChange={{fn (mut this.emailValue)}} @label="Email" @type="email" as |input|>
  {{#unless input.hasValue}}
    <div class="hint">How can we reach you?</div>
  {{/unless}}
</PaperInput>

Custom Validations

In addition to required, min, max, and maxlength, you may define your own custom validations. Custom validations are defined by an object with two attributes, message and validate. You may bind a single validation object, or an array of validation objects.

Here is an example of validating the input value matches typical email formats.

E-mail

Template

<PaperInput @label="E-mail" @type="email" @value={{this.customemail}} @onChange={{fn (mut this.customemail)}} @customValidations={{this.emailValidation}} />

Define your emailValidation object in your controller.

emailValidation = [
  {
    message: 'Please provide email in a valid format',
    validate: (inputValue) => {
      let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      return emailPattern.test(inputValue);
    },
  },
];

You may also define multiple custom constraints by using an array of validation objects.

Value should be even and equal 4.

<PaperInput @class="md-block" @label="Value should be even and equal 4." @type="email" @value={{this.customMultiple}} @onChange={{fn (mut this.customMultiple)}} @customValidations={{this.multipleConstraints}} />

multipleConstraints = [
  {
    message: 'Value is not even',
    validate: (inputValue) => +inputValue % 2 === 0,
  },
  {
    message: 'Value does not equal 4',
    validate: (inputValue) => +inputValue === 4,
  },
];

Setting validation messages from external validations

While {{paper-input}} supplies four built-in validation rules and the ability to specify programmed custom validations, some projects need more complicated and elaborate validations, such as are provided by ember-cp-validations or another validation add-on. In this case, the code to validate the user input is outside of paper-input, and only the resulting messages need be provided to the {{paper-input}} helper.

Template

<PaperCard as |card|>
  <card.content>
    <div class="layout layout-sm-row">
      <PaperInput @class="flex-50" @label="User name" @value={{this.model.username}} @onChange={{fn (mut this.model.username)}} @errors={{this.usernameValidator}} />
    </div>
    <div class="layout layout-sm-row">
      <PaperInput @label="Password" @class="flex-34" @type="password" @value={{this.model.password}} @onChange={{fn (mut this.model.password)}} @errors={{this.passwordValidator}} />
      <PaperInput @label="E-mail" @class="flex-33" @type="email" @value={{this.model.email}} @onChange={{fn (mut this.model.email)}} @errors={{this.emailValidator}} />
      <PaperInput @label="Retype your e-mail" @class="flex-33" @type="email" @value={{this.model.emailConfirmation}} @onChange={{fn (mut this.model.emailConfirmation)}} @errors={{this.emailConfirmationValidator}} />
    </div>
  </card.content>
</PaperCard>

The errors argument can either be an array of messages or an array of hashes, each with a message property and an optional attr property, which indentifies the type of error for possible theming or other use. The latter format is compatible with errors from ember-data.