Are IDs returned as configuration keys?

No. IDs preserve row identity; only each row's key and value are user data.

Does it support nested objects?

No. It edits a flat ordered list and leaves parsing and serialization to the consumer.

Controlled Key/Value Pairs

An ordered, controlled editor for flat configuration pairs with clear duplicate-key feedback.

Release configuration

Environment variables

Production · eu-west-2

Key/value pairs

KeyValue

3 pairs · all keys unique

Consumer fixture

Outbound request headers

A second ordered configuration surface with long values.

Key/value pairs

Header nameHeader value

2 pairs · all keys unique

Input Key/Value Pairs gives deployment settings and request metadata a stable, keyboard-accessible editing surface.

Rows keep their identity as they move. Keys must be present and unique after trimming and case folding; values remain free-form, including empty strings.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-key-value-pairs

Usage

"use client";

import { useState } from "react";
import { InputKeyValuePairs, type KeyValuePair } from "@/components/input-key-value-pairs";

export function EnvironmentEditor() {
  const [value, setValue] = useState<KeyValuePair[]>([
    { id: "region", key: "DEPLOY_REGION", value: "eu-west-2" },
  ]);
  return <InputKeyValuePairs value={value} onChange={setValue} />;
}

Props

Prop	Type	Default	Description
value	readonly KeyValuePair[]	required	Controlled ordered rows with stable IDs, key strings and value strings.
onChange	(value: KeyValuePair[]) => void	required	Receives a fresh complete snapshot for each edit or structural action.
keyLabel	string	Key	Visible key column heading and accessible field name.
valueLabel	string	Value	Visible value column heading and accessible field name.
addLabel	string	Add pair	Text for the add-row action.
duplicateMessage	string	Keys must be unique.	Validation text for duplicate non-empty keys.
disabled	boolean	false	Disables editing and row actions.
className	string	undefined	Additional classes merged on the root fieldset.

Customisation

Semantic surface and focus tokens support nested theme overrides. The caller owns persistence, serialization and the meaning of each pair.

.deployment-values { max-inline-size: 54rem; }

Frequently asked questions

Are IDs returned as configuration keys?: No. IDs preserve row identity; only each row's key and value are user data.
Does it support nested objects?: No. It edits a flat ordered list and leaves parsing and serialization to the consumer.

Related components

Build a complete formExplore more accessible form controls for your React project.Form components