Skip to main content
Version: 1.0.3

MultiChoice

Overview

The MultiChoice component allows the user to select multiple values from multiple options.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
errorstring""Text to be displayed in errorError will not be displayed if unspecified or empty
idstring""Component id name
labelstring""Label for the componentLabel is not displayed if unspecified or emptied
disabledbooleanfalseEnable/Disable the component
requiredIconbooleanfalseShow/Hide the required icon
visiblebooleantrueShow/Hide the component
itemsArray<Item>[]List of options to displayWill result an error if the value of items is not an array
Item.labelstringnullLabel text for each optionIf Item.label is unspecified, the value of Item.value is displayed on the UI
Item.valuestringnullValue of each optionWill result an error if there is duplicated value in Item.value
valueArray<string>[]Selected valueWill result an error if the value of items is not an Array<br/>Will result an error if there is duplicated value in an Array<br/>No option will be selected if the value is unspecified

Event

Here is a list of events that can be specified:

NameTypeDescriptionRemark
changefunctionEvent handler when the value has been changedIt will pass the event object as the argument.

You can receive the following values in event.detail
event.detail.oldValue : Value before the change
event.detail.value : Value after changing

Constructor

MultiChoice(options)
Here is a list of available constructors:

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Sample Code

Here is a sample code when all parameters are specified:

const space = kintone.app.record.getSpaceElement('space');
const multiChoice = new Kuc.MultiChoice({
label: 'Fruit',
requiredIcon: true,
items: [
{
label: 'orange',
value: 'Orange'
},
{
label: 'apple',
value: 'Apple'
}
],
value : ['Orange'],
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false
});
space.appendChild(multiChoice);

multiChoice.addEventListener('change', event => {
console.log(event);
});