Skip to main content
Version: 1.17.1

Combobox

Overview

The Combobox component allows the user to find an item among many choices.


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 empty
valuestring""Component valueNo option will be selected if the value is unspecified
Will result an error if the value is not a string
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

NameTypeDefaultDescriptionRemark
labelstringnullText label for each optionIf Item.label is unspecified, the value of Item.value is displayed on the UI
valuestringnullValue of each optionWill result an error if setting duplicated value in Item.value
disabledbooleanfalseEnable/Disable each option

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 when used in event.detail
event.detail.oldValue : Value before the change
event.detail.value : Value after the change

Constructor

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

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Custom CSS

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:
"toggle" means the area of the Combobox input box and button.

Property

Name
--kuc-combobox-font-size
--kuc-combobox-toggle-width
--kuc-combobox-toggle-height
--kuc-combobox-toggle-color
--kuc-combobox-menu-color
--kuc-combobox-menu-color-selected

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 combobox = new Kuc.Combobox({
label: 'Fruit',
items: [
{ label: 'Banana', value: 'banana', disabled: true },
{ label: 'Orange', value: 'orange' },
{ label: 'Apple', value: 'apple' }
],
value: 'orange',
requiredIcon: true,
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false
});
space.appendChild(combobox);

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