Enhanced Error States and Nested Fields in Payload

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

Payload is free and open-source.

You can host it yourself, or let us handle hosting for you on Payload Cloud.

Get started in one line

npx create-payload-app

Code snippets using interfaceName property
InterfaceName: Generating Composable GraphQL and TypeScript Types

Generating schemas and types can be cumbersome if you want to access deeply nested types. Now we have interfaceName to alleviate that.

Custom CSS
How to Customize the Look and Feel of Payload with CSS

The Custom CSS feature in Payload extends beyond being a simple customization tool–it’s a pathway to seamlessly integrate your CMS with your brand.

Simplified Authentication for Headless CMS
Simplified Authentication for Headless CMS: Unlocking Reusability in One Line

Unlike other headless CMS platforms, Payload offers reusable authentication, saving you time and eliminating the need for separate providers.