Multiple Input

Last updated on August 02, 2024.

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>

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

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.