Skip to main content

Multi Select

Choose multiple items from a dropdown list with flexible selection options.

Properties

PropertyTypeDescription
namestringUnique identifier for the multi-select component
labelstringText displayed on the left side of the multi-select
codestring (Option[])Code that returns an array of multi-select options
defaultValuestring (OptionValues)Code that returns an array of default values
placeholderstringPlaceholder applied to the multi-select
isDisabledbooleanWhether the multi-select is disabled
isHiddenbooleanWhether to hide the multi-select on the deployed page
labelWidthstringThe length that the left label takes up in the multi-select

name

Sets the unique identifier for the multi-select component. Please refer to the component naming rules.

label

Sets the text displayed on the left side of the multi-select. (Supports Template Text)

code

Sets the available options for the component.
Can be set through workflow results, direct input.

defaultValue

Sets the default selected values for the component.
Can be set through workflow results, direct input.

Selected values are maintained separately from the default value.

placeholder

Sets the field's placeholder text.
Defaults to field type's standard placeholder if unspecified.

isDisabled

Sets the disabled state of the component.
Can be set through workflow results, direct input.
When enabled, prevents user interaction with the component.

isHidden

Controls visibility of the component.
When set to true:

  • Hidden in deployed view
  • Visible with reduced opacity in edit mode

labelWidth

Sets the width of the label section.
Accepts values in pixels or percentages.

States

PropertyTypeDescription
valuesOptionValuesArray of selected option value

Type Definitions

interface Option {
// Option label
label: string;
// Option value
value: string;
// Option visibility
isHidden?: boolean;
}

type OptionValues = string[];