Insites Docs Web Components V2Data EntryMultiple Input

Multiple Input

Last updated on January 06, 2025.

Element: <ins-input-multiple>

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

Complete Example

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

<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

Code Snippet

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

 

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

 

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.