Skip to main content
Version: 1.17.0

Dropdown

Overview​

The Dropdown component allows the user to select one out of several 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 empty
value *1string""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 is not a string
selectedIndex *1number-1Index 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, the item that has the index number will be selected
Will result an error if the value of selectedIndex is not a number
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
info

*1: You can set duplicated value in 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'}]

  • If setting value and not setting selectedIndex as follows:

    • value = 'fruit': The first item will be selected.
    • value = 'other': No item will be selected.

  • If not setting value and setting selectedIndex as follows:

    • selectedIndex = 1: The second item will be selected.
    • selectedIndex = 99: No item will be selected.

Item​

NameTypeDefaultDescriptionRemark
labelstringnullText label for each optionIf Item.label is unspecified, the value of Item.value is displayed on the UI
valuestringnullValue of each optionCan set 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 in event.detail
event.detail.oldValue : Value before the change
event.detail.value : Value after changing

Constructor​

Dropdown(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 Dropdown button.

Property​

Name
--kuc-dropdown-font-size
--kuc-dropdown-toggle-width
--kuc-dropdown-toggle-height
--kuc-dropdown-toggle-color
--kuc-dropdown-menu-color
--kuc-dropdown-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 dropdown = new Kuc.Dropdown({
  label: 'Fruit',
  requiredIcon: true,
  items: [
    {
      label: 'orange',
      value: 'Orange'
    },
    {
      label: 'apple',
      value: 'Apple'
    },
    {
      label: 'banana',
      value: 'Banana',
      disabled: true
    }
  ],
  value: 'Orange',
  selectedIndex: 0,
  error: 'Error occurred!',
  className: 'options-class',
  id: 'options-id',
  visible: true,
  disabled: false
});
space.appendChild(dropdown);

dropdown.addEventListener('change', event => {
  console.log(event);
});
Last updated on