Status

PairEditor

Rows of short fields that save as you go: a product's key facts (Fact and Value) and its links (Name and Address).

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`label`Required	`string`	Name of the list for screen readers ("Key facts").
`rows`Required	`Record<string, string \| undefined>[]`
`fields`Required	`PairEditorField[]`
`onChange`Required	`(rows: Record<string, string>[]) => void`	Every row after each change: a field left, a row removed, a new row typed in.
`addLabel`	`string`	Default "Add a row".
`rowName`	`(row: Record<string, string \| undefined>) => string`	What a row is called on its remove button; the first field by default.
`readOnly`	`boolean`
`size`	`'M' \| 'L'`
`className`	`string`

Guidelines

Rows of short fields that save as you go: a product's key facts (Fact and Value) and its links (Name and Address).

Provide: label (the list's name for screen readers), rows, fields ({ key, label, placeholder, type, grow }), onChange(rows), addLabel ("Add a fact"), and optionally rowName, readOnly and size (L on phones).

Fields are quiet: plain text on the surface until pointed at (a soft fill) or typed in (the field outline and the focus ring). The first column reads as the label (semibold, heading color). Column names sit above the rows.
A field saves when you leave it or press Enter; Escape puts it back.
Removing is a quiet x, not a trash can and not red. It shows on hover or when the row has focus, and always on touch screens. Removing is announced and focus moves to the next row, or to the add button.
Adding opens an empty row and focuses its first field. It's kept only once something is typed, so an add you walk away from leaves nothing behind.
Rows are separated by dividers, no boxes around each field.