Form That Queues While Offline

ProNew

When the device is offline a submit is kept in a visible queue ("Waiting to sync (2)") and sent when the connection returns, with Retry and Remove for each item and no duplicate if you press twice. Use this when people work somewhere with a poor connection and must not lose entries.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

online

Guide and examples

When to use it

Field staff, drivers or anyone in poor coverage enter records that must reach the server eventually.

Do not use it when: For anything that needs an immediate answer (payments, bookings) do not pretend it worked; tell the person it needs a connection.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`send`	`(note) => Promise<void>`	Send one entry; reject to mark it failed.
`online`	`boolean`	Overrides `navigator.onLine`, for tests and stories.

Accessibility

Connectivity and queue length are one polite status line in words ("Offline: entries are kept and sent when you reconnect. Waiting to sync (2)."), and the submit button changes its label when offline so the promise it makes is accurate.
The queue is a labelled list; each item shows Waiting, Sending or Failed as text and has Retry and Remove buttons named for the entry.
An entry is never sent twice: an in-flight guard skips items already sending when the connection flaps.

Testing

The pattern ships with a Testing Library test (offline-queue-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Field staff, drivers or anyone in poor coverage enter records that must reach the server eventually.

Do not use it when: For anything that needs an immediate answer (payments, bookings) do not pretend it worked; tell the person it needs a connection.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`send`	`(note) => Promise<void>`	Send one entry; reject to mark it failed.
`online`	`boolean`	Overrides `navigator.onLine`, for tests and stories.

Accessibility

Connectivity and queue length are one polite status line in words ("Offline: entries are kept and sent when you reconnect. Waiting to sync (2)."), and the submit button changes its label when offline so the promise it makes is accurate.
The queue is a labelled list; each item shows Waiting, Sending or Failed as text and has Retry and Remove buttons named for the entry.
An entry is never sent twice: an in-flight guard skips items already sending when the connection flaps.

Testing

The pattern ships with a Testing Library test (offline-queue-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.