Key value editor

Edit free-form key and value pairs, with paste and an optional JSON mode.

<mm-key-value-editor label="Metadata" json></mm-key-value-editor>

Guidance

The key and value editor takes free-form pairs: an asset's metadata, a schema's columns and types, a set of links. Rows are a key, a value and a remove button, with "Add field" below. Pasting several key: value (or key = value, or tab separated) lines into any key splits them into rows, so people can paste from a spreadsheet or a config file. Dotted keys (contact.slack) mean nesting. With json, "Edit as JSON" swaps the rows for a JSON text box for deeper structures, and back.

Adding a row focuses its key; removing one focuses the next row, or Add field. Changes are announced politely.

Properties

Property	Attribute	Type	Default	Description
value		KeyValuePair[]	[]	The pairs.
label	label	string	''	Accessible name of the group, such as "Metadata".
keyLabel	key-label	string	''
valueLabel	value-label	string	''
keyPlaceholder	key-placeholder	string	''
valuePlaceholder	value-placeholder	string	''
addLabel	add-label	string	''	Text of the add button. Defaults to "Add field".
json	json	boolean	false	Offers "Edit as JSON" for nested values.

Events

Event	Detail	Description
mm-change	CustomEvent<{ value: KeyValuePair[] }>	The pairs changed.

CSS parts

Part	Description
row	Each pair.

Examples

Every state of mm-key-value-editor in Storybook, with keyboard and screen reader tests.