Key-Value Input

A dynamic form field for adding, editing and removing up to three unique key/value metadata pairs, with built-in validation for blank or duplicate keys and max-length limits. Ported to React from SL UI Library's vanilla HTML/JS component (MIT, original by SLtowl).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Key-Value Input to your project and fits it to your theme.

import KeyValueInput from "@/components/ui/matte-inputs-key-value-v11";

export default function KeyValueInputDemo() {
  return (
    <div
      className="min-h-screen w-full flex items-center justify-center p-6"
      style={{ background: "#f5f4f2" }}
    >
      <KeyValueInput
        onChange={(state) => {
          console.log(state);
        }}
      />
    </div>
  );
}