Skip to content

Component library

Multiple Input component

Last updated 2 November 2026

Defines an input field where user can enter an array of data.

Live demo

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

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "" any Defines label of input field
placeholder string "" any Defines placeholder of input field
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
error-message string "" any Defines the error message when input element is wrong
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
didLoad n/a Returns if the component is rendered
oninput detail Returns the component value if the user input data
onchange detail Returns the component value if the current values have changed

Methods

FUNCTION PARAMETER RETURN DESCRIPTION
setValue array n/a Used for setting default and changing the value of the component
val n/a array Returns the current value of component

Examples

Complete Example

<ins-input-multiple
  label="Input – Multiple" placeholder="Please enter an option"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-input-multiple>

Disabled State

<ins-input-multiple
	label="Input - Multiple"
	disabled>
</ins-input-multiple>

Read-Only State

<ins-input-multiple
	label="Input - Multiple"
	readonly>
</ins-input-multiple>

Error State

<ins-input-multiple
	label="Input - Multiple"
	has-error
	error-message="This field is required.">
</ins-input-multiple>

Set Default Value

<ins-input-multiple
	label="Input - Multiple"
	id="set-default">
</ins-input-multiple>
<script>
	// Note: Event didLoad must be used before setting
	//       the default value to avoid race conditions
	document.getElementById('set-default').addEventListener('didLoad', function() {
		this.setValue(["Test 1", "Test 2", "Test 3"]);
	});
</script>

Get Value

<ins-input-multiple
	label="Input - Multiple"
	id="get-value">
</ins-input-multiple>

<ins-button
	solid
	blue
	id="button-get"
	label="Get Value">
</ins-button>

<script>
	var inputMultiple = document.getElementById('get-value');
	inputMultiple.addEventListener('didLoad', function() {
		this.setValue(["Test 1", "Test 2"]);
	});
	document.getElementById('button-get').addEventListener('insClick', function(event) {
		console.log(inputMultiple.val());
		alert("Check console log for event data");
	});
</script>