Component

SpellingPermit

It turns typing into a literal admission process. Correct characters reveal the supplied label and fill its permit bar, while a wrong character is refused instead of being allowed to advance the sentence.

Possible use

It could make a reviewer retype a handoff status before admitting it to a board, or let a presenter reveal an agenda phrase as if spelling were a security clearance.

Reasonable alternative

A reasonable local alternative is rendering the label and validating one ordinary input when validation is needed. A permit that refuses one wrong character adds ceremony without adding confidence.

01 / Preview

Try it yourself.

·············

Mechanism

1: Type “File the note” into the permit field.
2: Each correct character reveals one actual letter.
3: Make a mistake to see the permit reject it, then revoke and begin again.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function AdmittedLabel() {
  return <SpellingPermit label="File the note" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe exact text typed to reveal and admit the label.