Fragments

Key Value Input

A dynamic key-value pair input with drag-to-reorder, add, and remove rows.

Formance
Docs

Installation#

npx shadcn@latest add @formance/key-value-input

Install the Sortable component first:

npx shadcn@latest add @formance/sortable

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { KeyValueInput } from '@/components/ui/key-value-input'
<KeyValueInput
  value={pairs}
  onValueChange={setPairs}
  keyPlaceholder="Key"
  valuePlaceholder="Value"
/>

Examples#

Sizes#

One size prop drives the whole row — both inputs, the drag handle, the remove button, the add button and the JSON preview trigger. Defaults to md, which matches a standard form field, so a key-value row lines up with the Input next to it. lg grows only the inputs and keeps its buttons on the md step.

Disabled#

Not Sortable#

Disable drag-to-reorder by setting sortable={false}.

Metadata#

Custom placeholders and label for a metadata editing use case.