Skip to content

Collapsible UI for object fields similar to array items #1476

@Isaac-Harper

Description

@Isaac-Harper

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions