Component

DoubleEntry

It requires a first pass through the children and then the exact same ordered pass again. Each pass fills its own visible ledger row; a wrong item remains unposted until the expected entry is chosen.

Possible use

It could make a reviewer post a handoff brief only after checking title, status and owner twice, or let a presenter rehearse each agenda field in duplicate before advancing.

Reasonable alternative

A reasonable local alternative is one checklist with ordinary completion state. Requiring a second identical pass turns a list into bookkeeping theater.

01 / Preview

Try it yourself.

Double entry1 / 2 · 0 / 3

First pass

1Title2Status3Owner

Second pass

1Title2Status3Owner

Mechanism

1: Click Title, Status and Owner in order.
2: Repeat the same order for the second pass.
3: Try the wrong entry to leave it visibly unposted.

02 / Usage

Put it somewhere.

example.tsxTSX

import { DoubleEntry } from "gra-ui";
import "gra-ui/styles.css";

export function PostedFields() {
  return (
    <DoubleEntry>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
    </DoubleEntry>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe entries checked once, then checked again in the same order.