Multi Select

The multiselect component can be used, to select multiple values, using the mui autocomplete component.

Schema

{
    "name": "Movies",
    "meta": {
        "displayType": "multiselect",
        "description": "please select movies",
        "value": [],
        "isDisabled": true,
        "htmlProps": {
            "allowDynamic": true
        },
        "readOnly": false,
        "options": [
            {
                "label": "Joker",
                "value": "joker"
            },
            {
                "label": "Parasite",
                "value": "parasite"
            },
            {
                "label": " Matrix 4",
                "value": "matrix4"
            },
            {
                "label": "Wonder Woman 2",
                "value": "wonderwoman2"
            },
            {
                "label": "The Suicide Squad",
                "value": "thesuicidesquad"
            },
            {
                "label": "Tenet",
                "value": "tenet"
            }
        ],
        "validation": {
            "required": true
        },
        "displayProps": {
            "allowDynamic": true
        }
    }
}

Example

​

​

please select movies

---

---

Form Data:

{}

Example 1: Enabled Multiselect with Initial Value

{
    "name": "Movies",
    "meta": {
        "displayType": "multiselect",
        "description": "Please select movies",
        "value": ["joker", "tenet"],
        "isDisabled": false,
        "options": [
            {
                "label": "Joker",
                "value": "joker"
            },
            {
                "label": "Parasite",
                "value": "parasite"
            },
            {
                "label": "Matrix 4",
                "value": "matrix4"
            },
            {
                "label": "Wonder Woman 2",
                "value": "wonderwoman2"
            },
            {
                "label": "The Suicide Squad",
                "value": "thesuicidesquad"
            },
            {
                "label": "Tenet",
                "value": "tenet"
            }
        ],
        "validation": {
            "required": true
        }
    }
}

Example 2: Multiselect with Optional Selection

{
    "name": "Movies",
    "meta": {
        "displayType": "multiselect",
        "description": "Please select movies",
        "value": [],
        "isDisabled": false,
        "options": [
            {
                "label": "Joker",
                "value": "joker"
            },
            {
                "label": "Parasite",
                "value": "parasite"
            },
            {
                "label": "Matrix 4",
                "value": "matrix4"
            },
            {
                "label": "Wonder Woman 2",
                "value": "wonderwoman2"
            },
            {
                "label": "The Suicide Squad",
                "value": "thesuicidesquad"
            },
            {
                "label": "Tenet",
                "value": "tenet"
            }
        ],
        "validation": {
            "required": false
        }
    }
}

Example 3: Disabled Multiselect without Initial Value

{
    "name": "Movies",
    "meta": {
        "displayType": "multiselect",
        "description": "Please select movies",
        "value": [],
        "isDisabled": true,
        "options": [
            {
                "label": "Joker",
                "value": "joker"
            },
            {
                "label": "Parasite",
                "value": "parasite"
            },
            {
                "label": "Matrix 4",
                "value": "matrix4"
            },
            {
                "label": "Wonder Woman 2",
                "value": "wonderwoman2"
            },
            {
                "label": "The Suicide Squad",
                "value": "thesuicidesquad"
            },
            {
                "label": "Tenet",
                "value": "tenet"
            }
        ],
        "validation": {
            "required": true
        }
    }
}

Example 4: Enabled Multiselect with All Options Selected

{
    "name": "Movies",
    "meta": {
        "displayType": "multiselect",
        "description": "Please select movies",
        "value": ["joker", "parasite", "matrix4", "wonderwoman2", "thesuicidesquad", "tenet"],
        "isDisabled": false,
        "options": [
            {
                "label": "Joker",
                "value": "joker"
            },
            {
                "label": "Parasite",
                "value": "parasite"
            },
            {
                "label": "Matrix 4",
                "value": "matrix4"
            },
            {
                "label": "Wonder Woman 2",
                "value": "wonderwoman2"
            },
            {
                "label": "The Suicide Squad",
                "value": "thesuicidesquad"
            },
            {
                "label": "Tenet",
                "value": "tenet"
            }
        ],
        "validation": {
            "required": true
        }
    }
}

Example 5: Multiselect with a Subset of Options and Custom Description

{
    "name": "FavoriteMovies",
    "meta": {
        "displayType": "multiselect",
        "description": "Select your favorite movies from the list.",
        "value": ["parasite", "thesuicidesquad"],
        "isDisabled": false,
        "options": [
            {
                "label": "Joker",
                "value": "joker"
            },
            {
                "label": "Parasite",
                "value": "parasite"
            },
            {
                "label": "The Suicide Squad",
                "value": "thesuicidesquad"
            },
            {
                "label": "Tenet",
                "value": "tenet"
            }
        ],
        "validation": {
            "required": true,
            "requiredDetail": {
                "errorMsg": "custom message for required detail"
            }
        }
    }
}

Field Property

Name	Description	Type
isDisabled	A boolean indicating whether the multiselect control is disabled.	boolean
description	A string providing additional information or instructions about the multiselect control.	string
required	A boolean indicating if the multiselect control is required.	boolean
value	The initial value of the multiselect control. It should be an array of selected items.	array
displayName	The display name of the multiselect control, shown as a label or header.	string
name	The unique identifier for the multiselect control instance.	string
displayType	The type of control, which is "multiselect" in this case.	string
readOnly	A readonly field is not editable and value cannot be changed	boolean

Common Validation Properties

Field	Description
required	Marks a field as mandatory
pattern	Adds a pattern validation for the field. For email, pattern is supported by default
patternDetail	Contains info msg and error msg for pattern validation property
min	For Textbox fields, it is the minimum number of characters required for the field. For number fields, it is the minimum value allowed
max	For Textbox fields, it is the maximum number of characters allowed. For number fields, it is the maximum value allowed
minDetail	Contains error and info msg for min validation property
maxDetail	Contains error and info msg for max validation property
requiredDetail	Contains info msgs about the required validation property