Insites Docs Web Components V1Data EntryInput

Input

Last updated on August 02, 2024.

Element: <insites-input>

Defines an input field where user can enter data.

Complete Example

Code Snippet

<ins-input
  placeholder="Email"
  value="john@gmail.com"
  label="Email"
  field="email"
  icon="icon-mail">
</ins-input>
Default State

Code Snippet

<ins-input></ins-input>
Direct Set Data

Code Snippet

<ins-input id="dsv"></ins-input>
<script>
  var dsv = document.getElementById('dsv');
  dsv.addEventListener('didLoad', function(e){
    dsv.placeholder = 'Direct Set Value';
  });
</script>
Static Data Source

Code Snippet

<ins-input
  value="John Smith"
  label="Name">
</ins-input>
Disabled State

Code Snippet

<ins-input
  value="samplepassword123"
  label="Password"
  field="password"
  disabled>
</ins-input>
Read-Only State

Code Snippet

<ins-input
  value="samplepassword123"
  label="Password"
  field="password"
  readonly>
</ins-input>
Error State

Code Snippet

<ins-input
  placeholder="Email"
  value="a sample text"
  label="Email"
  field="email"
  error-message="Please provide valid email address."
  has-error>
</ins-input>
Password

Code Snippet

<ins-input
  placeholder="Password"
  label="Password"
  field="password"
  icon="icon-lock">
</ins-input>
Number

Code Snippet

<ins-input
  placeholder="Enter Number"
  label="Number"
  field="number"
  min="1"
  max="100"
  step="5">
</ins-input>
Value Attribute

Code Snippet

<ins-input value="Value Change"></ins-input>
Placeholder Attribute

Code Snippet

<ins-input placeholder="Placeholder Attribute"></ins-input>
Icon Attribute

Code Snippet

<ins-input icon="icon-mail"></ins-input>
Label Attribute

Code Snippet

<ins-input label="Name"></ins-input>
Field Attribute

Code Snippet

<ins-input field="password"></ins-input>
Event - oninput

Code Snippet

<ins-input 
  id="oninput" 
  placeholder="Email" 
  label="Email" 
  field="email" 
  icon="icon-mail">
</ins-input>

<p id="demo"></p>

<script>
  const oninput = document.getElementById('oninput')
  oninput.addEventListener('oninput', event => {
    console.log(event.detail.value);
    console.log(event.detail.keyCode);
    document.getElementById("demo").innerHTML = event.detail.value;
  });
</script>
Event - valueChange

Code Snippet

<ins-input
  id="valueChange"
  placeholder="Email"
  label="Email"
  field="email"
  icon="icon-mail">
</ins-input>

<p id="demo2"></p>

<script>
  const valueChange = document.getElementById('valueChange')
  valueChange.addEventListener('valueChange', event => {
    console.log(event.detail);
    document.getElementById("demo").innerHTML = event.detail;
  });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
placeholder string "" any Defines the short hint that describes the expected value in the input field
value string "" any Defines value of input field
label string "" any Defines label of input field
name string "" any Defines name of input field
field string "text" email, number, password, text, search Defines the type input element to display
field-id string "" any Defines field id of input field
error-message string "" any Defines the error message when input element is wrong
maxlength string "" any Defines max length of characters accepted in input field
min string "" any Defines min attribute value of the input field (for field type number)
max string "" any Defines max attribute value of the input field (for field type number)
step string "" any Defines increment value of the input field (for field type number)
required boolean false true, false Specifies that the input field must be filled out before submitting the form
icon string "" icon-close-1, icon-utilities, icon-lock-1 ... Defines icon of input field
icon-event boolean false true/false Defines if field icon has mouse event.
icon-title string "" any Defines title of the field icon. Shown when icon is hovered.
disabled boolean false true, false Disables input field
readonly boolean false true, false Specifies that the input field is read-only
has-error boolean false true, false Specifies validation or mandatory input for the input field
activated boolean false true, false Displays activated state of input field

 

Event

 

EVENT OBJECT DESCRIPTION
oninput value, keycode Execute a script when an element gets user input
valueChange value Returns value when an element gets user input
onblur value, keycode Emit field value and keycode on input blur event
onIconClick target, value Emit the field and value when field icon is clicked

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.