Component

RatchetReveal

It turns a row of ordinary children into a paper mechanism with a ratcheting gate. Each activation opens exactly one tooth and keeps that child revealed, so a simple row must earn its complete visibility one notch at a time.

Possible use

It could be used to make a reviewer reveal handoff fields only as each one is discussed, or to let a presenter open agenda items one notch at a time during a deliberately ceremonial briefing.

Reasonable alternative

A reasonable local alternative is the children in a normal row with one disclosure state. Publishing a ratchet is difficult to defend because visibility should not require mechanical paperwork.

01 / Preview

Try it yourself.

sealed

Mechanism

1: Start with four sealed teeth and no revealed fields.
2: Click Advance one notch, or focus it and press Enter.
3: Exactly one child opens and the ratchet cannot move backward.
4: Reset when the paperwork has become sufficiently ceremonial.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function NotarizedFields() {
  return (
    <RatchetReveal>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </RatchetReveal>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe pieces revealed one at a time by the one-way ratchet.