Input

<ins-input field="color" label="Pick a color"></ins-input>

<ins-input
  placeholder="Email"
  value="john@gmail.com"
  label="Email"
  field="email"
  icon="icon-mail"
  tooltip="This is a sample tooltip content. It also support html content.">
</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 
  label="amount" 
  unit-left="$" 
  unit-right=".00" 
  field="number">
</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="demo"></p>

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