Collapsible UI for object fields similar to array items

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.

Start by reading the existing fields.object and fields.array implementations to compare their current rendering and expansion behavior. Determine how a collapsible object option should be represented alongside the proposed label and layout settings, then verify that nested fields can be hidden and revealed while preserving the existing object data shape.