Skip to main content
Version: 1.5.0

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 optionCan set duplicated value in Item.value
value *1Array<string>[]Selected valueNo option will be selected if the value and selectedIndex are unspecified
If setting duplicated value and not setting selectedIndex, the first mapped value item in Item.value will be selected and selectedIndex will be the index number
Will result an error if the value of items is not an array
selectedIndex *1Array<Number>[]List of index of selected itemIt supports specifying which duplicated Item.value will be selected if there is duplicated Item.value in items
If value is not set and selectedIndex is valid, item that has the index number will be selected
If value is set with duplicated Item.value and selectedIndex value maps with duplicated Item.value specified in value, item that has the index number will be selected
Will result an error if the value of selectedIndex is not an array
info

*1: You can set duplicated value in value and Item.value. In case setting duplicated value, you can handle selected item using value and selectedIndex property.
Example: When setting items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]

  • If setting value and not setting selectedIndex as follows:

    • value = ['fruit', 'vegetable']: The first and third items will be selected.
    • value = ['meat', 'other']: No item will be selected.
  • If not setting value and setting selectedIndex as follows:

    • selectedIndex = [0, 1]: The first and second items will be selected.
    • selectedIndex = [98, 99]: No item will be selected.
  • If setting value and selectedIndex as follows:

    • value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: The second and third items will be selected.
    • value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: The second, third, and fourth items will be selected.
    • value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: The first and second items will be selected.
      ※ If both value and selectedIndex are set at the same time, the priority of value will be higher. Therefore, in the first and third examples above, the item corresponding to 3 of selectedIndex will not be selected.

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

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

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'],
selectedIndex: [0],
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false
});
space.appendChild(multiChoice);

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