Skip to main content

Multiselect

The Multiselect component provides the user with a list of options to select from. Multiple options can be chosen.

The Multiselect component is used independently or as a form component. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only)
labelnodeSpecifies a label for the component.
disabledboolfalseIf true, the multiselect is disabled.
valueanySpecifies a value for the component.
menuItemnodeDefines a menu item in the select list.
addRenderValuetext
looper
container
component
Specifies how the component should render the values in the select list.

Style Attributes

NameTypeDefaultDescription
variantfilled
outlined
standard
string
outlinedDefines the display type of the component.
sizesmall
medium
string
mediumDefines the size of the component.
autoWidthboolfalseIf true, the width of the popover will automatically be set based on the size of the items in the menu.

Subcomponents

The Multiselect component uses a Menu Item subcomponent to create an options list and one of three possible components Text, Looper, or Container to render the multiselect.

The Menu Item component is a list component with a special target. It is static or dynamically generated text.

Properties

NameTypeDefaultDescription
valueanySpecifies the value of the component.
labelnodeSpecifies a label for the component.
loopDataarrayDefines an array of options in the format value, label.
itemNamestringDefines a unique identifier that allows access the array element's properties.

Text

The Text component creates a text value for another component.

For further details, see the Text component.

Properties

NameTypeDefaultDescription
textstringSpecifies a text value for the multiselect item.

Looper

The Looper component creates a static or dynamic data array for another component.

For further details, see the Looper component.

Properties

NameTypeDefaultDescription
loopDataarrayDefines an array of data in the format id, prop1, prop2, prop3. The id must be is small letters.
itemNamestringDefines a unique identifier that allows access the array element's properties.

Container

Defines the margin and padding around a multiselect item.

For further details, see the Container component.

on this page
Was this article useful?
89% of our users said this content was useful.