Key Value Editor

import { Card, CardContent, CardDescription, CardHeader, CardTitle, KeyValueEditor, rowsFromPairs } from 'ferry-ui'

// `rowsFromPairs` gives each pair a stable row id.
const LABELS = rowsFromPairs([
  { key: 'team', value: 'growth' },
  { key: 'cost-center', value: 'CC-4102' },
  { key: 'owner', value: 'maya@example.com' },
])

export default function KeyValueEditorHero() {
  return (
    <Card className="mx-auto w-full max-w-xl">
      <CardHeader>
        <div>
          <CardTitle>Labels</CardTitle>
          <CardDescription>The labels of the project “Billing portal”.</CardDescription>
        </div>
      </CardHeader>
      <CardContent>
        <KeyValueEditor
          defaultValue={LABELS}
          addLabel="Add label"
          itemNoun={{ one: 'label', other: 'labels' }}
          listLabel="Project labels"
        />
      </CardContent>
    </Card>
  )
}

import * as React from 'react'
import { Card, CardContent, KeyValueEditor, SaveBar, toast, useKeyValueRows, validateIdentifierKey, type KeyValuePair } from 'ferry-ui'

const INITIAL: KeyValuePair[] = [
  { key: 'team', value: 'growth' },
  { key: 'cost-center', value: 'CC-4102' },
]

// Module level: the options of the hook stay the same between renders.
const OPTIONS = { validateKey: validateIdentifierKey }

export default function KeyValueEditorSaveBar() {
  const [saved, setSaved] = React.useState(INITIAL)
  const [saving, setSaving] = React.useState(false)
  const labels = useKeyValueRows(saved, OPTIONS)

  function save() {
    const pairs = labels.pairs
    setSaving(true)
    // Stands for a request to the server.
    window.setTimeout(() => {
      setSaved(pairs)
      // The hook reads its argument on the first render only: give it the new saved state.
      labels.reset(pairs)
      setSaving(false)
      toast.success('Labels saved')
    }, 1000)
  }

  return (
    <Card className="mx-auto w-full max-w-xl">
      <CardContent>
        {/* The same validator as the hook: pasted lines and imported lines follow the same rule. */}
        <KeyValueEditor
          value={labels.rows}
          onValueChange={labels.setRows}
          errors={labels.errors}
          validateKey={validateIdentifierKey}
          disabled={saving}
          addLabel="Add label"
          emptyMessage="No labels yet."
        />
      </CardContent>
      <SaveBar
        dirty={labels.dirty}
        invalid={!labels.valid}
        saving={saving}
        hint={`Labels: ${labels.pairs.length}`}
        onReset={() => labels.reset(saved)}
        onSave={save}
      />
    </Card>
  )
}

import { KeyValueEditor, rowsFromPairs, validateIdentifierKey } from 'ferry-ui'

const VARIABLES = rowsFromPairs([
  { key: 'MAX_RETRIES', value: '5' },
  { key: '', value: 'eu-west' },
  { key: 'MAX_RETRIES', value: '3' },
  { key: '2FA_REQUIRED', value: 'true' },
])

export default function KeyValueEditorValidation() {
  return (
    <KeyValueEditor
      className="mx-auto w-full max-w-xl"
      defaultValue={VARIABLES}
      validateKey={validateIdentifierKey}
      keyLabel="Variable"
      keyPlaceholder="NAME"
      addLabel="Add variable"
      itemNoun={{ one: 'variable', other: 'variables' }}
    />
  )
}

import * as React from 'react'
import { KeyValueEditor, Label, Switch, rowsFromPairs } from 'ferry-ui'

const HEADERS = rowsFromPairs([
  { key: 'Accept', value: 'application/json' },
  { key: 'Authorization', value: 'Bearer tok_demo_8f2a91c4', secret: true },
  { key: 'X-Signature', value: 'sig_demo_31b9e0a4c2', secret: true },
])

export default function KeyValueEditorSecret() {
  const [revealAll, setRevealAll] = React.useState(false)

  return (
    <div className="mx-auto flex w-full max-w-xl flex-col gap-4">
      <div className="flex items-center gap-2">
        <Switch id="reveal-all-values" size="sm" checked={revealAll} onCheckedChange={setRevealAll} />
        <Label htmlFor="reveal-all-values" className="font-normal">
          Reveal all values
        </Label>
      </div>
      <KeyValueEditor
        defaultValue={HEADERS}
        revealAll={revealAll}
        keyLabel="Header"
        keyPlaceholder="X-Header-Name"
        addLabel="Add header"
        itemNoun={{ one: 'header', other: 'headers' }}
      />
    </div>
  )
}

import { KeyValueEditor } from 'ferry-ui'

export default function KeyValueEditorTexts() {
  return (
    <KeyValueEditor
      className="mx-auto w-full max-w-xl"
      keyLabel="Tag"
      keyPlaceholder="tag"
      addLabel="Add tag"
      importLabel="Import tags"
      itemNoun={{ one: 'tag', other: 'tags' }}
      listLabel="Invoice tags"
      emptyMessage="No tags yet. Add one, or import a list."
    />
  )
}

import { KeyValueEditor, rowsFromPairs } from 'ferry-ui'

const HEADERS = rowsFromPairs([
  { key: 'Accept', value: 'application/json' },
  { key: 'Authorization', value: 'Bearer tok_demo_8f2a91c4', secret: true },
  { key: 'X-Api-Version', value: '2026-01' },
])

export default function KeyValueEditorReadOnly() {
  return (
    <KeyValueEditor
      className="mx-auto w-full max-w-xl"
      readOnly
      defaultValue={HEADERS}
      keyLabel="Header"
      listLabel="Webhook headers"
    />
  )
}