# 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.

Block · With a Pass · https://tactileui.dev/blocks/dispatch

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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.

## Options

| Option | Type | Description |
| - | - | - |
| brand | text | Printed in capitals at the head of the receipt. |
| label | text | Label |
| title | text | Headline |
| lead | text | Lead |
| topics | text | Separated by “\|”: two to five. Each is a position on the segmented selector and is printed on the ticket. |
| topic | text | Must be one of the topics; otherwise the first is chosen. |
| action | text | Empty: the block only fires dispatch-send. Set: it also POSTs the fields as JSON there, and unlocks the key with the reason if the answer is not 2xx. Only http(s) or a path. |
| reply | text | Printed on the ticket and said in the status line. |
| prefix | text | Letters and digits: LDE gives references such as LDE-4F7K2M. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. The Printer follows it too. |

## Methods

- printer
- update
- destroy

## States

1. **At rest**: The 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 fields**: You have 0.”); focus goes to the first; typing a good value clears the mark.
3. **Sending**: 
4. **Sent**: The Printer prints the ticket line by line (head, reference, topic, first name, time, the promise). A ticket still in the slot is torn off first.
5. **Failed**: With 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. **Bot**: A form whose hidden website field is filled looks sent, but no event fires and nothing is posted.
7. **Topic by keyboard**: The selector is native radios in a fieldset: arrows move the chosen position, which stands proud of the cut.
8. **Tablet**: One column: the panel, then the Printer's bay below it.
9. **Phone**: Name and email stack, the topics wrap two by two, the send key fills its row; no sideways scroll.
10. **Reduced motion**: The Printer prints at once; the key and the topics change without transitions.
11. **Finishes**: Aluminium and graphite by data-finish; the Printer follows it too.

## How it works

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.