Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Enhanced Error States and Nested Fields in Payload

Published On
Error States Update: Nested Fields and Accessibility
Error States Update: Nested Fields and Accessibility
With an updated design, we made it easier to manage large document structures with error states for nested fields.

We recently updated our user interface to include error states for nested fields, which now surfaces child fields with errors to the top-level parent fields. Now you to see all fields that need attention at a glance, making Payload’s powerful nested fields even better.

Improved design for clarity and consistency

We have revamped the way error states are displayed in the Payload Admin UI, ensuring a consistent and unified appearance across all fields. This not only elevates the overall aesthetic of the interface but also significantly improves legibility in both light and dark modes.

This is just one step we are taking to making Payload more accessible and easy for everyone to use.

Error States UI Example within Payload

See all of your errors from anywhere in the document

At the core of Payload's appeal lies its powerful field nesting capabilities. It enables you to group fields, apply custom conditions, and validations - a favorite choice for many users. However, as documents grow deeper with nested fields, it becomes crucial to spot any potential errors that might have been overlooked during updates.

With our latest Admin UI update, we now showcase error states for nested fields like tabs, arrays, groups, and collapsibles. This means no matter how deeply a field is nested, you can effortlessly spot all errors and promptly address them, ensuring your documents are error-free.

Nested Errors in Dark and Light Mode

Want to give it a try? Just upgrade Payload to 1.11.2 or higher, or start a new project with npx create-payload-app to get these features.

And if you like nested fields as much as we do, you’ll love that we added the ability to generate composable types for your Blocks, Arrays, Groups, and named Tabs.