-
Notifications
You must be signed in to change notification settings - Fork 112
Description
Currently, fields.object() displays all nested fields inline, which can create cluttered UIs when objects contain many fields. In contrast, fields.array() provides a clean "Add" button interface where each item can be expanded/collapsed.
Current Behavior
Object fields always display all nested fields inline:
fields.object({
image: fields.image({ /* ... */ }),
alt: fields.text({ /* ... */ }),
title: fields.text({ /* ... */ }),
caption: fields.text({ /* ... */ }),
})Result: All 4 fields appear stacked vertically, taking up significant screen space.
Desired Behavior
Provide an option to make object fields collapsible, similar to array items:
fields.object(
{
image: fields.image({ /* ... */ }),
alt: fields.text({ /* ... */ }),
title: fields.text({ /* ... */ }),
caption: fields.text({ /* ... */ }),
},
{
label: 'Featured Image',
layout: 'collapsible', // or 'expandable'
}
)This would display a collapsed fieldset with a label that expands to reveal the nested fields when clicked, reducing visual clutter.
Use Case
When building image fields with metadata (alt text, title, caption), we want a clean UI that:
- Shows a single line item when collapsed ("Featured Image")
- Expands to show all fields when the editor clicks to add/edit
- Similar to how array items work, but for a single object
Current Workaround
Some users work around this by wrapping objects in fields.array() with validation: { length: { max: 1 } }, but this:
- Creates awkward array syntax in content files
- Requires array index access in code (
image[0]) - Is semantically incorrect (using array for single item)
Additional Context
This UI pattern is common in form builders and CMS tools (WordPress ACF flexible content, Contentful complex fields) where grouped fields can be toggled open/closed to reduce visual complexity.
Note: I'm interested in contributing to Keystatic and would be happy to implement this feature if there's interest from the maintainers. Please let me know if this aligns with the project roadmap.