Fragments
Key Value Input
A dynamic key-value pair input with drag-to-reorder, add, and remove rows.
FormanceCustom component built for Formance products.
Installation#
npx shadcn@latest add @formance/key-value-inputInstall the Sortable component first:
npx shadcn@latest add @formance/sortableCopy 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.