paper-input

Paper Input React component

Usage no npm install needed!

<script type="module">
  import paperInput from 'https://cdn.skypack.dev/paper-input';
</script>

README

<PaperInput />

Build Status

Check out a live demo at http://scienceai.github.io/paper-input

Install

npm install paper-input

Usage

import React from 'react';
import PaperInput from 'paper-input';

class MyComponent extends React.Component {
  // ... setup state and change handlers

  return (
    <PaperInput
      name='email'
      label='Email Address'
      type='email'
      floatLabel={true}
      error={this.state.error ? 'Please enter a valid email address' : ''}
      onChange={this.handleChange.bind(this)}
      value={this.state.email}
    />
  );
}

Using the CSS

With postcss-import or similar:

@import "paper-input";

API

The <PaperInput> component has the following internal structure:

<div class='paper-input'>
  <input />
  <label />
  <span class='border-line' /> <!-- animates a line on the bottom border of the input -->
  <span class='error' />
</div>

<PaperInput> accepts the following props:

  • label: String. Required. The label that will be displayed on the <input> element.
  • name: String. Required. The name attribute that will be attached to the <input> element.
  • className: String. Optional. This class will be added to the <div> wrapping the <input> element.
  • error: String. Optional. An error message that is displayed in the <span class='error'> below the <input>.
  • floatLabel: Boolean. Optional. Floats the <label> above the <input> when focused. Defaults to true.
  • large: String. Optional. Adds a CSS class to increase the font size of the <input> and <label>.
  • mustDisplayError: Bool. Optional. Ensures that the error provided is displayed regardless of whether or not the component has been interacted with.
  • onBlurCapture: Function. Optional. Called on the blur event on the <input>.
  • onChange: Function. Optional. Called on the change event on the <input>.
  • onFocus: Function. Optional. Called on the focus event on the <input>.
  • onKeyDown: Function. Optional. Called on the keydown event on the <input>.
  • defaultValue: String. Optional. See the docs on the defaultValue prop.
  • placeholder: String. Optional. Note that you should not set floatLabel to false if using a placeholder as it will overlap with the label.
  • type: String. Optional. Defaults to 'text'.
  • value: String. Optional.
  • autoFocus: Boolean. Automatically focused.
  • required: Boolean. Required field in a form.

Example

For a fuller example, visit the example/ directory.

npm run watch
open example/index.html

License

Apache-2.0