Key-Value

The KeyValueControl component handles dynamic key-value pairs in a form, using Material-UI's Accordion component for better organization and user experience.

Schema

warning

Warning: Avoid using . (dot) in the name property as it can cause issues with nested field paths in the form state.

[
    {
        "name": "attributes",
        "meta": {
            "displayType": "keyvalue",
            "displayName": "Attributes",
            "htmlProps": {
                "allowDynamic": true,
                "allowAdd": true
            },
            "validation": {
                "max": 5
            },
            "readOnly": false,
            "children": [
                {
                    "name": "key",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Key",
                        "validation": {
                            "required": true
                        }
                    }
                },
                {
                    "name": "value",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Value",
                        "validation": {
                            "required": true
                        }
                    }
                }
            ]
        }
    }
]

Example

Form Data:

{}

props

`meta` object

The meta object contains properties that define the display characteristics and behavior of the KeyValueControl section.

Name	Description	Type
`displayName`	The name to display as the section header	string
`htmlProps`	Properties for HTML behavior, like `allowDynamic` and `allowAdd`	object
`children`	Array of child fields contained within the `KeyValueControl`	array
`max`	Maximum number of items allowed in the key-value pairs	number
`displayType`	Type of the field display, which is `"keyvalue"` in this case	string
`readOnly`	A readonly field is not editable and value cannot be changed	boolean

Example JSON

Key-Value Control with dynamic items

[
    {
        "name": "attributes",
        "meta": {
            "displayType": "keyvalue",
            "displayName": "Attributes",
            "htmlProps": {
                "allowDynamic": true,
                "allowAdd": true
            },
            "validation": {
                "max": 5
            },
            "children": [
                {
                    "name": "key",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Key",
                        "validation": {
                            "required": true
                        }
                    }
                },
                {
                    "name": "value",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Value",
                        "validation": {
                            "required": true
                        }
                    }
                }
            ]
        }
    }
]

Key-Value Control with validation

[
    {
        "name": "attributes",
        "meta": {
            "displayType": "keyvalue",
            "displayName": "Attributes",
            "htmlProps": {
                "allowDynamic": true,
                "allowAdd": true
            },
            "validation": {
                "max": 5
            },
            "children": [
                {
                    "name": "key",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Key",
                        "validation": {
                            "required": true,
                            "requiredDetail": { "errorMsg": "Key is required" }
                        }
                    }
                },
                {
                    "name": "value",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Value",
                        "validation": {
                            "required": true,
                            "requiredDetail": { "errorMsg": "Value is required" }
                        }
                    }
                }
            ]
        }
    }
]

KeyValueControl with disabled field

[
    {
        "name": "attributes",
        "meta": {
            "displayType": "keyvalue",
            "displayName": "Attributes",
            "htmlProps": {
                "allowDynamic": true,
                "allowAdd": true
            },
            "validation": {
                "max": 5
            },
            "children": [
                {
                    "name": "key",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Key",
                        "isDisabled": true
                    }
                },
                {
                    "name": "value",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Value",
                        "isDisabled": true
                    }
                }
            ]
        }
    }
]

Schema​

props​

meta object​

Example JSON​

Key-Value Control with dynamic items​

Key-Value Control with validation​

KeyValueControl with disabled field​