Input
Input Fields are used for freeform data entry.
Attributes
| attribute: | type: | required? | default: | description: |
|---|---|---|---|---|
| name | string | yes |
|
Name of the embedded |
| value | string | no |
|
Input value (this attribute can be used to set & get the input value) |
| icon | string | no | Name of embedded icon |
|
| type | string | no |
text
|
Type of input (can be 'text', 'password', 'email', 'url', 'tel', 'number' or 'search') |
| placeholder | string | no |
|
Input placeholder |
| maxlength | integer | no |
|
Specifies the maximum number of characters (in UTF-16 code units) that the user can enter |
| disabled | boolean | no |
false
|
|
| readonly | boolean | no |
false
|
|
| error | boolean | no |
false
|
Set error state |
Methods
setValue(value)
Set value
| param: | type: | default: | description: |
|---|---|---|---|
| value | string |
getValue()
Get current value of input
inputFocus()
Focus on the input field
Events
inputfocus
Fired when the input field receives focus.
inputblur
Fired when focus is removed from the input field.
inputchanged
Fired when input value changes (debounced event).
clear
Fired when the input field is cleared (by clicking x)
Examples
Regular Input
<dl-input name="name[]" placeholder="placeholder text"></dl-input>
<dl-input name="name[]" placeholder="placeholder text" value="default value"></dl-input>
<dl-input name="name[]" error value="error state"></dl-input>
<dl-input name="name[]" value="disabled input" disabled></dl-input>Input with Icon
<dl-input icon="vc-search" name="name[]" placeholder="placeholder text"></dl-input>
<dl-input icon="events-city" name="name[]" placeholder="placeholder text" value="default value"></dl-input>
<dl-input icon="security-key" name="name[]" error value="error state"></dl-input>Input with Label
<div class="dl-field">
<label>Label Text</label>
<div>
<dl-input name="name[]" placeholder="placeholder text"></dl-input>
</div>
</div>