Component

DominoSequence

Start with any tile, then choose unused tiles whose first letter matches the last letter of the current tile. A wrong choice knocks the accepted chain down, while a complete chain files every word in the order actually chosen.

Possible use

It could make a reviewer file handoff fields only when their words happen to connect, or let a presenter reveal agenda items through a tiny word game. The chain rule adds failure without improving the order of either document.

Reasonable alternative

A reasonable local alternative is rendering the intended order directly or using a checklist for real dependencies. A letter domino should not govern a workflow sequence.

01 / Preview

Try it yourself.

Next tile must begin withany letter

Nothing has fallen yet.

Mechanism

1: Start with any tile; the first one has no restriction.
2: Choose an unused tile whose first letter matches the previous tile's last letter.
3: A wrong tile knocks down the accepted chain instead of merely showing an error.
4: Reset the chain when every word has fallen into place.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function ChainedFields() {
  return <DominoSequence items={["Notice", "Echo", "Owner", "Review"]} />;
}

03 / API

Small surface area.

PropTypeDescription

itemsreadonly string[]The word tiles that must form a last-letter-to-first-letter chain.