Key-Value
The keyvalue component handles dynamic key-value pairs in a form, using Material-UI's accordion component for better organization and user experience.
Schema
caution
Avoid using dot (.) in the name property as it can cause issues with nested field paths in the form state.
Examples
A simple key-value pair component with validation.
Form Data:
{}Props
Meta object
The Meta (meta) object contains properties that define the display characteristics and behavior of the keyvalue 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 |