Drop-down Menu
The drop-down menu clearly shows a list of data and allows users to select their choice. Based on the selection types offered, this field can be categorized into two types.
- Single select drop-down
- Multi-select drop-down
Single select drop-down
The single select drop-down field allows the user to choose a single option from the drop-down menu. The drop-down menu items can either be grouped or listed individually. Grouping of menu items can be handled in the options array attribute. Below is the list of attributes passed for the single select drop-down field. All mandatory fields are indicated with a *, and the maximum characters allowed for each field are given along with the Datatype.
| Attribute Name | Datatype | Description |
| type* | String (Value should be select) | The type of the input field. Value of the field should be select. |
| name* | String (50) | A unique identifier for the field. Upon form submission, value defined for this key will be available in the function associated with the form. |
| label* | String (150) | Describes the display name for this field. |
| placeholder* | String (150) | Sample field value displayed to the user that describes the expected value of the input field. |
| hint | String (100) | Provides a brief description of the fields purpose and the expected input. |
| options* | Array | An array of JSON object following the structure label and value. This attribute will be considered only when the datasource is list. Max no of options - 100 } |
| value | String(100) | Provide a default input for the field by giving the value of any drop-down list item. Note: The value provided must match the value fields of any drop-down menu item. |
| mandatory | Boolean | Defines if the field's requisite is mandatory or not. Note: Default value is considered to be false. |
| disabled | Boolean | If disabled is true, then the field will not be editable |
| trigger_on_change | Boolean | If this is enabled for a field or an input, then the change handler will be invoked when the value of that field is changed |
| mandatory | Boolean | Defines if the field's requisite is mandatory or not. Note: Default value is considered to be true. |
Multi select drop-down
The multi select drop-down field allows users to choose multiple items from the menu list. The maximum number of items that can be selected is defined using the max_selections attribute. Below given are the list of attributes passed for the multi select drop-down field.
| Attribute Name | Datatype | Description |
| type* | String (Value should be select) | The type of the input field. Value of the field should be select. |
| placeholder* | String (150) | Sample field value displayed to the user that describes the expected value of the input field. |
| name* | String (50) | A unique identifier for the field. Upon form submission, value defined for this key will be available in the function associated with the form. |
| label* | String (50) | Describes the display name for this field. |
| hint | String (100) | Provides a brief description of the fields purpose and the expected input. |
| options* | Array | An array of JSON object following the structure label and value. This attribute will be considered only when the datasource is list. Max no of options - 100 (or) options : [ { label, value } ] |
| value | String(2048) | Provide a default input for the field by giving the value of any drop-down list item. Note: The value provided must match the value fields of any drop-down menu item. |
| mandatory | Boolean | Defines if the field's requisite is mandatory or not. Note: Default value is considered to be false. |
| multiple* | Boolean | For all multi select fields, multiple should be set as true |
| max_selections | Integer Maximum selections: 10 | Defines the number of options that a user can choose from the drop-down. Note: Value for this field defaults to 1 in case of single select drop-downs. |
| disabled | Boolean | If disabled is true, then the field will not be editable |
| trigger_on_change | Boolean | If this is enabled for a field or an input, then the change handler will be invoked when the value of that field is changed |
Sample Code (Without Grouping):
Copied{
"type":"select",
"name":"select",
"label":"Amenities",
"placeholder":"Choose your preferred amenities",
"hint":"Your prefered amenities",
"mandatory":true,
"trigger_on_change":true,
"multiple":true,
"options":[
{
"label":"24/7 Security",
"value":"security"
},
{
"label":"Swimming Pool",
"value":"pool"
},
{
"label":"Parking space",
"value":"parking"
},
{
"label":"Gym/Fitness Center",
"value":"fitness"
}
],
"max_selections":2,
"value":"parking",
"disabled" : false
}
Sample code (With grouping):
Copied{
"type":"select",
"name":"select",
"label":"Select an option",
"hint":"Choose an item",
"placeholder":"Choose an item",
"mandatory":true,
"options":[
{
"label":"Living Room",
"options":[
{
"label":"Nylon Sofa 6- seater",
"value":"sofa"
},
{
"label":"Coffee Table",
"value":"coffeetable"
}
]
},
{
"label":"Bedroom Furniture",
"value":"bedroom"
}
]
}JSON format passed in handlers for the filled-in value:
Copied{
"meta":{
"type":"select",
"value":"parking"
},
"value":{
"label":"Parking Space",
"value":"parking"
}
}With Grouping:
Copied{
"type":"select",
"name":"select",
"label":"Amenities",
"placeholder":"Choose your prefered amenities",
"hint":"Your prefered amenities",
"mandatory":true,
"trigger_on_change":true,
"multiple":true,
"options":[
{
"label":"24/7 Security",
"value":"security"
},
{
"label":"Swimming Pool",
"value":"pool"
},
{
"label":"Parking space",
"value":"parking"
},
{
"label":"Gym/Fitness Center",
"value":"fitness"
}
],
"max_selections":2,
"value":"parking",
"disabled" : false
}
JSON format passed in handlers for the filled-in value:
Copied{
"meta":{
"type":"select",
"value":"parking"
},
"value":{
"label":"Parking Space",
"value":"parking"
}
}