Select

A selection from predefined values

Specification

multiple

Type: Boolean
Default: false
If true, multiple selections are allowed.

sort

Type: String
Allowed values: text or number
Items are unsorted by default. However, you can sort them using this option.

grouped

Type: Boolean
If true, options can be grouped by using grouped options syntax.

[
    {
        label: "Group",
        options: [
            {
                label: "Option",
                value: 1
            }
        ]
    }
]

options

Available types:

Type

Specification

array

An array of options for this select field. Example:

[
    {
        label: "Option",
        value: 1
    }
]

string

Specifies an options RPC URL that retrieves dynamic options for this selection.

object

Allows specifying the detailed configuration of options and nested parameters for this select field.

Available parameters:

Parameter

Type

Specification

store

array

Specifies options for the select field.

store

string

Specifies an options RPC URL that retrieves dynamic options for the select.

label

string

Specifies the name of a property as the label of an option.

value

string

Specifies the name of a property as the value of an option. Value cannot be null.

placeholder

string

Specifies the label shown when no option is selected. Available parameters:

label (string) - Specifies the label shown when no option is selected.
nested (array) - Specifies an array of nested parameters shown when no option is selected.

placeholder

object

Specifies a detailed configuration of a placeholder. Available parameters:

label (string) - Specifies the label shown when no option is selected.
nested (array) - Specifies an array of nested parameters shown when no option is selected.

nested

array

Specifies an array of nested parameters shown when an option is selected.

When the select is multiple, the nested parameters are generated and displayed for the selected options.

nested

string

Specifies an RPC URL that retrieves dynamic nested options.

mode

Type: String.
Accepted values: edit or choose.

validate

Type: Object or Boolean.
Specifies parameter validation.

When set to false, the validation against the provided options gets disabled for manual input.

Available parameters:

Parameter

Type

Specification

maxItems

number

Specifies the maximum number of selected items when multiple is true.

minItems

number

Specifies the minimum number of selected items when multiple is true.

spec

Type: Object.

Available parameters:

Parameter

Type

Specification

type

string

Specifies a data type of value from the select that is validated.

Useful when your API returns numerical IDs in strings but you want them to be typed as numbers in the output of your module.

dynamic

Type: Boolean
Default: false

Defines whether a mapped value in the select should be validated against the option values.

If true, the value is treated as dynamic and validation is disabled. The value is set to true automatically if select options are generated using an RPC.

mappable

Type: Boolean or Object
- Set to false to make field non-mappable.
- If Object, it specifies the detailed configuration of the mapping toggle.

Available parameters:

Parameter

Type

Specification

help

string

Alternative help text is shown only when the mappable toggle is turned on.

Examples

Basic select

A basic select with few options that can't be changed manually.

[
	{
		"name": "select",
		"label": "Size",
		"type": "select",
		"options": [
			{
				"label": "Small",
				"value": "s"
			},
			{
				"label": "Medium",
				"value": "m"
			},
			{
				"label": "Large",
				"value": "l"
			}
		]
	}
]

Select with grouped options

Sort options into groups by enabling grouped options.

[
	{
		"name": "select",
		"label": "Size",
		"type": "select",
		"grouped": true,
		"options": [
			{
				"label": "Men",
				"options": [
					{
						"label": "Small",
						"value": "ms"
					},
					{
						"label": "Medium",
						"value": "mm"
					},
					{
						"label": "Large",
						"value": "ml"
					}
				]
			},
			{
				"label": "Women",
				"options": [
					{
						"label": "Small",
						"value": "ws"
					},
					{
						"label": "Medium",
						"value": "wm"
					},
					{
						"label": "Large",
						"value": "wl"
					}
				]
			}
		]
	}
]

Multiple choice

Turn on multiple choice by setting multiple to true.

[
	{
		"name": "select",
		"label": "Meal",
		"type": "select",
		"options": [
			{
				"label": "Breakfast",
				"value": "breakfast"
			},
			{
				"label": "Lunch",
				"value": "lunch"
			},
			{
				"label": "Dinner",
				"value": "dinner"
			}
		],
		"multiple": true
	}
]

["breakfast","dinner"]

Multiple choice with validation

You can validate the number of selected options by using validate object.

[
	{
		"name": "select",
		"label": "Preferred means of transport",
		"type": "select",
		"options": [
			{
				"label": "Tram",
				"value": "tram"
			},
			{
				"label": "Bus",
				"value": "bus"
			},
			{
				"label": "Underground",
				"value": "underground"
			},
			{
				"label": "Boat",
				"value": "boat"
			},
			{
				"label": "Plane",
				"value": "plane"
			},
			{
				"label": "Train",
				"value": "train"
			}
		],
		"multiple": true,
		"validate": {
			"minItems": 1,
			"maxItems": 3
		}
	}
]

