Publish Checklist

ProNew

A live checklist of what must be done before Publish is enabled (title, summary, cover image, at least one tag), where each unmet item is a link that moves focus to its field. Use this when publishing has requirements and people need to see what is missing.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A draft becomes public only when several requirements are met, and error messages after a failed click are a poor way to find out.

Do not use it when: For two requirements, inline validation is simpler.

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
`onPublish`	`({ title, summary, cover, tags }) => Promise<void>`	Called when every requirement is met.

Edit the REQUIREMENTS array to change the rules; the checklist and the button read from it.

Accessibility

The checklist is a labelled complementary region. Done items are text with a hidden "(done)"; unmet items are buttons that say "go to the field" and move focus to it, so the list doubles as navigation to what needs work.
Progress is a named progress bar and the count "2 of 4" is text. Publish is disabled with the reason written under it.
Icons are decorative; state is never conveyed by color alone.

Testing

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

Guide and examples

When to use it

A draft becomes public only when several requirements are met, and error messages after a failed click are a poor way to find out.

Do not use it when: For two requirements, inline validation is simpler.

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
`onPublish`	`({ title, summary, cover, tags }) => Promise<void>`	Called when every requirement is met.

Edit the REQUIREMENTS array to change the rules; the checklist and the button read from it.

Accessibility

The checklist is a labelled complementary region. Done items are text with a hidden "(done)"; unmet items are buttons that say "go to the field" and move focus to it, so the list doubles as navigation to what needs work.
Progress is a named progress bar and the count "2 of 4" is text. Publish is disabled with the reason written under it.
Icons are decorative; state is never conveyed by color alone.

Testing

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