Component

ShadowPair

It creates a two-part filing route for every child. Select the current card, then its matching witness; any wrong card or witness erases the route and returns the sequence to the first pair.

Possible use

It could make a reviewer acknowledge every handoff field and then sign its matching shadow, or make a presenter pair each agenda item with an unnecessary witness before advancing.

Reasonable alternative

A reasonable local alternative is one ordered checklist with independent completion state. Requiring a second click on a matching witness makes sequence state reusable where a list would suffice.

01 / Preview

Try it yourself.

Mechanism

1: Start with three cards and their unselected witnesses.
2: Select card 1, then witness 1. Repeat the pair for each row.
3: A correct pair stays signed; a wrong card or witness resets the whole route.
4: Restart the filing when every witness has finally been involved.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function WitnessedFields() {
  return (
    <ShadowPair>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
    </ShadowPair>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe ordered cards that must each be followed by their matching witness.