Document State
Payload's document state components communicate editing conflicts and protect users from losing work. The Admin Panel renders these states automatically during its standard document workflow; use the exports when composing or replacing an Edit View experience.
Import
Lock indicator
Locked displays the compact lock icon used when another user is editing a document. Its tooltip identifies that user when their email or ID is available.
Locked document
DocumentLocked interrupts editing and gives the user three appropriate paths: return to the previous view, inspect the document without editing, or take over editing.
The component opens while isActive is true. Supply callbacks for each navigation or takeover outcome; the component coordinates its own modal visibility and clears Payload's route cache when required.
Editing taken over
DocumentTakeOver is shown to the previous editor after another user takes control of the document. It lets them return to the dashboard or continue in read-only mode.
Unsaved changes
LeaveWithoutSaving watches the current document form and opens a confirmation modal when an authenticated user attempts to navigate away from modified or invalid content.
Set disablePreventLeave when another part of a custom workflow temporarily owns navigation. Use onPrevent to observe the attempted destination and onConfirm for work that must happen after the user accepts leaving.
Common props
These are the props most commonly used with this component family. See the exported types in @payloadcms/ui for the complete list.
Locked
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Identifies the user currently editing. |
| | — | Adds a class to the lock indicator wrapper. |
DocumentLocked
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Opens or closes the locked-document modal. |
| | — | Returns the user to the previous safe location. |
| | — | Switches the document into read-only mode. |
| | — | Takes control of editing the document. |
| | — | Displays the locking editor's last activity. |
| | — | Identifies the locking user. |
DocumentTakeOver
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Opens or closes the takeover modal. |
| | — | Returns the previous editor to the dashboard. |
| | — | Continues with the document in read-only mode. |
* An asterisk denotes that a prop is required.
Accessibility
- Preserve the built-in modal focus management when composing conflict states.
- Identify the other editor when that information can be shown safely.
- Keep read-only and takeover actions explicit; they have meaning beyond ordinary navigation.
- Do not rely on the lock icon alone when the editing conflict needs an explanation.
Provider requirements
These components depend on the document, form, authentication, translation, modal, route-cache, and route-transition contexts supplied by the Admin Panel. They are intended for Custom Components rendered within Payload's document workflow, not standalone application status messages.
Was this page helpful?