Component library

Input component

Last updated 2 November 2026

Defines an input field where user can enter data.

Live demo

<ins-input
  placeholder="Email"
  value="[email protected]"
  label="Email"
  field="email"
  icon="icon-mail"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-input>

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
unit-left	string	""	-	Defines the unit at the start of the input field
unit-right	string	""	-	Defines the unit at the end of the input field
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
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content
html-description	boolean	false	true, false	Enables HTML tags in the description
description	string	""	any	Defines the description value

Events

EVENT	OBJECT	DESCRIPTION
insInput	value, keycode	Execute a script when an element gets user input
insValueChange	value	Returns value when an element gets user input
insBlur	value, keycode	Emit field value and keycode on input blur event
insIconClick	target, value	Emit the field and value when field icon is clicked

Event	Live example
`oninput`	Try oninput
`valueChange`	Try valueChange

Events - oninput

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

Events - valueChange

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

Examples

Description Example

<ins-input
   label="Description Example"
   html-description
   description="This is a <strong>Description</strong> <i>Example</i>">
</ins-input>

Color Input Example

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

Default State

<ins-input></ins-input>

Direct Set Data

<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

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

Disabled State

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

Read-Only State

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

Error State

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

Password

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

Number

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

Value Attribute

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

Placeholder Attribute

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

Units Attribute

<ins-input 
  label="amount" 
  unit-left="$" 
  unit-right=".00" 
  field="number">
</ins-input>

Icon Attribute

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

Label Attribute

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

Field Attribute

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