Source Filter
A custom input field
Table of contents
-
Installation
-
Usage
-
Properties
-
Events
-
Changelog
Installation
CDN
<script src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />
NPM
npm i @ppci/custom-input
Usage
// Javascript import
import '@ppci/custom-input'
// or module import
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />
const onChange = (event) => {
const { name, value } = event.detail;
}
const onChangeDelayed = (event) => {
const { name, value } = event.detail;
}
<custom-input
name='firstname'
placeholder='First name'
@change="${onChange}"
@change-delayed='${onChangeDelayed}'>
</custom-input>
Properties
| Property |
Type |
Description |
Possible Values |
| name |
string |
Name of the input field. Which could be used in a form as field identifier. |
first name, surname, email, etc. |
| value |
string |
The value of the input field. |
|
| label |
string |
Label of the input field. Which is placed above the input field itself. |
|
| placeholder |
string |
Placeholder value. Visible when the input field is empty. |
|
Events
| Name |
Description |
Detail / Payload |
| @change |
Every time something changes on the input field this event is triggered.
The name and value of the input field are passed in the detail section of the event.
The value in the response reflects the current state of the input field.
</td>
<td>```{ name: 'firstname', value: 'p' }```</td>
|
| @change-delayed |
This is exactly like the change event. However, it's not triggered immediately after every
key change. It's delayed so that it could capture more than one key change.
This could be useful to prevent too many network requests on a search box.
</td>
<td>```{ name: 'firstname', value: 'powerpeers' }```</td>
|
Changelog
1.0.1 ( Patch )
1.0.0 ( Major )
- Initial version of the custom input field.