// Javascript importimport'@ppci/custom-input'// or module import<scripttype="module"src="http://developer.powerpeers.com/social/1.0.0/custom-input.js"/>constonChange=(event)=>{const{ name, value }=event.detail;}constonChangeDelayed=(event)=>{const{ name, value }=event.detail;}<custom-inputname='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>