Data Display

KeyValueEditor

Edits string key/value pairs and masks values selected as secrets.

import { KeyValueEditor } from '@lostgradient/cinder/key-value-editor';
key-value-editor
01

Overview

KeyValueEditor edits repeatable string key/value pairs. Pass secret(key) to render sensitive values in an editable password Input.

svelte 
<KeyValueEditor bind:entries secret={(key) => key.toLowerCase().includes('token')} />

The component owns row addition, removal, and change reporting. The consumer owns key validation and the policy that determines which keys are secret.

Live preview

02

When to use

Use when
  • Editing headers, environment variables, or configuration fields.
Avoid when
  • Values need rich structured content; use Table.
03

Examples

Basic key-value editor

Edit a small set of environment-style key-value entries.

04

Props

Props for key-value-editor
Name
Type
Default
Description
entries bindable KeyValueEntry[] []
onValueChange (entries: KeyValueEntry[]) => void
secret (key: string) => boolean
addLabel text 'Add pair'
removeLabel (key: string) => string