Command Menu

Search documentation, components, and switch theme.

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#

Disabled#

Not Sortable#

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

Metadata#

Custom placeholders and label for a metadata editing use case.