Input

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

<ins-input></ins-input>

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

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

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

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

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

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

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

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

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

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

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

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

<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>

<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>