Select

This field selects an option from a list of options.

Schema

"root"

{1 Items

"fields"

[1 Items

{2 Items

"name"

string

"name"

"meta"

{3 Items

"displayName"

string

"Fruits"

"displayType"

string

"select"

"options"

[3 Items

{

…

}2 Items

{

…

}2 Items

{

…

}2 Items

]

}

]

}

Field Properties

Name	Description
displayType	The displayType for this field (`select`)
displayName	The display name used for this field
options	An list of available options for the field
value	The value used by this field
placeholder	The hint value used for this field
isDisabled	Marks the field as disabled
isReadonly	Marks the field as readonly

Config

The configuration defines how to load dropdown options for the select field. Use this to load options from remote api and configure its behaviour.

Name	Description
url	The api endpoint to load dropdown options
pathParams	The path parameters of the url. Use this for dynamic path parameters
queryParams	List of query parameters. Use this for dynamic query parameters
requestType	Represents HTTP method used for url. Options are `get`, `post`, `put`, `delete`. If none is specified and url key is present, then default value is `get`
requestBody	A JSON payload. Parameters are representes as `$0`, `$1` and so forth. Parameters are 0 indexed.
requestBodyParams	List of parameter values of request body. Each index value in the requestBodyParams represents the same index parameter form requestParams
valueKey	The key from the response for value of the field
labelKey	The key from the response for display name of the field
responseKey	The key from response which contains the results
lazy	Load options lazily. For example: load the options on opening dropdown

Query params

Query params can be used to pass additional data as part of the api url. This data can either be hardcoded or configured to pass data dynamically from other fields.

Format of query params: It accepts an array/list of query params.

[<QUERY_PARAM1>, <QUERY_PARAM2>,...]

Format of query param: It accepts name and value in list like format.

[<NAME_OF_QUERY_PARAM>, <VALUE_OF_QUERY_PARAM>]

NAME_OF_QUERY_PARAM is just a string
VALUE_OF_QUERY_PARAM can be a hardcoded value or can reference value from another field like this:
- type: 'fieldValue' indicates the value has to be taken from another field
- ref: name of the reference field from where value can be copied

Schema example with query params

"root"

{1 Items

"fields"

[2 Items

{2 Items

"name"

string

"countries"

"meta"

{5 Items

"displayName"

string

"Select Country"

"displayType"

string

"select"

"value"

string

"IN"

"options"

[2 Items

{

…

}2 Items

{

…

}2 Items

]

"events"

{1 Items

"change"

{

…

}3 Items

}

{2 Items

"name"

string

"states"

"meta"

{4 Items

"config"

{6 Items

"lazy"

string

"true"

"url"

string

"/api/states"

"queryParams"

[

…

]1 Items

"responseKey"

string

"data"

"labelKey"

string

"label"

"valueKey"

string

"value"

}

"displayName"

string

"Select State"

"displayType"

string

"select"

"options"

[]0 Items

}

]

}

Request Body

A sample request body payload for HTTP method 'post' with request body parameters and url.

Demo

https://codesandbox.io/p/sandbox/add-to-cart-mui-forms-975cdw?file=%2Fsrc%2FAddToCart.tsx (opens in a new tab)

Schema example

{
    "fields": [{
        "name": "product1",
        "meta": {
            "displayName": "Product 1",
            "displayType": "select",
            "options": [{
                "label": "Product1",
                "value": "1"
            }, {
                "label": "Product2",
                "value": "2"
            }, {
                "label": "Product3",
                "value": "3"
            }]
        }
    }, {
        "name": "product2",
        "meta": {
            "displayName": "Product 2",
            "displayType": "select",
            "options": [{
                "label": "Product1",
                "value": "1"
            }, {
                "label": "Product2",
                "value": "2"
            }, {
                "label": "Product3",
                "value": "3"
            }]
        }
    }, {
        "name": "product_details",
        "meta": {
            "config": {
                "url": "https://dummyjson.com/carts/add",
                "urlType": "remote",
                "requestType": "post",
                "requestBody": {
                    "userId": 1,
                    "products": [{
                        "id": "$0",
                        "quantity": 1
                    }, {
                        "id": "$1",
                        "quantity": 1
                    }]
                },
                "requestBodyParams": [{
                    "type": "fieldValue",
                    "ref": "product1"
                }, {
                    "type": "fieldValue",
                    "ref": "product2"
                }],
                "responseKey": "products",
                "labelKey": "title",
                "valueKey": "total",
                "lazy": "true"
            },
            "displayName": "Product Details",
            "displayType": "select",
            "options": []
        }
    }]
}

Common Properties

Click here to go to common properties

How to load options from remote api

Schema

"root"

{1 Items

"fields"

[1 Items

{2 Items

"name"

string

"countries"

"meta"

{4 Items

"config"

{3 Items

"url"

string

"/api/countries"

"valueKey"

string

"code"

"labelKey"

string

"name"

}

"displayName"

string

"Select Country"

"displayType"

string

"select"

"options"

[]0 Items

}

]

}

Search Field About