Multiselect
The Multiselect component provides the user with a list of options to select from. Multiple options can be chosen. It is used independently or as a form component within a Form Block.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Specifies the name of the component (form component only) | |
| label | node | Specifies a label for the component. | |
| disabled | bool | false | If true, the multiselect is disabled. |
| value | any | Specifies a value for the component. | |
| menuItem | node | Defines a menu item in the select list. | |
| addRenderValue | text looper container component | Specifies how the component should render the values in the select list. |
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| variant | filled outlined standard string | outlined | Defines the display type of the component. |
| size | small medium string | medium | Defines the size of the component. |
| autoWidth | bool | false | If 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.
Menu Item
The Menu Item component is a list component with a special target. It is static or dynamically generated text.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| value | any | Specifies the value of the component. | |
| label | node | Specifies a label for the component. | |
| loopData | array | Defines an array of options in the format value, label. | |
| itemName | string | Defines 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
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | Specifies 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
| Name | Type | Default | Description |
|---|---|---|---|
| loopData | array | Defines an array of data in the format id, prop1, prop2, prop3. The id must be is small letters. | |
| itemName | string | Defines 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.