Mappable select with help

You can display a custom help message when the mappable toggle is turned on.

[
	{
		"name": "select",
		"type": "select",
		"label": "Size",
		"options": [
			{
				"label": "Small",
				"value": "s"
			},
			{
				"label": "Medium",
				"value": "m"
			},
			{
				"label": "Large",
				"value": "l"
			}
		],
		"mappable": {
			"help": "If not sure, call your mother."
		}
	}
]

Preselected value

Set a preselected value by setting a default. The value of desired option and default has to match.

[
	{
		"name": "select",
		"type": "select",
		"label": "Size",
		"options": [
			{
				"label": "Small",
				"value": "s"
			},
			{
				"label": "Medium",
				"value": "m"
			},
			{
				"label": "Large",
				"value": "l"
			}
		],
		"default": "m"
	}
]

Placeholder

Choose what to display when no option is selected by specifying a placeholder. You need to put options inside the store array to make this work.

[
	{
		"name": "select",
		"type": "select",
		"label": "Size",
		"options": {
			"store": [
				{
					"label": "Small",
					"value": "s"
				},
				{
					"label": "Medium",
					"value": "m"
				},
				{
					"label": "Large",
					"value": "l"
				}
			],
			"placeholder": "Select your T-shirt size"
		}
	}
]

Nested options

Use nested options to display a set of fields when an option is selected.

[
	{
		"name": "pizza",
		"type": "select",
		"label": "Pizza",
		"options": {
			"store": [
				{
					"label": "Salami",
					"value": "salami"
				},
				{
					"label": "Margheritta",
					"value": "margheritta"
				},
				{
					"label": "Mexico",
					"value": "mexico"
				}
			],
			"nested": [
				{
					"name": "size",
					"type": "select",
					"label": "Size",
					"options": [
						{
							"label": "Small",
							"value": 32
						},
						{
							"label": "Large",
							"value": 45
						}
					]
				},
				{
					"name": "notes",
					"type": "text",
					"label": "Notes"
				}
			]
		}
	}
]

Nested fields for specific options

Display certain fields only when a specific option is selected. In this case, you can nest fields under a specific option.

[
	{
		"name": "plan",
		"type": "select",
		"label": "Support plan",
		"options": [
			{
				"label": "Email support",
				"value": "email",
				"nested": [
					{
						"type": "email",
						"label": "Email",
						"name": "email"
					}
				]
			},
			{
				"label": "Phone support",
				"value": "phone",
				"nested": [
					{
						"type": "text",
						"label": "Phone number",
						"name": "phone"
					}
				]
			}
		]
	}
]

Select under select

This is a special case of nested options that is used to specify a category and its subcategory.

[
	{
		"name": "category",
		"type": "select",
		"label": "Category",
		"options": {
			"store": [
				{
					"label": "Sport",
					"value": "sport",
					"nested": [
						{
							"type": "select",
							"label": "Subcategory",
							"name": "subcategory",
							"options": [
								{
									"label": "Hockey",
									"value": "hockey"
								},
								{
									"label": "Football",
									"value": "football"
								}
							]
						}
					]
				},
				{
					"label": "Music",
					"value": "music",
					"nested": [
						{
							"type": "select",
							"label": "Subcategory",
							"name": "subcategory",
							"options": [
								{
									"label": "Pop",
									"value": "pop"
								},
								{
									"label": "Rock",
									"value": "rock"
								}
							]
						}
					]
				}
			]
		}
	}
]

Mode edit as default

When your select is editable, you can set the default mode edit.

[
	{
		"name": "choosable",
		"type": "select",
		"label": "Choosable",
		"editable": true,
		"options": [
			{
				"label": "Option A",
				"value": "a"
			},
			{
				"label": "Option B",
				"value": "b"
			}
		]
	},
	{
		"name": "editable",
		"type": "select",
		"label": "Editable",
		"editable": true,
		"mode": "edit",
		"options": [
			{
				"label": "Option A",
				"value": "a"
			},
			{
				"label": "Option B",
				"value": "b"
			}
		]
	}
]

Nested RPCs

Nest RPCs when retrieving nested fields dynamically. The nested RPC receives the id parameter automatically.

[
   {
       "name": "id",
       "type": "select",
       "mode": "edit",
       "options": {
           "store": "rpc://listBoards",
           "nested": [
               {
                   "name": "member_id",
                   "type": "select",
                   "label": "Member",
                   "options": "rpc://getMemberIdBoard",
                   "required": true
               }
           ]
       },
       "label": "Board ID",
       "required": true
   }
]

PreviousPort NextText

Last updated 10 days ago