Skip to the object
TACTILE UI

Dispatch

A contact section made as a desk unit. A machined form with a segmented topic selector and a send key that locks while the message goes, and the Receipt Printer beside it, which prints the confirmation as a ticket with a reference number.

Built with Receipt Printer

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
Commit style send key, Segmented radio selector, Native validation with hints, Honeypot field, Send event with until, Receipt printer confirmation, Reference number, Container query layout, Concentric radii, Finish following
Stack
Vanilla ES modules, CSS
Needs
Receipt Printer
States
11 documented
Version
0.1.0
Licence
With a Pass

States

  1. At restThe panel with its four fields, the topic selector on its default, the send key with its lamp dark; the Printer idle in its bay with the caption “Your reference prints here.”
  2. Wrong fieldsEvery wrong field gets a red lip and aria-invalid and a hint that says how to fix it (“Add the part after the @, e.g. [email protected].”, “Write at least 20 characters… You have 0.”); focus goes to the first; typing a good value clears the mark.
  3. SendingThe key drops 3px, its lamp lights amber, the label says “Sending…”, aria-disabled is set and a second submit is ignored. It stays locked for at least 600 ms, and for as long as any promise a listener handed to detail.until() takes.
  4. SentThe Printer prints the ticket line by line (head, reference, topic, first name, time, the promise); the form empties; the key shows “Sent” with a green lamp for 2.6 s; the status line says the reference and the promise. A ticket still in the slot is torn off first.
  5. FailedWith an action, a non-2xx answer (or a rejected until() promise) unlocks the key, keeps the words, says “Not sent: …” in the error colour and fires dispatch-fail.
  6. BotA form whose hidden website field is filled looks sent, but no event fires and nothing is posted.
  7. Topic by keyboardThe selector is native radios in a fieldset: arrows move the chosen position, which stands proud of the cut.
  8. TabletOne column: the panel, then the Printer's bay below it.
  9. PhoneName and email stack, the topics wrap two by two, the send key fills its row; no sideways scroll.
  10. Reduced motionThe Printer prints at once; the key and the topics change without transitions.
  11. FinishesAluminium and graphite by data-finish; the Printer follows it too.

What it is for

A contact form that gives something back. Name, email, topic, message and a send key that is a commit key: it drops, lights amber and locks while the message is going, and shows green when it has gone. The confirmation is a small ticket printed by the library's Receipt Printer with a reference, the topic, the time and the promise, which the visitor tears off and keeps. Validation says how to fix each field, a honeypot catches bots, and the block fires dispatch-send with the fields (and posts them if given an action), so a page can wire it to any backend and keep the key locked while it does.

Original composition; Lode and its copy are invented. The Receipt Printer arrives in deps and is never imported by the block. The panel, the selector and the key are CSS drawn here in the kit's tokens; no image. Face: Instrument Sans (SIL OFL 1.1), the kit's own.