3.0.2 • Published 9 years ago
paper-input v3.0.2
<PaperInput />
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. Thename
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 totrue
.large
: String. Optional. Adds a CSS class to increase the font size of the<input>
and<label>
.mustDisplayError
: Bool. Optional. Ensures that theerror
provided is displayed regardless of whether or not the component has been interacted with.onBlurCapture
: Function. Optional. Called on theblur
event on the<input>
.onChange
: Function. Optional. Called on thechange
event on the<input>
.onFocus
: Function. Optional. Called on thefocus
event on the<input>
.onKeyDown
: Function. Optional. Called on thekeydown
event on the<input>
.defaultValue
: String. Optional. See the docs on thedefaultValue
prop.placeholder
: String. Optional. Note that you should not setfloatLabel
tofalse
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
3.0.2
9 years ago
3.0.1
9 years ago
3.0.0
9 years ago
2.4.0
9 years ago
2.3.1
9 years ago
2.3.0
9 years ago
2.1.2
9 years ago
2.1.1
9 years ago
2.1.0
9 years ago
2.0.0
9 years ago
1.1.0
9 years ago
1.0.2
10 years ago
1.0.1
10 years ago
1.0.0
10 years ago
0.1.7
10 years ago
0.1.6
10 years ago
0.1.5
10 years ago
0.1.4
10 years ago
0.1.2
10 years ago
0.1.1
10 years ago
0.1.0
10 years ago